From 6bc524b6ae0e028e41ed7a0c44461be989a0663f Mon Sep 17 00:00:00 2001 From: farhoudshapouran Date: Wed, 1 Nov 2023 09:47:14 +0300 Subject: [PATCH] fix: invalid array length --- package.json | 2 +- src/components/DaySelector.tsx | 4 +- src/components/Header.tsx | 2 + src/components/MonthSelector.tsx | 2 +- src/components/TimePicker/Wheel.tsx | 35 +++++---- src/utils.ts | 115 ++++++++++++++-------------- 6 files changed, 83 insertions(+), 77 deletions(-) diff --git a/package.json b/package.json index c9a7f65..cf92b7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-ui-datepicker", - "version": "1.0.6", + "version": "1.0.7", "description": "Customizable datetime picker for React Native", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx index de46e34..254970a 100644 --- a/src/components/DaySelector.tsx +++ b/src/components/DaySelector.tsx @@ -28,14 +28,14 @@ const DaySelector = () => { return ( - {utils.getWeekdaysMin().map((item, index) => ( + {utils.getWeekdaysMin()?.map((item, index) => ( {item} ))} - {days.map((day, index) => { + {days?.map((day, index) => { const dayContainerStyle = day && day.isCurrentMonth ? theme?.dayContainerStyle diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b1155ee..ec996c2 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -22,6 +22,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const renderPrevButton = ( calendarView === CalendarViews.day ? onChangeMonth(-1) @@ -49,6 +50,7 @@ const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => { const renderNextButton = ( calendarView === CalendarViews.day ? onChangeMonth(1) diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx index f82fe8b..37cf4c3 100644 --- a/src/components/MonthSelector.tsx +++ b/src/components/MonthSelector.tsx @@ -9,7 +9,7 @@ const MonthSelector = () => { return ( - {utils.getMonths().map((item, index) => { + {utils.getMonths()?.map((item, index) => { const activeItemStyle = index === month ? { diff --git a/src/components/TimePicker/Wheel.tsx b/src/components/TimePicker/Wheel.tsx index b3731c1..bb40b3d 100644 --- a/src/components/TimePicker/Wheel.tsx +++ b/src/components/TimePicker/Wheel.tsx @@ -113,22 +113,25 @@ const Wheel = ({ translateY.setValue(0); translateY.setOffset(0); const currentIndex = displayValues.indexOf(value); - return displayValues.map((_, index) => - translateY - .interpolate({ - inputRange: [-radius, radius], - outputRange: [ - -radius + ((radius * 2) / displayCount) * (index - currentIndex), - radius + ((radius * 2) / displayCount) * (index - currentIndex), - ], - extrapolate: 'extend', - }) - .interpolate({ - inputRange: [-radius, radius], - outputRange: [-Math.PI / 2, Math.PI / 2], - extrapolate: 'clamp', - }) - ); + return displayValues && displayValues.length > 0 + ? displayValues.map((_, index) => + translateY + .interpolate({ + inputRange: [-radius, radius], + outputRange: [ + -radius + + ((radius * 2) / displayCount) * (index - currentIndex), + radius + ((radius * 2) / displayCount) * (index - currentIndex), + ], + extrapolate: 'extend', + }) + .interpolate({ + inputRange: [-radius, radius], + outputRange: [-Math.PI / 2, Math.PI / 2], + extrapolate: 'clamp', + }) + ) + : []; }, [displayValues, radius, value, displayCount, translateY]); return ( diff --git a/src/utils.ts b/src/utils.ts index 04b194b..85248a8 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -126,62 +126,63 @@ export default class utils { : 35 - monthDaysOffset : 0; - const prevDays = this.displayFullDays - ? prevDaysArray.map((day) => { - const thisDay = date.add(-1, 'month').date(day); - let disabled = false; - if (this.minimumDate) { - disabled = thisDay < this.getDate(this.minimumDate); - } - if (this.maximumDate && !disabled) { - disabled = thisDay > this.getDate(this.maximumDate); - } - return { - text: day.toString(), - day, - date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), - disabled, - isCurrentMonth: false, - }; - }) - : new Array(dayOfMonth); - - return [ - ...prevDays, - ...Array.from({ length: currentMonthDays }, (_, i) => { - const thisDay = date.date(i + 1); - let disabled = false; - if (this.minimumDate) { - disabled = thisDay < this.getDate(this.minimumDate); - } - if (this.maximumDate && !disabled) { - disabled = thisDay > this.getDate(this.maximumDate); - } - return { - text: (i + 1).toString(), - day: i + 1, - date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), - disabled, - isCurrentMonth: true, - }; - }), - ...Array.from({ length: nextMonthDays }, (_, i) => { - const thisDay = date.add(1, 'month').date(i + 1); - let disabled = false; - if (this.minimumDate) { - disabled = thisDay < this.getDate(this.minimumDate); - } - if (this.maximumDate && !disabled) { - disabled = thisDay > this.getDate(this.maximumDate); - } - return { - text: (i + 1).toString(), - day: i + 1, - date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), - disabled, - isCurrentMonth: false, - }; - }), - ]; + const prevDays = + this.displayFullDays && prevDaysArray && prevDaysArray.length > 0 + ? prevDaysArray.map((day) => { + const thisDay = date.add(-1, 'month').date(day); + let disabled = false; + if (this.minimumDate) { + disabled = thisDay < this.getDate(this.minimumDate); + } + if (this.maximumDate && !disabled) { + disabled = thisDay > this.getDate(this.maximumDate); + } + return { + text: day.toString(), + day, + date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), + disabled, + isCurrentMonth: false, + }; + }) + : new Array(dayOfMonth); + + const currentDays = Array.from({ length: currentMonthDays }, (_, i) => { + const thisDay = date.date(i + 1); + let disabled = false; + if (this.minimumDate) { + disabled = thisDay < this.getDate(this.minimumDate); + } + if (this.maximumDate && !disabled) { + disabled = thisDay > this.getDate(this.maximumDate); + } + return { + text: (i + 1).toString(), + day: i + 1, + date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), + disabled, + isCurrentMonth: true, + }; + }); + + const nextDays = Array.from({ length: nextMonthDays }, (_, i) => { + const thisDay = date.add(1, 'month').date(i + 1); + let disabled = false; + if (this.minimumDate) { + disabled = thisDay < this.getDate(this.minimumDate); + } + if (this.maximumDate && !disabled) { + disabled = thisDay > this.getDate(this.maximumDate); + } + return { + text: (i + 1).toString(), + day: i + 1, + date: this.getFormatedDate(thisDay, 'YYYY/MM/DD'), + disabled, + isCurrentMonth: false, + }; + }); + + return [...prevDays, ...currentDays, ...nextDays]; }; }