react-native-dates-picker 0.1.3 → 0.1.5

package/src/components/Day.tsx

@@ -1,9 +1,8 @@
 import React, { memo, useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
-import { isEqual } from 'lodash';
 import { CalendarThemeProps, IDayObject } from '../types';
 import { CONTAINER_HEIGHT } from '../enums';
-import { addColorAlpha } from '../utils';
+import { addColorAlpha, isEqual } from '../utils';
 
 export const daySize = 46;
 
@@ -97,7 +96,6 @@ const Day: React.FC<Props> = ({
         <View
           style={[
             style.rangeRoot,
-            // eslint-disable-next-line react-native/no-inline-styles
             {
               left: '50%',
               backgroundColor: rangeRootBackground,
@@ -110,7 +108,6 @@ const Day: React.FC<Props> = ({
         <View
           style={[
             style.rangeRoot,
-            // eslint-disable-next-line react-native/no-inline-styles
             {
               right: '50%',
               backgroundColor: rangeRootBackground,

package/src/components/TimeSelector.tsx

@@ -35,7 +35,7 @@ const TimeSelector: React.FC = () => {
           <Wheel
             value={hour}
             items={hours}
-            setValue={(value) => handleChange(value, 'hour')}
+            onChange={(value) => handleChange(value, 'hour')}
           />
         </View>
         <Text
@@ -50,7 +50,7 @@ const TimeSelector: React.FC = () => {
           <Wheel
             value={minute}
             items={minutes}
-            setValue={(value) => handleChange(value, 'minute')}
+            onChange={(value) => handleChange(value, 'minute')}
           />
         </View>
         <Text
@@ -65,7 +65,7 @@ const TimeSelector: React.FC = () => {
           <Wheel
             value={second}
             items={seconds}
-            setValue={(value) => handleChange(value, 'second')}
+            onChange={(value) => handleChange(value, 'second')}
           />
         </View>
       </View>

package/src/components/WheelPicker/Wheel.tsx

@@ -6,7 +6,7 @@ import { PickerOption } from '../../types';
 
 interface WheelProps {
   value: number;
-  setValue?: (value: number) => void;
+  onChange?: (value: number) => void;
   items: Array<PickerOption>;
 }
 

package/src/components/WheelPicker/WheelNative.tsx

@@ -4,20 +4,20 @@ import { PickerOption } from '../../types';
 
 interface WheelProps {
   value: number | string;
-  setValue?: (value: any) => void;
+  onChange?: (value: any) => void;
   items: PickerOption[];
 }
 
 const WheelNative: React.FC<WheelProps> = ({
   value,
-  setValue = () => {},
+  onChange = () => {},
   items,
 }) => {
   return (
     <WheelPicker
       value={value}
       options={items}
-      onChange={setValue}
+      onChange={onChange}
       itemHeight={44}
       decelerationRate="fast"
     />

package/src/components/WheelPicker/WheelNativePicker/wheel-picker-item.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Animated, Text, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../../../CalendarContext';
 import { PickerOption } from '../../../types';
@@ -25,90 +25,81 @@ const WheelPickerItem: React.FC<ItemProps> = ({
   scaleFunction,
 }) => {
   const { theme } = useCalendarContext();
-  const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
+  const relativeScrollIndex = useMemo(
+    () => Animated.subtract(index, currentScrollIndex),
+    [index, currentScrollIndex]
+  );
 
-  const translateY = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        let y =
-          (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
-        for (let j = 1; j < i; j++) {
-          y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
-        }
-        range.unshift(y);
-        range.push(-y);
+  const interpolInputRange = useMemo(() => {
+    const range = [0];
+    for (let i = 1; i <= visibleRest + 1; i++) {
+      range.unshift(-i);
+      range.push(i);
+    }
+    return range;
+  }, [visibleRest]);
+
+  const translateYOutputRange = useMemo(() => {
+    const range = [0];
+    for (let i = 1; i <= visibleRest + 1; i++) {
+      let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
+      for (let j = 1; j < i; j++) {
+        y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
       }
-      return range;
-    })(),
+      range.unshift(y);
+      range.push(-y);
+    }
+    return range;
+  }, [height, visibleRest, rotationFunction]);
+
+  const opacityOutputRange = useMemo(() => {
+    const range = [1];
+    for (let x = 1; x <= visibleRest + 1; x++) {
+      const val = opacityFunction(x);
+      range.unshift(val);
+      range.push(val);
+    }
+    return range;
+  }, [visibleRest, opacityFunction]);
+
+  const scaleOutputRange = useMemo(() => {
+    const range = [1];
+    for (let x = 1; x <= visibleRest + 1; x++) {
+      const val = scaleFunction(x);
+      range.unshift(val);
+      range.push(val);
+    }
+    return range;
+  }, [visibleRest, scaleFunction]);
+
+  const rotateXOutputRange = useMemo(() => {
+    const range = ['0deg'];
+    for (let x = 1; x <= visibleRest + 1; x++) {
+      const deg = `${rotationFunction(x)}deg`;
+      range.unshift(deg);
+      range.push(deg);
+    }
+    return range;
+  }, [visibleRest, rotationFunction]);
+
+  const translateY = relativeScrollIndex.interpolate({
+    inputRange: interpolInputRange,
+    outputRange: translateYOutputRange,
   });
 
   const opacity = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [1];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = opacityFunction(x);
-        range.unshift(y);
-        range.push(y);
-      }
-      return range;
-    })(),
+    inputRange: interpolInputRange,
+    outputRange: opacityOutputRange,
   });
 
   const scale = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [1.0];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = scaleFunction(x);
-        range.unshift(y);
-        range.push(y);
-      }
-      return range;
-    })(),
+    inputRange: interpolInputRange,
+    outputRange: scaleOutputRange,
   });
 
   const rotateX = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = ['0deg'];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = rotationFunction(x);
-        range.unshift(`${y}deg`);
-        range.push(`${y}deg`);
-      }
-      return range;
-    })(),
+    inputRange: interpolInputRange,
+    outputRange: rotateXOutputRange,
   });
 
   return (

package/src/components/WheelPicker/WheelNativePicker/wheel-picker.tsx

@@ -5,7 +5,6 @@ import {
   Animated,
   View,
   ViewProps,
-  FlatListProps,
   FlatList,
   Platform,
   StyleSheet,
@@ -25,7 +24,6 @@ interface Props {
   opacityFunction?: (x: number) => number;
   visibleRest?: number;
   decelerationRate?: 'normal' | 'fast' | number;
-  flatListProps?: Omit<FlatListProps<string | null>, 'data' | 'renderItem'>;
 }
 
 const WheelPicker: React.FC<Props> = ({
@@ -39,11 +37,10 @@ const WheelPicker: React.FC<Props> = ({
   visibleRest = 2,
   decelerationRate = 'normal',
   containerProps = {},
-  flatListProps = {},
 }) => {
   const { theme } = useCalendarContext();
-  const momentumStarted = useRef(false);
   const selectedIndex = options.findIndex((item) => item.value === value);
+  const timerRef = useRef<NodeJS.Timeout>();
 
   const flatListRef = useRef<FlatList>(null);
   const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
@@ -69,54 +66,35 @@ const WheelPicker: React.FC<Props> = ({
   );
 
   const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
     const offsetY = Math.min(
       itemHeight * (options.length - 1),
       Math.max(event.nativeEvent.contentOffset.y, 0)
     );
-
     let index = Math.floor(offsetY / itemHeight);
     const remainder = offsetY % itemHeight;
     if (remainder > itemHeight / 2) {
       index++;
     }
-
+    const value = options[index]?.value || 0;
     if (index !== selectedIndex) {
-      onChange(options[index]?.value || 0);
+      timerRef.current = setTimeout(() => {
+        onChange(value);
+        clearTimeout(timerRef.current!);
+        timerRef.current = undefined;
+      }, 50);
     }
   };
 
-  const handleMomentumScrollBegin = () => {
-    momentumStarted.current = true;
-  };
-
-  const handleMomentumScrollEnd = (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => {
-    momentumStarted.current = false;
-    handleScrollEnd(event);
-  };
-
-  const handleScrollEndDrag = (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => {
-    // Capture the offset value immediately
-    const offsetY = event.nativeEvent.contentOffset?.y;
-
-    // We'll start a short timer to see if momentum scroll begins
-    setTimeout(() => {
-      // If momentum scroll hasn't started within the timeout,
-      // then it was a slow scroll that won't trigger momentum
-      if (!momentumStarted.current && offsetY !== undefined) {
-        // Create a synthetic event with just the data we need
-        const syntheticEvent = {
-          nativeEvent: {
-            contentOffset: { y: offsetY },
-          },
-        };
-        handleScrollEnd(syntheticEvent as any);
-      }
-    }, 50);
-  };
+  const scrollEvent = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+        useNativeDriver: true,
+        listener: handleScrollEnd,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   useEffect(() => {
     if (selectedIndex < 0 || selectedIndex >= options.length) {
@@ -159,19 +137,14 @@ const WheelPicker: React.FC<Props> = ({
         ]}
       />
       <Animated.FlatList
-        {...flatListProps}
         ref={flatListRef}
         nestedScrollEnabled
         style={styles.scrollView}
         showsVerticalScrollIndicator={false}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
-          { useNativeDriver: true }
-        )}
-        onScrollEndDrag={handleScrollEndDrag}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        onMomentumScrollEnd={handleMomentumScrollEnd}
+        scrollEventThrottle={16}
+        onScroll={scrollEvent}
         snapToOffsets={offsets}
+        onMomentumScrollEnd={handleScrollEnd}
         decelerationRate={decelerationRate}
         initialScrollIndex={selectedIndex}
         getItemLayout={(_, index) => ({
@@ -181,7 +154,7 @@ const WheelPicker: React.FC<Props> = ({
         })}
         data={paddedOptions}
         keyExtractor={(item, index) =>
-          item ? `${item.value}-${item.text}-${index}` : `null-${index}`
+          item ? `${item.value}-${item.text}-${index}` : `-${index}`
         }
         renderItem={({ item: option, index }) => (
           <WheelPickerItem

package/src/components/WheelPicker/WheelWeb.tsx

@@ -15,7 +15,7 @@ import { sin } from './animated-math';
 
 interface WheelProps {
   value: number | string;
-  setValue?: (value: any) => void;
+  onChange?: (value: any) => void;
   items: PickerOption[];
 }
 
@@ -23,7 +23,7 @@ const ITEM_HEIGHT = 44;
 
 const WheelWeb: React.FC<WheelProps> = ({
   value,
-  setValue = () => {},
+  onChange = () => {},
   items,
 }) => {
   const { theme } = useCalendarContext();
@@ -65,15 +65,15 @@ const WheelWeb: React.FC<WheelProps> = ({
         if (newValue?.value === value) {
           translateY.setOffset(0);
           translateY.setValue(0);
-        } else if (newValue?.value) setValue(newValue.value);
-        else if (items[0]?.value) setValue(items[0].value);
+        } else if (newValue?.value) onChange(newValue.value);
+        else if (items[0]?.value) onChange(items[0].value);
       },
     });
   }, [
     circular,
     displayCount,
     radius,
-    setValue,
+    onChange,
     value,
     valueIndex,
     items,
@@ -141,7 +141,6 @@ const WheelWeb: React.FC<WheelProps> = ({
         return (
           <Animated.View
             key={`${displayValue?.text}-${index}`}
-            // eslint-disable-next-line react-native/no-inline-styles
             style={{
               position: 'absolute',
               height: ITEM_HEIGHT - 10,
@@ -203,7 +202,7 @@ const customComparator = (
 ) => {
   const areEqual =
     prev.value === next.value &&
-    prev.setValue === next.setValue &&
+    prev.onChange === next.onChange &&
     isEqual(prev.items, next.items);
 
   return areEqual;

package/src/components/WheelSelector.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useCalendarContext } from '../CalendarContext';
+import {
+  getFormatted,
+  getParsedDate,
+  getDaysNumInMonth,
+  getTimeRange,
+  getDate,
+} from '../utils';
+import Wheel from './WheelPicker/Wheel';
+import { OrderedDateParts } from '../types';
+
+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'),
+  }));
+}
+
+interface WheelSelectorProps {
+  type: OrderedDateParts;
+}
+
+const WheelSelector: React.FC<WheelSelectorProps> = ({ type }) => {
+  const {
+    date,
+    currentDate,
+    onSelectYear,
+    onSelectMonth,
+    onSelectDate,
+    minDate = '1900-01-01',
+    maxDate = '2099-12-31',
+  } = useCalendarContext();
+  const latestValues = useRef({ date, currentDate });
+  const { year, month } = useMemo(() => {
+    const cd = getDate(currentDate);
+    if (cd.isAfter(getDate(maxDate))) return getParsedDate(maxDate);
+    if (cd.isBefore(getDate(minDate))) return getParsedDate(minDate);
+    return getParsedDate(cd);
+  }, [currentDate, maxDate, minDate]);
+
+  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(
+    () =>
+      createNumberList(
+        startYear === year ? startMonth : 0,
+        endYear === year ? endMonth + 1 : 12
+      ),
+    [endMonth, endYear, startMonth, startYear, year]
+  );
+
+  const days = useMemo(
+    () => getDaysNumInMonth(year, month + 1, minDate, maxDate),
+    [year, month, minDate, maxDate]
+  );
+  const hours = useMemo(
+    () =>
+      createNumberList(
+        ...getTimeRange(currentDate, minDate, maxDate, 'hour'),
+        0
+      ),
+    [currentDate, maxDate, minDate]
+  );
+  const minutes = useMemo(
+    () =>
+      createNumberList(
+        ...getTimeRange(currentDate, minDate, maxDate, 'minute'),
+        0
+      ),
+    [currentDate, maxDate, minDate]
+  );
+  const seconds = useMemo(
+    () =>
+      createNumberList(
+        ...getTimeRange(currentDate, minDate, maxDate, 'second'),
+        0
+      ),
+    [currentDate, maxDate, minDate]
+  );
+
+  const handleChangeDate = useCallback(
+    (value: number, type: 'date' | 'hour' | 'minute' | 'second') => {
+      const { date: latestDate, currentDate: latestCurrentDate } =
+        latestValues.current;
+      const newDate = getDate(latestDate || latestCurrentDate)[type](value);
+      onSelectDate(getFormatted(newDate));
+    },
+    [onSelectDate]
+  );
+
+  const renderItem = () => {
+    if (type === 'year')
+      return (
+        <Wheel
+          value={year}
+          items={years}
+          key="year"
+          onChange={(value) => onSelectYear(value)}
+        />
+      );
+    if (type === 'month')
+      return (
+        <Wheel
+          key="month"
+          value={month + 1}
+          items={months}
+          onChange={(value) => onSelectMonth(value - 1)}
+        />
+      );
+    if (type === 'day')
+      return (
+        <Wheel
+          key="day"
+          value={getDate(currentDate).date()}
+          items={days}
+          onChange={(value) => handleChangeDate(value, 'date')}
+        />
+      );
+    if (type === 'hour')
+      return (
+        <Wheel
+          key="hour"
+          value={hour}
+          items={hours}
+          onChange={(value) => handleChangeDate(value, 'hour')}
+        />
+      );
+    if (type === 'minute')
+      return (
+        <Wheel
+          key="minute"
+          value={minute}
+          items={minutes}
+          onChange={(value) => handleChangeDate(value, 'minute')}
+        />
+      );
+    if (type === 'second')
+      return (
+        <Wheel
+          key="second"
+          value={second}
+          items={seconds}
+          onChange={(value) => handleChangeDate(value, 'second')}
+        />
+      );
+    return null;
+  };
+
+  useEffect(() => {
+    latestValues.current = { date, currentDate };
+  }, [date, currentDate]);
+
+  return (
+    <View style={styles.wheelContainer} key={'date-' + type}>
+      {renderItem()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wheelContainer: {
+    flex: 1,
+  },
+});
+
+export default WheelSelector;

package/src/types.ts

@@ -13,7 +13,7 @@ export type LocalState = {
   date: DateType;
   startDate: DateType;
   endDate: DateType;
-  dates: DateType[];
+  dates?: DateType[];
   calendarView: CalendarViews;
   currentDate: DateType; // used for latest state of calendar based on Month and Year
   currentYear: number;

package/src/utils.ts

@@ -300,3 +300,80 @@ export function addColorAlpha(color: string | undefined, opacity: number) {
 
   return color + opacityHex;
 }
+
+/**
+
+深度比较两个值是否相等
+@param {any} value
+@param {any} other
+@returns {boolean}
+*/
+export const isEqual = (value: any, other: any) => {
+  // 如果是同一个引用
+  if (value === other) {
+    // 排除 0 和 -0 的特殊情况
+    return value !== 0 || 1 / value === 1 / other;
+  }
+  // 如果有一个是 null/undefined，或者类型不同
+  if (value == null || other == null || typeof value !== typeof other) {
+    // 同时要特殊处理 NaN
+    return Number.isNaN(value) && Number.isNaN(other);
+  }
+
+  // 如果是对象或函数，则继续
+  if (typeof value === 'object' || typeof value === 'function') {
+    // Date
+    if (value instanceof Date && other instanceof Date) {
+      return value.getTime() === other.getTime();
+    }
+    // RegExp
+    if (value instanceof RegExp && other instanceof RegExp) {
+      return value.source === other.source && value.flags === other.flags;
+    }
+    // Array 或者普通对象
+    if (
+      (Array.isArray(value) && Array.isArray(other)) ||
+      (Object.prototype.toString.call(value) === '[object Object]' &&
+        Object.prototype.toString.call(other) === '[object Object]')
+    ) {
+      // 先比较键的数量是否一致
+      const valueKeys = Object.keys(value);
+      const otherKeys = Object.keys(other);
+      if (valueKeys.length !== otherKeys.length) {
+        return false;
+      }
+      // 递归比较每个键对应的值
+      for (const key of valueKeys) {
+        if (
+          !Object.prototype.hasOwnProperty.call(other, key) ||
+          !isEqual(value[key], other[key])
+        ) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+
+  // 如果以上情况都不满足，则直接比较
+  return false;
+};
+
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number = 200
+): T {
+  let inThrottle = false;
+  let lastResult: any;
+
+  return ((...args: Parameters<T>) => {
+    if (!inThrottle) {
+      lastResult = func(...args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+    return lastResult;
+  }) as T;
+}