react-native-dates-picker 0.0.9 → 0.1.1

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

@@ -0,0 +1,140 @@
+import React, { memo } from 'react';
+import { Animated, Text, StyleSheet } from 'react-native';
+import { useCalendarContext } from 'src/CalendarContext';
+import { PickerOption } from 'src/types';
+
+interface ItemProps {
+  option: PickerOption | null;
+  height: number;
+  index: number;
+  currentScrollIndex: Animated.AnimatedAddition<number>;
+  visibleRest: number;
+  rotationFunction: (x: number) => number;
+  opacityFunction: (x: number) => number;
+  scaleFunction: (x: number) => number;
+}
+
+const WheelPickerItem: React.FC<ItemProps> = ({
+  height,
+  option,
+  index,
+  visibleRest,
+  currentScrollIndex,
+  opacityFunction,
+  rotationFunction,
+  scaleFunction,
+}) => {
+  const { theme } = useCalendarContext();
+  const relativeScrollIndex = Animated.subtract(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);
+      }
+      return range;
+    })(),
+  });
+
+  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;
+    })(),
+  });
+
+  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;
+    })(),
+  });
+
+  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;
+    })(),
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.option,
+        {
+          height,
+          opacity,
+          transform: [{ translateY }, { rotateX }, { scale }],
+        },
+        theme.wheelPickerItemStyle,
+      ]}
+    >
+      <Text style={theme.wheelPickerTextStyle}>{option?.text}</Text>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  option: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    zIndex: 100,
+  },
+});
+
+export default memo(WheelPickerItem);

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

@@ -0,0 +1,220 @@
+import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
+import {
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  Animated,
+  View,
+  ViewProps,
+  FlatListProps,
+  FlatList,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import { PickerOption } from 'src/types';
+import { useCalendarContext } from 'src/CalendarContext';
+
+interface Props {
+  value: number | string;
+  options: PickerOption[];
+  onChange: (index: number | string) => void;
+  itemHeight?: number;
+  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 { theme } = useCalendarContext();
+  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 },
+        theme.wheelPickerContainerStyle,
+      ]}
+      {...containerProps}
+    >
+      <View
+        style={[
+          styles.selectedIndicator,
+          {
+            transform: [{ translateY: -itemHeight / 2 }],
+            height: itemHeight,
+          },
+          theme.wheelPickerSelectedIndicatorStyle,
+        ]}
+      />
+      <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: {
+    display: 'flex',
+    position: 'relative',
+  },
+  selectedIndicator: {
+    position: 'absolute',
+    width: '100%',
+    top: '50%',
+  },
+  scrollView: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+});
+
+export default memo(WheelPicker);

package/src/components/WheelPicker/WheelWeb.tsx

@@ -1,36 +1,43 @@
-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 { isEqual } from 'lodash';
+import { CONTAINER_HEIGHT } from 'src/enums';
+import { PickerOption } from 'src/types';
+import { useCalendarContext } from 'src/CalendarContext';
+import { sin } from './animated-math';
 
 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 { theme } = useCalendarContext();
   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 +61,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 +85,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 +122,63 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
   }, [displayValues, radius, value, displayCount, translateY]);
 
   return (
-    <View style={[styles.container]} {...panResponder.panHandlers}>
+    <View
+      style={[defaultStyles.container, theme.wheelPickerContainerStyle]}
+      {...panResponder.panHandlers}
+    >
+      <View
+        style={[
+          defaultStyles.selectedIndicator,
+          {
+            transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+            height: ITEM_HEIGHT,
+          },
+          theme.wheelPickerSelectedIndicatorStyle,
+        ]}
+      />
       {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 style={theme?.wheelPickerTextStyle}>
+              {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 +190,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 'src/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);