Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-moment-proptypes' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
onDatesChange={(date) => { this.handleChange(date) }}
onFocusChange={this.onFocusChange}
/>
);
}
}
DateRange.propTypes = {
componentId: React.PropTypes.string.isRequired,
appbaseField: React.PropTypes.string,
title: React.PropTypes.string,
placeholder: React.PropTypes.string,
startDate: momentPropTypes.momentObj,
endDate: momentPropTypes.momentObj,
numberOfMonths: React.PropTypes.number,
allowAllDates: React.PropTypes.bool,
extra: React.PropTypes.any
};
// Default props value
DateRange.defaultProps = {
placeholder: 'Select Date',
numberOfMonths: 2,
allowAllDates: true,
startDate: null,
endDate: null
};
// context type
DateRange.contextTypes = {
const FooterText = styled.Text`
${props => {
return {
textAlign: "center",
...props.theme.calendarModalFooterText
};
}}
`;
const propTypes = {
mode: PropTypes.string,
numberOfMonths: PropTypes.number,
initialVisibleMonth: PropTypes.func,
dates: PropTypes.arrayOf(momentPropTypes.momentObj),
startDate: momentPropTypes.momentObj,
endDate: momentPropTypes.momentObj,
// Custom props
modalProps: PropTypes.object,
listViewProps: PropTypes.object,
onDayPress: PropTypes.func,
onClearPress: PropTypes.func,
onClosePress: PropTypes.func,
onSavePress: PropTypes.func,
// i18n
monthFormat: PropTypes.string,
phrases: PropTypes.shape({
clearDates: PropTypes.node,
save: PropTypes.node
};
}}
`;
const DayContainer = styled.View`
${{
flex: 1,
alignSelf: "stretch",
// Hack to avoid this issue
// https://github.com/facebook/react-native/issues/10539
marginLeft: -1,
marginRight: -1
}}
`;
const propTypes = {
month: momentPropTypes.momentObj,
dates: PropTypes.arrayOf(momentPropTypes.momentObj),
onDayPress: PropTypes.func,
// i18n
monthFormat: PropTypes.string
};
const defaultProps = {
month: moment(),
dates: [],
onDayPress() {},
// i18n
monthFormat: "MMMM YYYY" // english locale
};
curYear={endYear}
prefix="End"
crashesDateRange={crashesDateRange}
/>
);
}
}
// react-datepicker requires dates to be moment objects
FilterByDate.propTypes = {
crashesDateRange: PropTypes.shape({
minDate: momentPropTypes.momentObj,
maxDate: momentPropTypes.momentObj,
}).isRequired,
startDateChange: PropTypes.func.isRequired,
endDateChange: PropTypes.func.isRequired,
startDate: momentPropTypes.momentObj.isRequired,
endDate: momentPropTypes.momentObj.isRequired,
years: PropTypes.arrayOf(PropTypes.number).isRequired,
};
export default FilterByDate;
import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
import DayOfWeekShape from '../shapes/DayOfWeekShape';
import { DATEPICKER } from './../../ThemeIdentifiers';
import * as baseTheme from './../style/style.scss';
import {
HORIZONTAL_ORIENTATION,
VERTICAL_ORIENTATION,
VERTICAL_SCROLLABLE,
DAY_SIZE,
} from '../constants';
const propTypes = forbidExtraProps({
enableOutsideDays: PropTypes.bool,
firstVisibleMonthIndex: PropTypes.number,
initialMonth: momentPropTypes.momentObj,
isAnimating: PropTypes.bool,
numberOfMonths: PropTypes.number,
modifiers: PropTypes.object,
orientation: ScrollableOrientationShape,
onDayClick: PropTypes.func,
onDayMouseEnter: PropTypes.func,
onDayMouseLeave: PropTypes.func,
onMonthTransitionEnd: PropTypes.func,
renderMonth: PropTypes.func,
renderDay: PropTypes.func,
transformValue: PropTypes.string,
daySize: nonNegativeInteger,
focusedDate: momentPropTypes.momentObj, // indicates focusable day
isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
firstDayOfWeek: DayOfWeekShape,
import momentPropTypes from 'react-moment-proptypes';
import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
import { withStyles, withStylesPropTypes } from 'react-with-styles';
import moment from 'moment';
import raf from 'raf';
import { CalendarDayPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';
import getCalendarDaySettings from '../utils/getCalendarDaySettings';
import ModifiersShape from '../shapes/ModifiersShape';
import { DAY_SIZE } from '../constants';
const propTypes = forbidExtraProps({
...withStylesPropTypes,
day: momentPropTypes.momentObj,
daySize: nonNegativeInteger,
isOutsideDay: PropTypes.bool,
modifiers: ModifiersShape,
isFocused: PropTypes.bool,
tabIndex: PropTypes.oneOf([0, -1]),
onDayClick: PropTypes.func,
onDayMouseEnter: PropTypes.func,
onDayMouseLeave: PropTypes.func,
renderDayContents: PropTypes.func,
ariaLabelFormat: PropTypes.string,
// internationalization
phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
});
const defaultProps = {
import MomentPropTypes from 'react-moment-proptypes';
import moment from 'moment';
// import onClickOutside from 'react-onclickoutside';
import { WeeksView, MonthsView, YearsView } from './views.js';
import { getMomentOrNull, getYearsInterval } from './utils.js';
import config from './config.js';
import defaultClasses from './classes.js';
import defaults from './defaults.js';
class BetterDatePicker extends Component {
static propTypes = {
date: PropTypes.oneOfType([
MomentPropTypes.momentObj,
MomentPropTypes.momentString,
PropTypes.instanceOf(Date)
]),
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
classes: PropTypes.object,
view: PropTypes.oneOf(['weeks', 'months', 'years']),
views: PropTypes.arrayOf(PropTypes.oneOf(['weeks', 'months', 'years'])),
firstDayOfWeek: PropTypes.number,
theme: PropTypes.object
};
static defaultProps = {
classes: defaultClasses,
format: defaults.format,
views: ['weeks', 'months', 'years'],
import moment from 'moment';
// import onClickOutside from 'react-onclickoutside';
import { WeeksView, MonthsView, YearsView } from './views.js';
import { getMomentOrNull, getYearsInterval } from './utils.js';
import config from './config.js';
import defaultClasses from './classes.js';
import defaults from './defaults.js';
class BetterDatePicker extends Component {
static propTypes = {
date: PropTypes.oneOfType([
MomentPropTypes.momentObj,
MomentPropTypes.momentString,
PropTypes.instanceOf(Date)
]),
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
classes: PropTypes.object,
view: PropTypes.oneOf(['weeks', 'months', 'years']),
views: PropTypes.arrayOf(PropTypes.oneOf(['weeks', 'months', 'years'])),
firstDayOfWeek: PropTypes.number,
theme: PropTypes.object
};
static defaultProps = {
classes: defaultClasses,
format: defaults.format,
views: ['weeks', 'months', 'years'],
firstDayOfWeek: 0,
contributingFactors: [],
cyclist_injured: 0,
cyclist_killed: 0,
motorist_injured: 0,
motorist_killed: 0,
pedestrian_injured: 0,
pedestrian_killed: 0,
persons_injured: 0,
persons_killed: 0,
total_crashes: 0,
identifier: '',
lngLats: [],
};
StatsLegend.propTypes = {
startDate: momentPropTypes.momentObj.isRequired,
endDate: momentPropTypes.momentObj.isRequired,
contributingFactors: PropTypes.arrayOf(PropTypes.shape({
count_factor: PropTypes.number,
factor: PropTypes.string
})),
cyclist_injured: PropTypes.number,
cyclist_killed: PropTypes.number,
motorist_injured: PropTypes.number,
motorist_killed: PropTypes.number,
pedestrian_injured: PropTypes.number,
pedestrian_killed: PropTypes.number,
persons_injured: PropTypes.number,
persons_killed: PropTypes.number,
total_crashes: PropTypes.number,
filterType: PropTypes.shape({
fatality: PropTypes.shape({
onMouseLeave={this.mouseLeave}
onClick={this.onClick}
onFocus={this.onFocus}
onBlur={this.onBlur}
id={`row_${this.props.row}_cell_${this.props.id}_${this.props.mode}`}
>
{dateFormatted}
);
}
}
Cell.propTypes = {
id: PropTypes.number.isRequired,
cellDay: momentPropTypes.momentObj.isRequired,
date: momentPropTypes.momentObj.isRequired,
otherDate: momentPropTypes.momentObj,
maxDate: momentPropTypes.momentObj,
dateSelectedNoTimeCallback: PropTypes.func.isRequired,
keyboardCellCallback: PropTypes.func.isRequired,
focusOnCallback: PropTypes.func.isRequired,
focusDate: PropTypes.any.isRequired,
month: PropTypes.number.isRequired,
cellFocusedCallback: PropTypes.func.isRequired,
mode: PropTypes.string.isRequired,
smartMode: PropTypes.bool,
style: PropTypes.object,
darkMode: PropTypes.bool,
};
export default Cell;