react-native-dates-picker 0.0.9 → 0.1.1

package/src/DateTimePicker.tsx

@@ -1,4 +1,10 @@
-import { memo, useCallback, useEffect, useReducer } from 'react';
+import React, { memo, useCallback, useEffect, useReducer } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import localeData from 'dayjs/plugin/localeData';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/zh-cn';
 import {
   getFormatted,
   getDate,
@@ -21,12 +27,6 @@ import type {
   MultiChange,
 } from './types';
 import Calendar from './components/Calendar';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import localeData from 'dayjs/plugin/localeData';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import 'dayjs/locale/zh-cn';
 
 dayjs.extend(utc);
 dayjs.extend(localeData);
@@ -73,13 +73,12 @@ export interface DatePickerWheelProps
   onChange?: SingleChange;
 }
 
-const DateTimePicker = (
-  props:
-    | DatePickerSingleProps
-    | DatePickerRangeProps
-    | DatePickerMultipleProps
-    | DatePickerWheelProps
-) => {
+const DateTimePicker: React.FC<
+  | DatePickerSingleProps
+  | DatePickerRangeProps
+  | DatePickerMultipleProps
+  | DatePickerWheelProps
+> = (props) => {
   const {
     mode = 'single',
     locale = 'zh-cn',
@@ -121,6 +120,7 @@ const DateTimePicker = (
     currentDate = dayjs(dates[0]);
 
   if (minDate && currentDate.isBefore(minDate)) currentDate = dayjs(minDate);
+  if (maxDate && currentDate.isAfter(maxDate)) currentDate = dayjs(maxDate);
 
   let currentYear = currentDate.year();
 
@@ -201,7 +201,12 @@ const DateTimePicker = (
         type: CalendarActionKind.CHANGE_SELECTED_DATE,
         payload: { date },
       });
-  }, [mode, date, startDate, endDate, dates, minDate, timePicker]);
+
+    dispatch({
+      type: CalendarActionKind.CHANGE_CURRENT_DATE,
+      payload: currentDate,
+    });
+  }, [mode, date, startDate, endDate, dates, minDate, timePicker, currentDate]);
 
   const setCalendarView = useCallback((view: CalendarViews) => {
     dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });

package/src/components/Calendar.tsx

@@ -1,15 +1,15 @@
-import { ReactNode, memo } from 'react';
+import React, { ReactNode, memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
-import type { CalendarViews } from '../enums';
-import type { HeaderProps, CalendarThemeProps } from '../types';
+import { CONTAINER_HEIGHT } from 'src/enums';
+import { useCalendarContext } from 'src/CalendarContext';
+import type { CalendarViews } from 'src/enums';
+import type { HeaderProps, CalendarThemeProps } from 'src/types';
 import Header from './Header';
 import YearSelector from './YearSelector';
 import MonthSelector from './MonthSelector';
 import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
 import DatePicker from './DatePicker';
-import { CALENDAR_HEIGHT } from '../enums';
 
 const CalendarView: Record<CalendarViews, ReactNode> = {
   year: <YearSelector />,
@@ -23,12 +23,12 @@ interface PropTypes extends HeaderProps {
   containerStyle?: CalendarThemeProps['containerStyle'];
 }
 
-const Calendar = ({
+const Calendar: React.FC<PropTypes> = ({
   buttonPrevIcon,
   buttonNextIcon,
   height,
   containerStyle,
-}: PropTypes) => {
+}) => {
   const { calendarView, mode } = useCalendarContext();
 
   const styles = StyleSheet.create({
@@ -36,7 +36,7 @@ const Calendar = ({
       width: '100%',
     },
     calendarContainer: {
-      height: height || CALENDAR_HEIGHT,
+      height: height || CONTAINER_HEIGHT,
       alignItems: 'center',
     },
   });

package/src/components/DatePicker.tsx

@@ -1,23 +1,24 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
-import Wheel from './WheelPicker/Wheel';
-import { CALENDAR_HEIGHT } from '../enums';
+import { useCalendarContext } from 'src/CalendarContext';
+import { CONTAINER_HEIGHT } from 'src/enums';
 import {
   getFormatted,
   getParsedDate,
   getDaysNumInMonth,
   getTimeRange,
   getDate,
-} from '../utils';
+} from 'src/utils';
+import Wheel from './WheelPicker/Wheel';
 
-function createNumberList(start: number, end: number) {
-  return new Array(end - start)
-    .fill(0)
-    .map((_, index) => String(index + 1 + start).padStart(2, '0'));
+function createNumberList(start: number, end: number, first: number = 1) {
+  return new Array(end - start).fill(0).map((_, index) => ({
+    value: index + first + start,
+    text: String(index + first + start).padStart(2, '0'),
+  }));
 }
 
-const DatePicker = () => {
+const DatePicker: React.FC = () => {
   const {
     columns,
     currentDate,
@@ -41,6 +42,7 @@ const DatePicker = () => {
 
   const { year: startYear, month: startMonth } = getParsedDate(minDate);
   const { year: endYear, month: endMonth } = getParsedDate(maxDate);
+  const { hour, minute, second } = getParsedDate(currentDate);
   const years = createNumberList(startYear - 1, endYear);
   const months = useMemo(
     () =>
@@ -57,114 +59,82 @@ const DatePicker = () => {
   );
   const hours = useMemo(
     () =>
-      createNumberList(...getTimeRange(currentDate, minDate, maxDate, 'hour')),
+      createNumberList(
+        ...getTimeRange(currentDate, minDate, maxDate, 'hour'),
+        0
+      ),
     [currentDate, maxDate, minDate]
   );
   const minutes = useMemo(
     () =>
       createNumberList(
-        ...getTimeRange(currentDate, minDate, maxDate, 'minute')
+        ...getTimeRange(currentDate, minDate, maxDate, 'minute'),
+        0
       ),
     [currentDate, maxDate, minDate]
   );
   const seconds = useMemo(
     () =>
       createNumberList(
-        ...getTimeRange(currentDate, minDate, maxDate, 'second')
+        ...getTimeRange(currentDate, minDate, maxDate, 'second'),
+        0
       ),
     [currentDate, maxDate, minDate]
   );
 
   const handleChangeDate = useCallback(
-    (
-      value: number,
-      data: Array<string>,
-      type: 'date' | 'hour' | 'minute' | 'second'
-    ) => {
-      const newDate = getDate(currentDate)[type](Number(data[value]));
+    (value: number, type: 'date' | 'hour' | 'minute' | 'second') => {
+      const newDate = getDate(currentDate).set(type, value);
       onSelectDate(getFormatted(newDate));
     },
     [currentDate, onSelectDate]
   );
 
-  const createIndicatorStyle = useCallback(
-    (index: number) => {
-      const len = columns?.length || 0;
-      if (!index && len > 1)
-        return { borderTopRightRadius: 0, borderBottomRightRadius: 0 };
-      else if (index === len - 1 && len > 1)
-        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
-      else if (len > 2) return { borderRadius: 0 };
-      else return undefined;
-    },
-    [columns]
-  );
-
   return (
     <View style={styles.container}>
       <View style={styles.datePickerContainer}>
-        {columns?.map((item, index) => (
+        {columns?.map((item) => (
           <View style={styles.wheelContainer} key={item}>
             {item === 'year' && (
               <Wheel
-                value={years.indexOf(String(year))}
+                value={year}
                 items={years}
-                key={years.length}
-                setValue={(value) => onSelectYear(Number(years[value]))}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => onSelectYear(value)}
               />
             )}
             {item === 'month' && (
               <Wheel
-                value={months.indexOf(String(month + 1).padStart(2, '0'))}
+                value={month + 1}
                 items={months}
-                key={months.length}
-                setValue={(value) => onSelectMonth(Number(months[value]) - 1)}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => onSelectMonth(value - 1)}
               />
             )}
             {item === 'day' && (
               <Wheel
-                value={days.indexOf(
-                  String(getDate(currentDate).date()).padStart(2, '0')
-                )}
-                key={days.length}
+                value={getDate(currentDate).date()}
                 items={days}
-                setValue={(value) => handleChangeDate(value, days, 'date')}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => handleChangeDate(value, 'date')}
               />
             )}
             {item === 'hour' && (
               <Wheel
-                value={hours.indexOf(
-                  String(getDate(currentDate).hour()).padStart(2, '0')
-                )}
-                key={hours.length}
+                value={hour}
                 items={hours}
-                setValue={(value) => handleChangeDate(value, hours, 'hour')}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => handleChangeDate(value, 'hour')}
               />
             )}
             {item === 'minute' && (
               <Wheel
-                value={minutes.indexOf(
-                  String(getDate(currentDate).minute()).padStart(2, '0')
-                )}
-                key={minutes.length}
+                value={minute}
                 items={minutes}
-                setValue={(value) => handleChangeDate(value, minutes, 'minute')}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => handleChangeDate(value, 'minute')}
               />
             )}
             {item === 'second' && (
               <Wheel
-                value={seconds.indexOf(
-                  String(getDate(currentDate).second()).padStart(2, '0')
-                )}
-                key={seconds.length}
+                value={second}
                 items={seconds}
-                setValue={(value) => handleChangeDate(value, seconds, 'second')}
-                indicatorStyle={createIndicatorStyle(index)}
+                setValue={(value) => handleChangeDate(value, 'second')}
               />
             )}
           </View>
@@ -179,16 +149,18 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
   },
   wheelContainer: {
     flex: 1,
   },
   datePickerContainer: {
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: 16,
-    height: CALENDAR_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
   },
 });
 

package/src/components/Day.tsx

@@ -1,9 +1,9 @@
-import { memo, useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
-import { CalendarThemeProps, IDayObject } from '../types';
-import { CALENDAR_HEIGHT } from '../enums';
-import { addColorAlpha } from '../utils';
 import { isEqual } from 'lodash';
+import { CalendarThemeProps, IDayObject } from 'src/types';
+import { CONTAINER_HEIGHT } from 'src/enums';
+import { addColorAlpha } from 'src/utils';
 
 export const daySize = 46;
 
@@ -16,13 +16,13 @@ interface Props extends Omit<IDayObject, 'day'> {
 }
 
 function EmptyDayPure({ height }: { height?: number }) {
-  const style = styles(height || CALENDAR_HEIGHT);
+  const style = styles(height || CONTAINER_HEIGHT);
   return <View style={style.dayCell} />;
 }
 
 export const EmptyDay = memo(EmptyDayPure);
 
-function Day({
+const Day: React.FC<Props> = ({
   date,
   text,
   disabled,
@@ -35,7 +35,7 @@ function Day({
   onSelectDate,
   theme,
   height,
-}: Props) {
+}) => {
   const onPress = useCallback(() => {
     onSelectDate(date);
   }, [onSelectDate, date]);
@@ -83,7 +83,7 @@ function Day({
   const rangeRootBackground =
     selectedRangeBackgroundColor ?? addColorAlpha(selectedItemColor, 0.15);
 
-  const style = styles(height || CALENDAR_HEIGHT);
+  const style = styles(height || CONTAINER_HEIGHT);
 
   return (
     <View style={style.dayCell}>
@@ -138,7 +138,7 @@ function Day({
       </Pressable>
     </View>
   );
-}
+};
 
 const styles = (height: number) =>
   StyleSheet.create({

package/src/components/DaySelector.tsx

@@ -1,8 +1,7 @@
-import { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import dayjs from 'dayjs';
-import { useCalendarContext } from '../CalendarContext';
-import Day, { EmptyDay } from './Day';
+import { useCalendarContext } from 'src/CalendarContext';
 import {
   getParsedDate,
   getMonthDays,
@@ -12,9 +11,10 @@ import {
   isDateBetween,
   getDate,
   getFormatted,
-} from '../utils';
+} from 'src/utils';
+import Day, { EmptyDay } from './Day';
 
-const DaySelector = () => {
+const DaySelector: React.FC = () => {
   const {
     mode,
     date,
@@ -117,7 +117,7 @@ const DaySelector = () => {
               if (inRange && !leftCrop && !rightCrop) isSelected = false;
             }
           } else if (mode === 'single')
-            isSelected = areDatesOnSameDay(day.date, currentDate);
+            isSelected = areDatesOnSameDay(day.date, date);
 
           return {
             ...day,

package/src/components/Header.tsx

@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet, Image } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
 import dayjs from 'dayjs';
-import type { HeaderProps } from '../types';
-import { getDateYear, getYearRange, YEAR_PAGE_SIZE } from '../utils';
+import { useCalendarContext } from 'src/CalendarContext';
+import type { HeaderProps } from 'src/types';
+import { getDateYear, getYearRange, YEAR_PAGE_SIZE } from 'src/utils';
 
-const Header = ({ buttonPrevIcon, buttonNextIcon }: HeaderProps) => {
+const Header: React.FC<HeaderProps> = ({ buttonPrevIcon, buttonNextIcon }) => {
   const {
     mode,
     date,

package/src/components/MonthSelector.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Text, View, Pressable, StyleSheet } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
-import { getParsedDate, getMonths } from '../utils';
+import { useCalendarContext } from 'src/CalendarContext';
+import { getParsedDate, getMonths } from 'src/utils';
 
-const MonthSelector = () => {
+const MonthSelector: React.FC = () => {
   const { currentDate, onSelectMonth, theme } = useCalendarContext();
   const { month } = getParsedDate(currentDate);
 

package/src/components/TimeSelector.tsx

@@ -1,23 +1,22 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
+import { useCalendarContext } from 'src/CalendarContext';
+import { CONTAINER_HEIGHT } from 'src/enums';
+import { getParsedDate, getDate, getFormatted } from 'src/utils';
 import Wheel from './WheelPicker/Wheel';
-import { CALENDAR_HEIGHT } from '../enums';
-import { getParsedDate, getDate, getFormatted } from '../utils';
 
 function createNumberList(num: number) {
-  return new Array(num)
-    .fill(0)
-    .map((_, index) =>
-      index < 10 ? `0${index.toString()}` : index.toString()
-    );
+  return new Array(num).fill(0).map((_, index) => ({
+    text: index.toString().padStart(2, '0'),
+    value: index,
+  }));
 }
 
 const hours = createNumberList(24);
 const minutes = createNumberList(60);
 const seconds = createNumberList(60);
 
-const TimeSelector = () => {
+const TimeSelector: React.FC = () => {
   const { date, onSelectDate, theme } = useCalendarContext();
   const { hour, minute, second } = getParsedDate(date);
 
@@ -87,8 +86,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '80%',
-    height: CALENDAR_HEIGHT / 2,
+    width: CONTAINER_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
   },
   timePickerText: {
     fontSize: 24,

package/src/components/WheelPicker/Wheel.tsx

@@ -1,18 +1,18 @@
-import { Platform, type ViewStyle } from 'react-native';
+import React, { memo } from 'react';
+import { Platform } from 'react-native';
 import WheelNative from './WheelNative';
 import WheelWeb from './WheelWeb';
+import { PickerOption } from 'src/types';
 
 interface WheelProps {
   value: number;
   setValue?: (value: number) => void;
-  items: string[];
-  indicatorStyle?: ViewStyle;
+  items: Array<PickerOption>;
 }
 
-export default function Wheel(props: WheelProps) {
-  return Platform.OS === 'web' ? (
-    <WheelWeb {...props} />
-  ) : (
-    <WheelNative {...props} />
-  );
-}
+const Wheel: React.FC<WheelProps> = (props) => {
+  const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
+  return <Component {...props} />;
+};
+
+export default memo(Wheel);

package/src/components/WheelPicker/WheelNative.tsx

@@ -1,61 +1,27 @@
-import { StyleSheet, Platform, type ViewStyle } from 'react-native';
-import WheelPicker from 'react-native-wheely';
-import { useCalendarContext } from '../../CalendarContext';
+import React, { memo } from 'react';
+import WheelPicker from './WheelNativePicker';
+import { PickerOption } from 'src/types';
 
 interface WheelProps {
-  value: number;
-  setValue?: (value: number) => void;
-  items: string[];
-  indicatorStyle?: ViewStyle;
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
 }
 
-export default function WheelNative({
+const WheelNative: React.FC<WheelProps> = ({
   value,
   setValue = () => {},
   items,
-  indicatorStyle,
-}: WheelProps) {
-  const { theme } = useCalendarContext();
-
+}) => {
   return (
     <WheelPicker
-      selectedIndex={value < 0 ? 0 : value}
+      value={value}
       options={items}
       onChange={setValue}
-      containerStyle={{
-        ...styles.container,
-        ...theme?.wheelPickerContainerStyle,
-      }}
-      itemStyle={theme?.wheelPickerItemStyle}
-      itemTextStyle={{
-        ...styles.wheelPickerText,
-        ...theme?.wheelPickerTextStyle,
-      }}
-      selectedIndicatorStyle={{
-        ...styles.wheelSelectedIndicator,
-        ...indicatorStyle,
-        ...theme?.wheelPickerIndicatorStyle,
-      }}
-      itemHeight={45}
-      decelerationRate={theme?.wheelPickerDecelerationRate}
+      itemHeight={44}
+      decelerationRate="fast"
     />
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    ...Platform.select({
-      web: {
-        userSelect: 'none',
-      },
-    }),
-  },
-  wheelSelectedIndicator: {
-    borderRadius: 10,
-  },
-  wheelPickerText: {
-    fontSize: 18,
-    fontWeight: '500',
-  },
-});
+export default memo(WheelNative);

package/src/components/WheelPicker/WheelNativePicker/index.ts

@@ -0,0 +1,3 @@
+import WheelPicker from './wheel-picker';
+
+export default WheelPicker;