react-native-dates-picker 0.0.8 → 0.1.0

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

@@ -0,0 +1,214 @@
+import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
+import {
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  Animated,
+  ViewStyle,
+  View,
+  ViewProps,
+  FlatListProps,
+  FlatList,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import { PickerOption } from '../../../types';
+
+interface Props {
+  value: number | string;
+  options: PickerOption[];
+  onChange: (index: number | string) => void;
+  itemHeight?: number;
+  containerStyle?: ViewStyle;
+  containerProps?: Omit<ViewProps, 'style'>;
+  scaleFunction?: (x: number) => number;
+  rotationFunction?: (x: number) => number;
+  opacityFunction?: (x: number) => number;
+  visibleRest?: number;
+  decelerationRate?: 'normal' | 'fast' | number;
+  flatListProps?: Omit<FlatListProps<string | null>, 'data' | 'renderItem'>;
+}
+
+const WheelPicker: React.FC<Props> = ({
+  value,
+  options,
+  onChange,
+  itemHeight = 40,
+  scaleFunction = (x: number) => 1.0 ** x,
+  rotationFunction = (x: number) => 1 - Math.pow(1 / 2, x),
+  opacityFunction = (x: number) => Math.pow(1 / 3, x),
+  visibleRest = 2,
+  decelerationRate = 'normal',
+  containerProps = {},
+  flatListProps = {},
+}) => {
+  const momentumStarted = useRef(false);
+  const selectedIndex = options.findIndex((item) => item.value === value);
+
+  const flatListRef = useRef<FlatList>(null);
+  const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+
+  const containerHeight = (1 + visibleRest * 2) * itemHeight;
+  const paddedOptions = useMemo(() => {
+    const array: (PickerOption | null)[] = [...options];
+    for (let i = 0; i < visibleRest; i++) {
+      array.unshift(null);
+      array.push(null);
+    }
+    return array;
+  }, [options, visibleRest]);
+
+  const offsets = useMemo(
+    () => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight),
+    [paddedOptions, itemHeight]
+  );
+
+  const currentScrollIndex = useMemo(
+    () => Animated.add(Animated.divide(scrollY, itemHeight), visibleRest),
+    [visibleRest, scrollY, itemHeight]
+  );
+
+  const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    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++;
+    }
+
+    if (index !== selectedIndex) {
+      onChange(options[index]?.value || 0);
+    }
+  };
+
+  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);
+  };
+
+  useEffect(() => {
+    if (selectedIndex < 0 || selectedIndex >= options.length) {
+      throw new Error(
+        `Selected index ${selectedIndex} is out of bounds [0, ${
+          options.length - 1
+        }]`
+      );
+    }
+  }, [selectedIndex, options]);
+
+  /**
+   * If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
+   * This ensures that what the user sees as selected in the picker always corresponds to the value state.
+   */
+  useEffect(() => {
+    flatListRef.current?.scrollToIndex({
+      index: selectedIndex,
+      animated: Platform.OS === 'ios',
+    });
+  }, [selectedIndex, itemHeight]);
+
+  return (
+    <View
+      style={[styles.container, { height: containerHeight }]}
+      {...containerProps}
+    >
+      <View
+        style={[
+          styles.selectedIndicator,
+          {
+            transform: [{ translateY: -itemHeight / 2 }],
+            height: itemHeight,
+          },
+        ]}
+      />
+      <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}
+        snapToOffsets={offsets}
+        decelerationRate={decelerationRate}
+        initialScrollIndex={selectedIndex}
+        getItemLayout={(_, index) => ({
+          length: itemHeight,
+          offset: itemHeight * index,
+          index,
+        })}
+        data={paddedOptions}
+        keyExtractor={(item, index) =>
+          item ? `${item.value}-${item.text}-${index}` : `null-${index}`
+        }
+        renderItem={({ item: option, index }) => (
+          <WheelPickerItem
+            key={`option-${index}`}
+            index={index}
+            option={option}
+            height={itemHeight}
+            currentScrollIndex={currentScrollIndex}
+            scaleFunction={scaleFunction}
+            rotationFunction={rotationFunction}
+            opacityFunction={opacityFunction}
+            visibleRest={visibleRest}
+          />
+        )}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  selectedIndicator: {
+    position: 'absolute',
+    width: '100%',
+    top: '50%',
+  },
+  scrollView: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+});
+
+export default memo(WheelPicker);

package/src/components/WheelPicker/WheelWeb.tsx

@@ -5,32 +5,37 @@ import {
   StyleSheet,
   View,
   Platform,
+  Text,
 } from 'react-native';
-import { useCalendarContext } from '../../CalendarContext';
-import { sin } from './AnimatedMath';
-import { CALENDAR_HEIGHT } from '../../enums';
+import { sin } from './animated-math';
+import { CONTAINER_HEIGHT } from '../../enums';
+import { PickerOption } from '../../types';
+import { isEqual } from 'lodash';
 
 interface WheelProps {
-  value: number;
-  setValue?: (value: number) => void;
-  items: string[];
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
 }
 
-const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
-  const { theme } = useCalendarContext();
+const ITEM_HEIGHT = 44;
 
+const WheelWeb: React.FC<WheelProps> = ({
+  value,
+  setValue = () => {},
+  items,
+}) => {
   const displayCount = 5;
   const translateY = useRef(new Animated.Value(0)).current;
   const renderCount =
     displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
   const circular = items.length >= displayCount;
-  const height = 130;
+  const height = 140;
   const radius = height / 2;
 
-  const valueIndex = useMemo(
-    () => items.indexOf(('0' + value).slice(-2)),
-    [items, value]
-  );
+  const valueIndex = useMemo(() => {
+    return items.findIndex((item) => item.value === value) || 0;
+  }, [items, value]);
 
   const panResponder = useMemo(() => {
     return PanResponder.create({
@@ -54,11 +59,12 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
         else if (newValueIndex >= items.length)
           newValueIndex = items.length - 1;
 
-        const newValue = items[newValueIndex] || '00';
-        if (newValue === ('0' + value).slice(-2)) {
+        const newValue = items[newValueIndex];
+        if (newValue?.value === value) {
           translateY.setOffset(0);
           translateY.setValue(0);
-        } else setValue(parseInt(newValue, 10));
+        } else if (newValue?.value) setValue(newValue.value);
+        else if (items[0]?.value) setValue(items[0].value);
       },
     });
   }, [
@@ -77,19 +83,21 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
 
     return Array.from({ length: renderCount }, (_, index) => {
       let targetIndex = valueIndex + index - centerIndex;
-      if (targetIndex < 0 || targetIndex >= items.length) {
-        if (!circular) return 0;
+      if (circular)
+        targetIndex =
+          ((targetIndex % items.length) + items.length) % items.length;
+      else targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
 
-        targetIndex = (targetIndex + items.length) % items.length;
-      }
-      return items[targetIndex] || 0;
+      return items[targetIndex] || items[0];
     });
   }, [renderCount, valueIndex, items, circular]);
 
   const animatedAngles = useMemo(() => {
     //translateY.setValue(0);
     translateY.setOffset(0);
-    const currentIndex = displayValues.indexOf(('0' + value).slice(-2));
+    const currentIndex = displayValues.findIndex(
+      (item) => item?.value === value
+    );
     return displayValues && displayValues.length > 0
       ? displayValues.map((_, index) =>
           translateY
@@ -112,54 +120,57 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
   }, [displayValues, radius, value, displayCount, translateY]);
 
   return (
-    <View style={[styles.container]} {...panResponder.panHandlers}>
+    <View style={[defaultStyles.container]} {...panResponder.panHandlers}>
+      <View
+        style={[
+          defaultStyles.selectedIndicator,
+          {
+            transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+            height: ITEM_HEIGHT,
+          },
+        ]}
+      />
       {displayValues?.map((displayValue, index) => {
         const animatedAngle = animatedAngles[index];
         return (
-          <Animated.Text
-            key={`${displayValue}-${index}`}
-            style={[
-              { ...styles.wheelPickerText, ...theme?.wheelPickerTextStyle },
-              // eslint-disable-next-line react-native/no-inline-styles
-              {
-                position: 'absolute',
-                height: 25,
-                transform: animatedAngle
-                  ? [
-                      {
-                        translateY: Animated.multiply(
-                          radius,
-                          sin(animatedAngle)
-                        ),
-                      },
-                      {
-                        rotateX: animatedAngle.interpolate({
-                          inputRange: [-Math.PI / 2, Math.PI / 2],
-                          outputRange: ['-89deg', '89deg'],
-                          extrapolate: 'clamp',
-                        }),
-                      },
-                    ]
-                  : [],
-                opacity: displayValue !== ('0' + value).slice(-2) ? 0.3 : 1,
-              },
-            ]}
+          <Animated.View
+            key={`${displayValue?.text}-${index}`}
+            // eslint-disable-next-line react-native/no-inline-styles
+            style={{
+              position: 'absolute',
+              height: ITEM_HEIGHT - 10,
+              transform: animatedAngle
+                ? [
+                    {
+                      translateY: Animated.multiply(radius, sin(animatedAngle)),
+                    },
+                    {
+                      rotateX: animatedAngle.interpolate({
+                        inputRange: [-Math.PI / 2, Math.PI / 2],
+                        outputRange: ['-89deg', '89deg'],
+                        extrapolate: 'clamp',
+                      }),
+                    },
+                  ]
+                : [],
+              opacity: displayValue?.value !== value ? 0.3 : 1,
+            }}
           >
-            {displayValue}
-          </Animated.Text>
+            <Text>{displayValue?.text}</Text>
+          </Animated.View>
         );
       })}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
+const defaultStyles = StyleSheet.create({
   container: {
     minWidth: 30,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
-    height: CALENDAR_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
     ...Platform.select({
       web: {
         cursor: 'pointer',
@@ -171,15 +182,23 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  wheelPickerText: {
-    fontSize: 20,
-    fontWeight: '500',
+  selectedIndicator: {
+    position: 'absolute',
+    width: '100%',
+    top: '50%',
   },
 });
 
-export default memo(WheelWeb, (prevProps, nextProps) => {
-  return (
-    prevProps.value === nextProps.value &&
-    prevProps.setValue === nextProps.setValue
-  );
-});
+const customComparator = (
+  prev: Readonly<WheelProps>,
+  next: Readonly<WheelProps>
+) => {
+  const areEqual =
+    prev.value === next.value &&
+    prev.setValue === next.setValue &&
+    isEqual(prev.items, next.items);
+
+  return areEqual;
+};
+
+export default memo(WheelWeb, customComparator);

package/src/components/WheelPicker/animated-math.ts

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+
+const FACTORIAL_3 = 3 * 2;
+const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
+const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
+
+function sin(animated: Animated.Animated) {
+  const normalized = normalize(animated);
+  const square = Animated.multiply(normalized, normalized);
+  const pow3 = Animated.multiply(normalized, square);
+  const pow5 = Animated.multiply(pow3, square);
+  const pow7 = Animated.multiply(pow5, square);
+
+  return Animated.add(
+    Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)),
+    Animated.add(
+      Animated.multiply(pow5, 1 / FACTORIAL_5),
+      Animated.multiply(pow7, -1 / FACTORIAL_7)
+    )
+  );
+}
+
+function normalize(animated: Animated.Animated): Animated.Animated {
+  return Animated.add(
+    Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2),
+    -Math.PI
+  ).interpolate({
+    inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
+    outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
+  });
+}
+
+export { sin, normalize };

package/src/components/WheelPicker/period-native.tsx

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import WheelPicker from './WheelNativePicker';
+import { PickerOption } from '../../types';
+
+interface PeriodProps {
+  value: string;
+  setValue?: (value: any) => void;
+}
+
+const options: PickerOption[] = [
+  { value: 'AM', text: 'AM' },
+  { value: 'PM', text: 'PM' },
+];
+
+const PeriodNative: React.FC<PeriodProps> = ({
+  value,
+  setValue = () => {},
+}) => {
+  return (
+    <WheelPicker
+      value={value}
+      options={options}
+      onChange={setValue}
+      itemHeight={44}
+      decelerationRate="fast"
+    />
+  );
+};
+
+const customComparator = (
+  prev: Readonly<PeriodProps>,
+  next: Readonly<PeriodProps>
+) => {
+  const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+
+  return areEqual;
+};
+
+export default memo(PeriodNative, customComparator);

package/src/components/WheelPicker/period-picker.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import { Platform } from 'react-native';
+import PeriodNative from './period-native';
+import PeriodWeb from './period-web';
+
+type PeriodProps = {
+  value: string;
+  setValue?: (value: any) => void;
+};
+
+const PeriodPicker: React.FC<PeriodProps> = (props) => {
+  const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
+  return <Component {...props} />;
+};
+
+export default memo(PeriodPicker);

package/src/components/WheelPicker/period-web.tsx

@@ -0,0 +1,37 @@
+import React, { memo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+interface PeriodProps {
+  value: string;
+  setValue?: (value: any) => void;
+}
+
+const PeriodWeb: React.FC<PeriodProps> = ({ value, setValue = () => {} }) => {
+  return (
+    <Pressable onPress={() => setValue(value == 'AM' ? 'PM' : 'AM')}>
+      <View style={[defaultStyles.period]}>
+        <Text>{value}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  period: {
+    width: 65,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const customComparator = (
+  prev: Readonly<PeriodProps>,
+  next: Readonly<PeriodProps>
+) => {
+  const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+
+  return areEqual;
+};
+
+export default memo(PeriodWeb, customComparator);

package/src/components/YearSelector.tsx

@@ -10,7 +10,7 @@ import {
 import { useCalendarContext } from '../CalendarContext';
 import { getDateYear, getYearRange } from '../utils';
 
-const YearSelector = () => {
+const YearSelector: React.FC = () => {
   const { currentDate, currentYear, onSelectYear, theme } =
     useCalendarContext();
   const selectedYear = getDateYear(currentDate);

package/src/enums.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: limit
  * @Date: 2024-07-17 05:09:59
- * @LastEditTime: 2024-07-25 15:56:28
+ * @LastEditTime: 2025-08-07 16:31:49
  * @LastEditors: limit
- * @FilePath: /JYB-APP/src/components/DatePicker/enums.ts
+ * @FilePath: /react-native-date-picker/src/enums.ts
  * @Description: 由limit创建！
  */
 export type CalendarViews = 'day' | 'month' | 'year' | 'time';
@@ -17,4 +17,5 @@ export enum CalendarActionKind {
   CHANGE_SELECTED_MULTIPLE = 'CHANGE_SELECTED_MULTIPLE',
 }
 
-export const CALENDAR_HEIGHT = 300;
+export const CONTAINER_HEIGHT = 300;
+export const WEEKDAYS_HEIGHT = 25;

package/src/types.ts

@@ -109,3 +109,8 @@ export interface DatePickerBaseProps {
   initialView?: CalendarViews;
   height?: number;
 }
+
+export type PickerOption = {
+  value: number | string;
+  text: string;
+};

package/src/utils.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import type { DateType, IDayObject } from './types';
+import type { DateType, IDayObject, PickerOption } from './types';
 
 export const CALENDAR_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const DATE_FORMAT = 'YYYY-MM-DD';
@@ -105,7 +105,7 @@ export function getDaysNumInMonth(
   month: number,
   minDate: DateType,
   maxDate: DateType
-): string[] {
+): Array<PickerOption> {
   const formattedMonth = String(month).padStart(2, '0');
   const date = dayjs(`${year}-${formattedMonth}-01`);
   const daysInMonth = date.daysInMonth();
@@ -121,7 +121,7 @@ export function getDaysNumInMonth(
       (currentDate.isAfter(minDay) || currentDate.isSame(minDay, 'day')) &&
       (currentDate.isBefore(maxDay) || currentDate.isSame(maxDay, 'day'))
     )
-      daysArray.push(String(day).padStart(2, '0'));
+      daysArray.push({ value: day, text: String(day).padStart(2, '0') });
   }
   return daysArray;
 }