react-native-dates-picker 0.0.9 → 0.1.0

package/src/components/WheelPicker/WheelWeb.tsx

@@ -1,36 +1,41 @@
-import { memo, useMemo, useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import {
   Animated,
   PanResponder,
   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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import {
   Text,
   View,
@@ -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;
 }