react-native-dates-picker 0.0.9 → 0.1.0

package/src/components/DaySelector.tsx

@@ -1,4 +1,4 @@
-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';
@@ -14,7 +14,7 @@ import {
   getFormatted,
 } from '../utils';
 
-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';
 
-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';
 
-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 Wheel from './WheelPicker/Wheel';
-import { CALENDAR_HEIGHT } from '../enums';
+import { CONTAINER_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,19 @@
+import React, { memo } from 'react';
 import { Platform, type ViewStyle } from 'react-native';
 import WheelNative from './WheelNative';
 import WheelWeb from './WheelWeb';
+import { PickerOption } from '../../types';
 
 interface WheelProps {
   value: number;
   setValue?: (value: number) => void;
-  items: string[];
+  items: Array<PickerOption>;
   indicatorStyle?: ViewStyle;
 }
 
-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,48 +1,34 @@
-import { StyleSheet, Platform, type ViewStyle } from 'react-native';
-import WheelPicker from 'react-native-wheely';
-import { useCalendarContext } from '../../CalendarContext';
+import React, { memo } from 'react';
+import { StyleSheet, Platform } from 'react-native';
+import WheelPicker from './WheelNativePicker';
+import { PickerOption } from '../../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}
+      containerStyle={defaultStyles.container}
+      itemHeight={44}
+      decelerationRate="fast"
     />
   );
-}
+};
+
+export default memo(WheelNative);
 
-const styles = StyleSheet.create({
+const defaultStyles = StyleSheet.create({
   container: {
     display: 'flex',
     ...Platform.select({
@@ -51,11 +37,4 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  wheelSelectedIndicator: {
-    borderRadius: 10,
-  },
-  wheelPickerText: {
-    fontSize: 18,
-    fontWeight: '500',
-  },
 });

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

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

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

@@ -0,0 +1,137 @@
+import React, { memo } from 'react';
+import { Animated, Text, StyleSheet } from 'react-native';
+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 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 }],
+        },
+      ]}
+    >
+      <Text>{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,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);