From 3eb0cef36d1313820d2ae2b4dffd6b89c27ec419 Mon Sep 17 00:00:00 2001 From: codGmer Date: Tue, 3 Nov 2020 14:24:30 +0100 Subject: [PATCH 01/12] Update Day.js --- CalendarPicker/Day.js | 83 ++++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 21217220..561441d5 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -26,22 +26,21 @@ export default function Day(props) { selectedRangeEndStyle, textStyle, todayTextStyle, - selectedDayTextStyle: propSelectedDayTextStyle, minDate, maxDate, - disabledDates, - disabledDatesTextStyle, + enabledDates, + enabledDatesTextStyle, minRangeDuration, maxRangeDuration, enableDateChange } = props; - const thisDay = moment({year, month, day, hour: 12 }); + const thisDay = moment({ year, month, day, hour: 12 }); const today = moment(); let dateOutOfRange; let daySelectedStyle = styles.dayButton; // may be overridden depending on state - let selectedDayTextStyle = {}; + let selectedDayColorStyle = {}; let propSelectedDayStyle; let dateIsBeforeMin = false; let dateIsAfterMax = false; @@ -59,13 +58,15 @@ export default function Day(props) { if (minDate) { dateIsBeforeMin = thisDay.isBefore(minDate, 'day'); } - - if (disabledDates) { - if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) { - dateIsDisabled = true; - } - else if (disabledDates instanceof Function) { - dateIsDisabled = disabledDates(thisDay); + if (enabledDates) { + if (Array.isArray(enabledDates) && !enabledDates.indexOf(thisDay.valueOf()) >= 0) { + if (enabledDates.indexOf(thisDay.valueOf()) >= 0) { + dateIsDisabled = false; + } else { + dateIsDisabled = true; + } + } else if (enabledDates instanceof Function) { + dateIsDisabled = enabledDates(thisDay); } } @@ -75,22 +76,22 @@ export default function Day(props) { if (maxRangeDuration) { if (Array.isArray(maxRangeDuration)) { - let maxRangeEntry = maxRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let maxRangeEntry = maxRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day')); if (maxRangeEntry && daysDiff > maxRangeEntry.maxDuration) { dateRangeGreaterThanMax = true; } - } else if(daysDiff > maxRangeDuration) { + } else if (daysDiff > maxRangeDuration) { dateRangeGreaterThanMax = true; } } if (minRangeDuration) { if (Array.isArray(minRangeDuration)) { - let minRangeEntry = minRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let minRangeEntry = minRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day')); if (minRangeEntry && daysDiff < minRangeEntry.minDuration) { dateRangeLessThanMin = true; } - } else if(daysDiff < minRangeDuration) { + } else if (daysDiff < minRangeDuration) { dateRangeLessThanMin = true; } } @@ -107,7 +108,7 @@ export default function Day(props) { let isThisDateInSelectedRange = selectedStartDate && selectedEndDate - && thisDay.isBetween(selectedStartDate, selectedEndDate,'day','[]'); + && thisDay.isBetween(selectedStartDate, selectedEndDate, 'day', '[]'); // If date is in range let's apply styles if (!dateOutOfRange || isThisDaySameAsSelectedStart || isThisDaySameAsSelectedEnd || isThisDateInSelectedRange) { @@ -116,7 +117,7 @@ export default function Day(props) { if (isToday) { daySelectedStyle = styles.selectedToday; // todayTextStyle prop overrides selectedDayTextColor (created via makeStyles) - selectedDayTextStyle = [propSelectedDayTextStyle, todayTextStyle || styles.selectedDayLabel]; + selectedDayColorStyle = todayTextStyle || styles.selectedDayLabel; } if (Array.isArray(customDatesStyles)) { @@ -143,10 +144,10 @@ export default function Day(props) { // set selected day style if (!allowRangeSelection && - selectedStartDate && - isThisDaySameAsSelectedStart) { + selectedStartDate && + isThisDaySameAsSelectedStart) { daySelectedStyle = styles.selectedDay; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel, isToday && todayTextStyle]; + selectedDayColorStyle = [styles.selectedDayLabel, isToday && todayTextStyle]; // selectedDayStyle prop overrides selectedDayColor (created via makeStyles) propSelectedDayStyle = selectedDayStyle || styles.selectedDayBackground; } @@ -157,44 +158,44 @@ export default function Day(props) { // Apply style for start date if (isThisDaySameAsSelectedStart) { daySelectedStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel]; + selectedDayColorStyle = styles.selectedDayLabel; } // Apply style for end date if (isThisDaySameAsSelectedEnd) { daySelectedStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle]; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel]; + selectedDayColorStyle = styles.selectedDayLabel; } // Apply style if start date is the same as end date if (isThisDaySameAsSelectedEnd && - isThisDaySameAsSelectedStart && - selectedEndDate.isSame(selectedStartDate, 'day')) { + isThisDaySameAsSelectedStart && + selectedEndDate.isSame(selectedStartDate, 'day')) { daySelectedStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle]; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel]; + selectedDayColorStyle = styles.selectedDayLabel; } // Apply style if this day is in range if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day')) { daySelectedStyle = [styles.inRangeDay, selectedRangeStyle]; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel]; + selectedDayColorStyle = styles.selectedDayLabel; } } // Apply style if start date has been selected but end date has not if (selectedStartDate && - !selectedEndDate && - isThisDaySameAsSelectedStart) { + !selectedEndDate && + isThisDaySameAsSelectedStart) { daySelectedStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [propSelectedDayTextStyle, styles.selectedDayLabel]; + selectedDayColorStyle = styles.selectedDayLabel; } } if (dateOutOfRange) { // selected start or end date, but not selectable now return ( - + - { day } + {day} @@ -204,10 +205,10 @@ export default function Day(props) { onPressDay({year, month, day}) }> - - { day } + style={[customDateStyle, daySelectedStyle, propSelectedDayStyle]} + onPress={() => onPressDay({ year, month, day })}> + + {day} @@ -217,8 +218,8 @@ export default function Day(props) { else { // dateOutOfRange = true but not selected start or end date return ( - - { day } + + {day} ); @@ -233,7 +234,7 @@ Day.propTypes = { styles: PropTypes.shape({}), day: PropTypes.number, onPressDay: PropTypes.func, - disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), + enabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; From f3d3862b93cc521a9c3dc761f7546a16e32abefd Mon Sep 17 00:00:00 2001 From: codGmer Date: Tue, 3 Nov 2020 14:24:44 +0100 Subject: [PATCH 02/12] Update DaysGridView.js --- CalendarPicker/DaysGridView.js | 41 ++++++++++++++++------------------ 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index 234e4885..f7ede4fb 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -93,10 +93,9 @@ export default class DaysGridView extends Component { // Check that selected date(s) match this month. if (isSelectedDiff && ( Utils.compareDates(selectedStartDate, firstDayOfMonth, 'month') || - Utils.compareDates(selectedEndDate, firstDayOfMonth, 'month') || - Utils.compareDates(prevSelStart, firstDayOfMonth, 'month') || - Utils.compareDates(prevSelEnd, firstDayOfMonth, 'month') )) - { + Utils.compareDates(selectedEndDate, firstDayOfMonth, 'month') || + Utils.compareDates(prevSelStart, firstDayOfMonth, 'month') || + Utils.compareDates(prevSelEnd, firstDayOfMonth, 'month'))) { // Range selection potentially affects all dates in the month. Recreate. if (this.props.allowRangeSelection) { this.setState({ @@ -107,8 +106,8 @@ export default class DaysGridView extends Component { // Search for affected dates and modify those only const daysGrid = [...this.state.daysGrid]; const { year } = this.props; - for (let i = 0; i true} - disabledDatesTextStyle={this.props.disabledDatesTextStyle} + enabledDates={() => true} + enabledDatesTextStyle={this.props.enabledDatesTextStyle} textStyle={this.props.textStyle} /> ) @@ -233,13 +231,13 @@ export default class DaysGridView extends Component { const { daysGrid } = this.state; const renderedDaysGrid = daysGrid.map((weekRow, i) => ( - { weekRow.map(day => day.component ) } + { weekRow.map(day => day.component)} )); return ( - { renderedDaysGrid } + { renderedDaysGrid} ); } @@ -251,12 +249,11 @@ DaysGridView.propTypes = { year: PropTypes.number.isRequired, onPressDay: PropTypes.func, startFromMonday: PropTypes.bool, - selectedDayStyle: ViewPropTypes, - selectedRangeStartStyle: ViewPropTypes, - selectedRangeStyle: ViewPropTypes, - selectedRangeEndStyle: ViewPropTypes, + selectedDayStyle: ViewPropTypes.style, + selectedRangeStartStyle: ViewPropTypes.style, + selectedRangeStyle: ViewPropTypes.style, + selectedRangeEndStyle: ViewPropTypes.style, todayTextStyle: Text.propTypes.style, - selectedDayTextStyle: Text.propTypes.style, customDatesStyles: PropTypes.oneOfType([ PropTypes.func, PropTypes.arrayOf(PropTypes.shape({ @@ -265,13 +262,13 @@ DaysGridView.propTypes = { PropTypes.instanceOf(Date), PropTypes.instanceOf(moment) ]), - containerStyle: ViewPropTypes, - style: ViewPropTypes, + containerStyle: ViewPropTypes.style, + style: ViewPropTypes.style, textStyle: Text.propTypes.style, })), ]), - disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), - disabledDatesTextStyle: Text.propTypes.style, + enabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), + enabledDatesTextStyle: Text.propTypes.style, minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; From b41c033b5887b492312ad7596e3f75d8d5265cd5 Mon Sep 17 00:00:00 2001 From: codGmer Date: Tue, 3 Nov 2020 14:25:34 +0100 Subject: [PATCH 03/12] Update index.js --- CalendarPicker/index.js | 239 ++++++++++++++++++++-------------------- 1 file changed, 119 insertions(+), 120 deletions(-) diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index 52c3b727..fc7c1237 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -25,7 +25,7 @@ export default class CalendarPicker extends Component { styles: {}, ...this.updateScaledStyles(props), ...this.updateMonthYear(props.initialDate), - ...this.updateDisabledDates(props.disabledDates), + ...this.updateDisabledDates(props.enabledDates), ...this.updateMinMaxRanges(props.minRangeDuration, props.maxRangeDuration), ...this.createMonths(props, {}), }; @@ -71,7 +71,7 @@ export default class CalendarPicker extends Component { let selectedDateRanges = {}; const { selectedStartDate, selectedEndDate } = this.props; if (selectedStartDate !== prevProps.selectedStartDate || - selectedEndDate !== prevProps.selectedEndDate + selectedEndDate !== prevProps.selectedEndDate ) { selectedDateRanges = { selectedStartDate: selectedStartDate && moment(selectedStartDate), @@ -80,24 +80,24 @@ export default class CalendarPicker extends Component { doStateUpdate = true; } - let disabledDates = {}; - if (prevProps.disabledDates !== this.props.disabledDates) { - disabledDates = this.updateDisabledDates(this.props.disabledDates); + let enabledDates = {}; + if (prevProps.enabledDates !== this.props.enabledDates) { + enabledDates = this.updateDisabledDates(this.props.enabledDates); doStateUpdate = true; } let rangeDurations = {}; if (prevProps.minRangeDuration !== this.props.minRangeDuration || - prevProps.maxRangeDuration !== this.props.maxRangeDuration + prevProps.maxRangeDuration !== this.props.maxRangeDuration ) { - const {minRangeDuration, maxRangeDuration} = this.props; + const { minRangeDuration, maxRangeDuration } = this.props; rangeDurations = this.updateMinMaxRanges(minRangeDuration, maxRangeDuration); doStateUpdate = true; } let minMaxDates = {}; if (prevProps.minDate !== this.props.minDate || - prevProps.minDate !== this.props.minDate + prevProps.minDate !== this.props.minDate ) { minMaxDates.minDate = this.props.minDate && moment(this.props.minDate); minMaxDates.maxDate = this.props.maxDate && moment(this.props.maxDate); @@ -108,14 +108,14 @@ export default class CalendarPicker extends Component { ...newStyles, ...newMonthYear, ...selectedDateRanges, - ...disabledDates, + ...enabledDates, ...rangeDurations, ...minMaxDates, }; let renderMonthParams = {}; - const _state = {...this.state, ...newState}; + const _state = { ...this.state, ...newState }; renderMonthParams = this.createMonthProps(_state); - this.setState({...newState, renderMonthParams}); + this.setState({ ...newState, renderMonthParams }); } } @@ -157,22 +157,22 @@ export default class CalendarPicker extends Component { return newState; } - updateDisabledDates = (_disabledDates = []) => { - let disabledDates = []; - if (_disabledDates) { - if (Array.isArray(_disabledDates)) { + updateDisabledDates = (_enabledDates = []) => { + let enabledDates = []; + if (_enabledDates) { + if (Array.isArray(_enabledDates)) { // Convert input date into timestamp - _disabledDates.map(date => { + _enabledDates.map(date => { let thisDate = moment(date); thisDate.set({ hour: 12, minute: 0, second: 0, millisecond: 0 }); - disabledDates.push(thisDate.valueOf()); + enabledDates.push(thisDate.valueOf()); }); } - else if (_disabledDates instanceof Function) { - disabledDates = _disabledDates; + else if (_enabledDates instanceof Function) { + enabledDates = _enabledDates; } } - return { disabledDates }; + return { enabledDates }; } updateMinMaxRanges = (_minRangeDuration, _maxRangeDuration) => { @@ -208,10 +208,10 @@ export default class CalendarPicker extends Component { maxRangeDuration = _maxRangeDuration; } } - return {minRangeDuration, maxRangeDuration}; + return { minRangeDuration, maxRangeDuration }; } - handleOnPressDay = ({year, month, day}) => { + handleOnPressDay = ({ year, month, day }) => { const { selectedStartDate: prevSelectedStartDate, selectedEndDate: prevSelectedEndDate, @@ -236,7 +236,7 @@ export default class CalendarPicker extends Component { const selectedEndDate = date; this.setState({ selectedEndDate, - renderMonthParams: this.createMonthProps({...this.state, selectedStartDate, selectedEndDate}), + renderMonthParams: this.createMonthProps({ ...this.state, selectedStartDate, selectedEndDate }), }); // Sync end date with parent onDateChange(date, Utils.END_DATE); @@ -248,7 +248,7 @@ export default class CalendarPicker extends Component { this.setState({ selectedStartDate, selectedEndDate, - renderMonthParams: this.createMonthProps({...this.state, selectedStartDate, selectedEndDate}), + renderMonthParams: this.createMonthProps({ ...this.state, selectedStartDate, selectedEndDate }), }, () => { // Sync both start and end dates with parent *after* state update. onDateChange(this.state.selectedStartDate, Utils.START_DATE); @@ -262,7 +262,7 @@ export default class CalendarPicker extends Component { this.setState({ selectedStartDate, selectedEndDate, - renderMonthParams: this.createMonthProps({...this.state, selectedStartDate, selectedEndDate}), + renderMonthParams: this.createMonthProps({ ...this.state, selectedStartDate, selectedEndDate }), }, () => { // Sync start date with parent *after* state update. onDateChange(this.state.selectedStartDate, Utils.START_DATE); @@ -285,7 +285,7 @@ export default class CalendarPicker extends Component { year--; } const scrollFinisher = this.props.scrollable && this.scroller.scrollLeft; - this.handleOnPressFinisher({year, month: previousMonth, scrollFinisher}); + this.handleOnPressFinisher({ year, month: previousMonth, scrollFinisher }); } handleOnPressNext = () => { @@ -299,10 +299,10 @@ export default class CalendarPicker extends Component { year++; } const scrollFinisher = this.props.scrollable && this.scroller.scrollRight; - this.handleOnPressFinisher({year, month: nextMonth, scrollFinisher}); + this.handleOnPressFinisher({ year, month: nextMonth, scrollFinisher }); } - handleOnPressFinisher = ({year, month, scrollFinisher, extraState}) => { + handleOnPressFinisher = ({ year, month, scrollFinisher, extraState }) => { if (scrollFinisher) { scrollFinisher(); } @@ -310,11 +310,11 @@ export default class CalendarPicker extends Component { const currentMonth = parseInt(month); const currentYear = parseInt(year); const renderMonthParams = extraState || { - renderMonthParams: {...this.state.renderMonthParams, month, year} + renderMonthParams: { ...this.state.renderMonthParams, month, year } }; this.setState({ currentMonth, currentYear, ...renderMonthParams }); } - const currentMonthYear = moment({year, month, hour: 12}); + const currentMonthYear = moment({ year, month, hour: 12 }); this.props.onMonthChange && this.props.onMonthChange(currentMonthYear); } @@ -330,20 +330,20 @@ export default class CalendarPicker extends Component { }); } - handleOnSelectMonthYear = ({month, year}) => { + handleOnSelectMonthYear = ({ month, year }) => { const currentYear = year; const currentMonth = month; const scrollableState = this.props.scrollable ? { - ...this.createMonths(this.props, {currentYear, currentMonth}), + ...this.createMonths(this.props, { currentYear, currentMonth }), } : {}; const extraState = { - renderMonthParams: {...this.state.renderMonthParams, month, year}, + renderMonthParams: { ...this.state.renderMonthParams, month, year }, currentView: 'days', ...scrollableState, }; - this.handleOnPressFinisher({month, year, extraState}); + this.handleOnPressFinisher({ month, year, extraState }); } resetSelections = () => { @@ -359,7 +359,7 @@ export default class CalendarPicker extends Component { month: state.currentMonth, year: state.currentYear, styles: state.styles, - disabledDates: state.disabledDates, + enabledDates: state.enabledDates, minDate: state.minDate, maxDate: state.maxDate, minRangeDuration: state.minRangeDuration, @@ -371,10 +371,9 @@ export default class CalendarPicker extends Component { allowRangeSelection: this.props.allowRangeSelection, allowBackwardRangeSelect: this.props.allowBackwardRangeSelect, showDayStragglers: this.props.showDayStragglers, - disabledDatesTextStyle: this.props.disabledDatesTextStyle, + enabledDatesTextStyle: this.props.enabledDatesTextStyle, textStyle: this.props.textStyle, todayTextStyle: this.props.todayTextStyle, - selectedDayTextStyle: this.props.selectedDayTextStyle, selectedDayStyle: this.props.selectedDayStyle, selectedDisabledDatesTextStyle: this.props.selectedDisabledDatesTextStyle, selectedRangeStartStyle: this.props.selectedRangeStartStyle, @@ -384,7 +383,7 @@ export default class CalendarPicker extends Component { }; } - createMonths = (props, {currentMonth, currentYear}) => { + createMonths = (props, { currentMonth, currentYear }) => { if (!props.scrollable) { return []; } @@ -403,9 +402,9 @@ export default class CalendarPicker extends Component { // Center start month in scroller. Visible month is either the initialDate // prop, or the current month & year that has been selected. let _initialDate = Number.isInteger(currentMonth) && Number.isInteger(currentYear) && - moment({ year: currentYear, month: currentMonth, hour: 12 }); + moment({ year: currentYear, month: currentMonth, hour: 12 }); _initialDate = _initialDate || initialDate; - let firstScrollerMonth = _initialDate.clone().subtract(numMonths/2, 'months'); + let firstScrollerMonth = _initialDate.clone().subtract(numMonths / 2, 'months'); if (minDate && restrictMonthNavigation && firstScrollerMonth.isBefore(minDate, 'month')) { firstScrollerMonth = moment(minDate); } @@ -472,100 +471,100 @@ export default class CalendarPicker extends Component { let content; switch (currentView) { - case 'months': - content = ( - - ); - break; - case 'years': - content = ( - - ); - break; - default: - content = ( - - - - { scrollable ? - this.scroller = scroller} - data={monthsList} - renderMonth={this.renderMonth} - renderMonthParams={renderMonthParams} - maxSimultaneousMonths={this.numMonthsScroll} - initialRenderIndex={initialScrollerIndex} + ); + break; + default: + content = ( + + + - : - this.renderMonth(renderMonthParams) - } - - ); + { scrollable ? + this.scroller = scroller} + data={monthsList} + renderMonth={this.renderMonth} + renderMonthParams={renderMonthParams} + maxSimultaneousMonths={this.numMonthsScroll} + initialRenderIndex={initialScrollerIndex} + minDate={minDate} + maxDate={maxDate} + restrictMonthNavigation={restrictMonthNavigation} + updateMonthYear={this.updateMonthYear} + onMonthChange={onMonthChange} + horizontal={horizontal} + /> + : + this.renderMonth(renderMonthParams) + } + + ); } return content; From be703dfd200bb821895f0f020fbde108b661e633 Mon Sep 17 00:00:00 2001 From: codGmer Date: Tue, 3 Nov 2020 14:26:08 +0100 Subject: [PATCH 04/12] Update Month.js --- CalendarPicker/Month.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CalendarPicker/Month.js b/CalendarPicker/Month.js index b5d1b290..c33e03bb 100644 --- a/CalendarPicker/Month.js +++ b/CalendarPicker/Month.js @@ -35,7 +35,7 @@ export default function Month(props) { monthIsBeforeMin = month < minDate.month(); } - // ToDo: disabledMonths props to disable months separate from disabledDates + // ToDo: disabledMonths props to disable months separate from enabledDates monthOutOfRange = monthIsAfterMax || monthIsBeforeMin || monthIsDisabled; @@ -47,7 +47,7 @@ export default function Month(props) { if (maxDate && (year > maxDate.year())) { _year = maxDate.year(); } - onSelectMonth({month, year: _year}); + onSelectMonth({ month, year: _year }); }; return ( @@ -56,12 +56,12 @@ export default function Month(props) { - { monthName } + {monthName} : - { monthName } + {monthName} } From 3d55a51452e4b321097bc5f359b9eda27c1e228c Mon Sep 17 00:00:00 2001 From: codGmer Date: Tue, 3 Nov 2020 14:28:29 +0100 Subject: [PATCH 05/12] Update Year.js --- CalendarPicker/Year.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CalendarPicker/Year.js b/CalendarPicker/Year.js index e1ed9148..be29102f 100644 --- a/CalendarPicker/Year.js +++ b/CalendarPicker/Year.js @@ -32,21 +32,21 @@ export default function Year(props) { yearIsBeforeMin = year < minDate.year(); } - // ToDo: disabledYears props to disable years separate from disabledDates + // ToDo: disabledYears props to disable years separate from enabledDates yearOutOfRange = yearIsAfterMax || yearIsBeforeMin || yearIsDisabled; const onSelect = () => { // Guard against navigating to months beyond min/max dates. let month = currentMonth; - let currentMonthYear = moment({year: currentYear, month}); + let currentMonthYear = moment({ year: currentYear, month }); if (maxDate && currentMonthYear.isAfter(maxDate, 'month')) { month = maxDate.month(); } if (minDate && currentMonthYear.isBefore(minDate, 'month')) { month = minDate.month(); } - onSelectYear({month, year}); + onSelectYear({ month, year }); }; return ( @@ -55,12 +55,12 @@ export default function Year(props) { - { year } + {year} : - { year } + {year} } From dc4195100cdbea5a8535ab345a792c712ff4edeb Mon Sep 17 00:00:00 2001 From: codGmer Date: Fri, 13 Nov 2020 15:37:16 +0100 Subject: [PATCH 06/12] Update DaysGridView.js --- CalendarPicker/DaysGridView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index f7ede4fb..79988b80 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -249,10 +249,10 @@ DaysGridView.propTypes = { year: PropTypes.number.isRequired, onPressDay: PropTypes.func, startFromMonday: PropTypes.bool, - selectedDayStyle: ViewPropTypes.style, - selectedRangeStartStyle: ViewPropTypes.style, - selectedRangeStyle: ViewPropTypes.style, - selectedRangeEndStyle: ViewPropTypes.style, + //selectedDayStyle: ViewPropTypes.style, + //selectedRangeStartStyle: ViewPropTypes.style, + //selectedRangeStyle: ViewPropTypes.style, + //selectedRangeEndStyle: ViewPropTypes.style, todayTextStyle: Text.propTypes.style, customDatesStyles: PropTypes.oneOfType([ PropTypes.func, From f496753e305b504df931bdf0d3f10c3e42ab3fd2 Mon Sep 17 00:00:00 2001 From: codGmer Date: Fri, 13 Nov 2020 15:45:31 +0100 Subject: [PATCH 07/12] Update DaysGridView.js --- CalendarPicker/DaysGridView.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index 79988b80..2a3643a9 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { View, Text, + ViewPropTypes } from 'react-native'; import PropTypes from 'prop-types'; import Day from './Day'; @@ -9,10 +10,6 @@ import EmptyDay from './EmptyDay'; import { Utils } from './Utils'; import moment from 'moment'; -const ViewPropTypes = PropTypes.shape({ - style: PropTypes.any, -}); - export default class DaysGridView extends Component { constructor(props) { super(props); @@ -249,10 +246,10 @@ DaysGridView.propTypes = { year: PropTypes.number.isRequired, onPressDay: PropTypes.func, startFromMonday: PropTypes.bool, - //selectedDayStyle: ViewPropTypes.style, - //selectedRangeStartStyle: ViewPropTypes.style, - //selectedRangeStyle: ViewPropTypes.style, - //selectedRangeEndStyle: ViewPropTypes.style, + selectedDayStyle: ViewPropTypes.style, + selectedRangeStartStyle: ViewPropTypes.style, + selectedRangeStyle: ViewPropTypes.style, + selectedRangeEndStyle: ViewPropTypes.style, todayTextStyle: Text.propTypes.style, customDatesStyles: PropTypes.oneOfType([ PropTypes.func, From c43af1d844ac5499129fe8ef9071180ad705e797 Mon Sep 17 00:00:00 2001 From: codGmer Date: Sat, 5 Dec 2020 15:40:19 +0100 Subject: [PATCH 08/12] Update DaysGridView.js --- CalendarPicker/DaysGridView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index 2a3643a9..f5aa7ffe 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -246,10 +246,10 @@ DaysGridView.propTypes = { year: PropTypes.number.isRequired, onPressDay: PropTypes.func, startFromMonday: PropTypes.bool, - selectedDayStyle: ViewPropTypes.style, - selectedRangeStartStyle: ViewPropTypes.style, - selectedRangeStyle: ViewPropTypes.style, - selectedRangeEndStyle: ViewPropTypes.style, + selectedDayStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), + selectedRangeStartStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), + selectedRangeStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), + selectedRangeEndStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), todayTextStyle: Text.propTypes.style, customDatesStyles: PropTypes.oneOfType([ PropTypes.func, From 218fe6e2a5ac9522d12dc56c69c058c6183f19bf Mon Sep 17 00:00:00 2001 From: codGmer Date: Sat, 5 Dec 2020 15:50:18 +0100 Subject: [PATCH 09/12] Update DaysGridView.js --- CalendarPicker/DaysGridView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index f5aa7ffe..1e66b5a9 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -246,10 +246,10 @@ DaysGridView.propTypes = { year: PropTypes.number.isRequired, onPressDay: PropTypes.func, startFromMonday: PropTypes.bool, - selectedDayStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), - selectedRangeStartStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), - selectedRangeStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), - selectedRangeEndStyle: PropTypes.oneOfType([PropTypes.undefined, ViewPropTypes.style]), + selectedDayStyle: PropTypes.oneOfType([PropTypes.any, ViewPropTypes.style]), + selectedRangeStartStyle: PropTypes.oneOfType([PropTypes.any, ViewPropTypes.style]), + selectedRangeStyle: PropTypes.oneOfType([PropTypes.any, ViewPropTypes.style]), + selectedRangeEndStyle: PropTypes.oneOfType([PropTypes.any, ViewPropTypes.style]), todayTextStyle: Text.propTypes.style, customDatesStyles: PropTypes.oneOfType([ PropTypes.func, From 930aef93956e5852bd651b32506318ccf03d32bc Mon Sep 17 00:00:00 2001 From: codGmer Date: Sun, 3 Jan 2021 15:07:55 +0100 Subject: [PATCH 10/12] Add customHitSlop prop --- CalendarPicker/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index fc7c1237..21a7facb 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -460,6 +460,7 @@ export default class CalendarPicker extends Component { restrictMonthNavigation, headingLevel, dayLabelsWrapper, + customHitSlop, customDayHeaderStyles, selectMonthTitle, selectYearTitle, @@ -516,6 +517,7 @@ export default class CalendarPicker extends Component { styles={styles} currentMonth={currentMonth} currentYear={currentYear} + customHitSlop={customHitSlop} initialDate={moment(initialDate)} onPressPrevious={this.handleOnPressPrevious} onPressNext={this.handleOnPressNext} From 55233ff72bcd91c1f26125107c056abf24945244 Mon Sep 17 00:00:00 2001 From: codGmer Date: Sun, 3 Jan 2021 15:08:38 +0100 Subject: [PATCH 11/12] Add customHitSlop prop for prev and next button --- CalendarPicker/HeaderControls.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/CalendarPicker/HeaderControls.js b/CalendarPicker/HeaderControls.js index bcc7046f..f9a9b01e 100644 --- a/CalendarPicker/HeaderControls.js +++ b/CalendarPicker/HeaderControls.js @@ -22,6 +22,7 @@ export default function HeaderControls(props) { previousComponent, nextComponent, previousTitle, + customHitSlop, nextTitle, previousTitleStyle, nextTitleStyle, @@ -54,21 +55,22 @@ export default function HeaderControls(props) { styles={styles.previousContainer} textStyles={[styles.navButtonText, textStyle, previousTitleStyle]} /> - + - { monthName } + {monthName} - { year } + {year} Date: Sun, 3 Jan 2021 15:08:59 +0100 Subject: [PATCH 12/12] Add customHitSlop prop for prev and next button --- CalendarPicker/Controls.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CalendarPicker/Controls.js b/CalendarPicker/Controls.js index ab9b9f58..217264c8 100644 --- a/CalendarPicker/Controls.js +++ b/CalendarPicker/Controls.js @@ -13,20 +13,20 @@ export default function Controls(props) { label, component, onPressControl, + customHitSlop, disabled, } = props; - return ( onPressControl()} style={styles} disabled={disabled} - hitSlop={{ top: 20, bottom: 20, left: 40, right: 40 }} + hitSlop={typeof customHitSlop !== 'undefined' ? customHitSlop : { top: 20, bottom: 20, left: 40, right: 40 }} > - - { component || + + {component || - { label } + {label} }