react-native-dates-picker 0.0.8 → 0.1.0

package/src/components/DatePicker.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { 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 {
   getFormatted,
   getParsedDate,
@@ -11,13 +11,14 @@ import {
   getDate,
 } from '../utils';
 
-function createNumberList(start: number, end: number) {
-  return new Array(end - start)
-    .fill(0)
-    .map((_, index) => String(index + 1 + start).padStart(2, '0'));
+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'),
+  }));
 }
 
-const DatePicker = () => {
+const DatePicker: React.FC = () => {
   const {
     columns,
     currentDate,
@@ -41,6 +42,7 @@ const DatePicker = () => {
 
   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(
     () =>
@@ -57,31 +59,32 @@ const DatePicker = () => {
   );
   const hours = useMemo(
     () =>
-      createNumberList(...getTimeRange(currentDate, minDate, maxDate, 'hour')),
+      createNumberList(
+        ...getTimeRange(currentDate, minDate, maxDate, 'hour'),
+        0
+      ),
     [currentDate, maxDate, minDate]
   );
   const minutes = useMemo(
     () =>
       createNumberList(
-        ...getTimeRange(currentDate, minDate, maxDate, 'minute')
+        ...getTimeRange(currentDate, minDate, maxDate, 'minute'),
+        0
       ),
     [currentDate, maxDate, minDate]
   );
   const seconds = useMemo(
     () =>
       createNumberList(
-        ...getTimeRange(currentDate, minDate, maxDate, 'second')
+        ...getTimeRange(currentDate, minDate, maxDate, 'second'),
+        0
       ),
     [currentDate, maxDate, minDate]
   );
 
   const handleChangeDate = useCallback(
-    (
-      value: number,
-      data: Array<string>,
-      type: 'date' | 'hour' | 'minute' | 'second'
-    ) => {
-      const newDate = getDate(currentDate)[type](Number(data[value]));
+    (value: number, type: 'date' | 'hour' | 'minute' | 'second') => {
+      const newDate = getDate(currentDate).set(type, value);
       onSelectDate(getFormatted(newDate));
     },
     [currentDate, onSelectDate]
@@ -107,63 +110,49 @@ const DatePicker = () => {
           <View style={styles.wheelContainer} key={item}>
             {item === 'year' && (
               <Wheel
-                value={years.indexOf(String(year))}
+                value={year}
                 items={years}
-                key={years.length}
-                setValue={(value) => onSelectYear(Number(years[value]))}
+                setValue={(value) => onSelectYear(value)}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'month' && (
               <Wheel
-                value={months.indexOf(String(month + 1).padStart(2, '0'))}
+                value={month + 1}
                 items={months}
-                key={months.length}
-                setValue={(value) => onSelectMonth(Number(months[value]) - 1)}
+                setValue={(value) => onSelectMonth(value - 1)}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'day' && (
               <Wheel
-                value={days.indexOf(
-                  String(getDate(currentDate).date()).padStart(2, '0')
-                )}
-                key={days.length}
+                value={getDate(currentDate).date()}
                 items={days}
-                setValue={(value) => handleChangeDate(value, days, 'date')}
+                setValue={(value) => handleChangeDate(value, 'date')}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'hour' && (
               <Wheel
-                value={hours.indexOf(
-                  String(getDate(currentDate).hour()).padStart(2, '0')
-                )}
-                key={hours.length}
+                value={hour}
                 items={hours}
-                setValue={(value) => handleChangeDate(value, hours, 'hour')}
+                setValue={(value) => handleChangeDate(value, 'hour')}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'minute' && (
               <Wheel
-                value={minutes.indexOf(
-                  String(getDate(currentDate).minute()).padStart(2, '0')
-                )}
-                key={minutes.length}
+                value={minute}
                 items={minutes}
-                setValue={(value) => handleChangeDate(value, minutes, 'minute')}
+                setValue={(value) => handleChangeDate(value, 'minute')}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'second' && (
               <Wheel
-                value={seconds.indexOf(
-                  String(getDate(currentDate).second()).padStart(2, '0')
-                )}
-                key={seconds.length}
+                value={second}
                 items={seconds}
-                setValue={(value) => handleChangeDate(value, seconds, 'second')}
+                setValue={(value) => handleChangeDate(value, 'second')}
                 indicatorStyle={createIndicatorStyle(index)}
               />
             )}
@@ -179,16 +168,18 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
   },
   wheelContainer: {
     flex: 1,
   },
   datePickerContainer: {
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: 16,
-    height: CALENDAR_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
   },
 });
 

package/src/components/Day.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
 import { CalendarThemeProps, IDayObject } from '../types';
-import { CALENDAR_HEIGHT } from '../enums';
+import { CONTAINER_HEIGHT } from '../enums';
 import { addColorAlpha } from '../utils';
 import { isEqual } from 'lodash';
 
@@ -16,13 +16,13 @@ interface Props extends Omit<IDayObject, 'day'> {
 }
 
 function EmptyDayPure({ height }: { height?: number }) {
-  const style = styles(height || CALENDAR_HEIGHT);
+  const style = styles(height || CONTAINER_HEIGHT);
   return <View style={style.dayCell} />;
 }
 
-export const EmptyDay = React.memo(EmptyDayPure);
+export const EmptyDay = memo(EmptyDayPure);
 
-function Day({
+const Day: React.FC<Props> = ({
   date,
   text,
   disabled,
@@ -35,8 +35,8 @@ function Day({
   onSelectDate,
   theme,
   height,
-}: Props) {
-  const onPress = React.useCallback(() => {
+}) => {
+  const onPress = useCallback(() => {
     onSelectDate(date);
   }, [onSelectDate, date]);
 
@@ -83,7 +83,7 @@ function Day({
   const rangeRootBackground =
     selectedRangeBackgroundColor ?? addColorAlpha(selectedItemColor, 0.15);
 
-  const style = styles(height || CALENDAR_HEIGHT);
+  const style = styles(height || CONTAINER_HEIGHT);
 
   return (
     <View style={style.dayCell}>
@@ -138,7 +138,7 @@ function Day({
       </Pressable>
     </View>
   );
-}
+};
 
 const styles = (height: number) =>
   StyleSheet.create({
@@ -190,4 +190,4 @@ const customComparator = (
   );
 };
 
-export default React.memo(Day, customComparator);
+export default memo(Day, customComparator);

package/src/components/DaySelector.tsx

@@ -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

@@ -5,7 +5,7 @@ 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

@@ -3,7 +3,7 @@ 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

@@ -2,22 +2,21 @@ 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: CALENDAR_HEIGHT / 2,
-    height: CALENDAR_HEIGHT / 2,
+    width: CONTAINER_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
   },
   timePickerText: {
     fontSize: 24,

package/src/components/WheelPicker/Wheel.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
+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,49 +1,34 @@
-import React from 'react';
-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({
@@ -52,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);