@momo-kits/date-picker 0.79.6 → 0.80.2

package/WheelPicker.tsx

@@ -1,12 +1,11 @@
 import React, {FC, useCallback, useContext, useEffect, useRef} from 'react';
 import {Animated, FlatList, View} from 'react-native';
 import styles from './styles';
-import {ApplicationContext, Text} from '@momo-kits/foundation';
+import {ApplicationContext, scaleSize} from '@momo-kits/foundation';
 import {WheelPickerProps} from './types';
 import {debounce} from './utils';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-
 const WheelPicker: FC<WheelPickerProps> = ({
   name,
   data,
@@ -37,7 +36,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
     return () => {
       debouncedScrollEnd.cancel();
     };
-  }, [data]);
+  }, []);
 
   const debouncedScrollEnd = debounce(() => {
     let selectedIndex = data.findIndex(item => item === selectedData);
@@ -57,7 +56,8 @@ const WheelPicker: FC<WheelPickerProps> = ({
   }, 100);
 
   const ItemComponent: FC<any> = React.memo(props => {
-    const {item, opacity} = props;
+    const {item, opacity, scale} = props;
+
     return (
       <Animated.View
         style={[
@@ -66,7 +66,15 @@ const WheelPicker: FC<WheelPickerProps> = ({
             opacity,
           },
         ]}>
-        <Text typography={'action_s'}>{item}</Text>
+        <Animated.Text
+          style={{
+            fontFamily: `${theme.font}-Semibold`,
+            transform: [{scale}],
+            fontSize: scaleSize(15),
+            lineHeight: scaleSize(22),
+          }}>
+          {item}
+        </Animated.Text>
       </Animated.View>
     );
   });
@@ -90,10 +98,27 @@ const WheelPicker: FC<WheelPickerProps> = ({
       };
     };
 
+    const scaleAnimated = (a: number, b: number) => {
+      return {
+        inputRange: [...data.map((_: any, i: number) => i * itemSize)],
+        outputRange: [
+          ...data.map((_: any, i: number) => {
+            const center = i + 2;
+            if (center === index) {
+              return a;
+            } else {
+              return b;
+            }
+          }),
+        ],
+      };
+    };
+
     return (
       <ItemComponent
         item={item}
         opacity={scrollAnimatedValue.interpolate(opacityAnimated(1, 0.8, 0.4))}
+        scale={scrollAnimatedValue.interpolate(scaleAnimated(1, 0.87))}
       />
     );
   }, []);
@@ -132,8 +157,8 @@ const WheelPicker: FC<WheelPickerProps> = ({
       ]}>
       <AnimatedFlatList
         windowSize={15}
-        initialNumToRender={5}
-        maxToRenderPerBatch={5}
+        initialNumToRender={15}
+        maxToRenderPerBatch={15}
         pagingEnabled
         snapToInterval={itemSize}
         decelerationRate={'fast'}

package/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC, useEffect, useState} from 'react';
-import {Dimensions, View} from 'react-native';
+import {Dimensions, LayoutChangeEvent, View} from 'react-native';
 import {Spacing} from '@momo-kits/foundation';
 import WheelPicker from './WheelPicker';
 import {
@@ -13,17 +13,21 @@ import {
 import {DateObject, DateTimePickerProps, PickerDataObject} from './types';
 import styles from './styles';
 
-const screenWidth = Dimensions.get('window').width;
 const date = new Date();
+const minDateDefault = new Date(date);
+const maxDateDefault = new Date(date);
+minDateDefault.setFullYear(minDateDefault.getFullYear() - 10);
+maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 10);
 date.setHours(0, 0);
+const screenWidth = Dimensions.get('window').width;
 
 const DateTimePicker: FC<DateTimePickerProps> = ({
   format = 'DD-MM-YYYY',
   minuteInterval = 1,
   onChange,
   selectedValue = date,
-  minDate = new Date(1900, 1, 1, 0, 0),
-  maxDate = new Date(date.getFullYear() + 10, 12, 31, 0, 0),
+  minDate = minDateDefault,
+  maxDate = maxDateDefault,
 }) => {
   const [data, setData] = useState<DateObject[]>([]);
   let [currentDate, setCurrentDate] = useState<PickerDataObject>({
@@ -33,6 +37,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     hour: selectedValue.getHours(),
     min: selectedValue.getMinutes(),
   });
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
 
   useEffect(() => {
     setupData();
@@ -112,8 +117,12 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
 
   const paddingArray = ['', ''];
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
   return (
-    <View style={styles.datePicker}>
+    <View onLayout={onLayout} style={styles.datePicker}>
       {data.map((dataItem, index) => {
         return (
           <WheelPicker
@@ -124,7 +133,9 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
             name={dataItem.name}
             style={{
               width:
-                (screenWidth - Spacing.M * 2 - (numOfColumns - 1) * Spacing.M) /
+                (containerWidth -
+                  Spacing.M * 2 -
+                  (numOfColumns - 1) * Spacing.M) /
                 numOfColumns,
             }}
           />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/date-picker",
-    "version": "0.79.6",
+    "version": "0.80.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -1,32 +1,88 @@
 import {ViewStyle} from 'react-native';
 
 export type DateTimePickerProps = {
+  /**
+   * Optional. Specifies the format for displaying the date and time.
+   */
   format?: string;
+
+  /**
+   * Optional. The interval between minutes in the picker. For example, '15' would show minute options 0, 15, 30, 45, etc.
+   */
   minuteInterval?: number;
+
+  /**
+   * Optional. A callback function that is triggered when the date or time value changes.
+   */
   onChange?: (data: Date) => void;
+
+  /**
+   * Optional. The initially selected date and time value.
+   */
   selectedValue?: Date;
+
+  /**
+   * Optional. The minimum date that can be selected.
+   */
   minDate?: Date;
+
+  /**
+   * Optional. The maximum date that can be selected.
+   */
   maxDate?: Date;
 };
 
+/**
+ * Represents the data structure for individual date and time components.
+ */
 export type PickerDataObject = {
   day: number;
   month: number;
   year: number;
   hour: number;
   min: number;
+
+  /**
+   * Optional. Specifies the mode of time presentation, e.g., 'AM' or 'PM'.
+   */
   timeMode?: string;
 };
 
+/**
+ * Type representing a date object with a name identifying the component ('day', 'month', etc.) and the associated data.
+ */
 export type DateObject = {
   name: 'day' | 'month' | 'year' | 'hour' | 'min' | 'timeMode';
   data: string[];
 };
 
+/**
+ * Properties for the WheelPicker component.
+ * This component provides a spinning-wheel style picker for selecting from provided data.
+ */
 export type WheelPickerProps = {
+  /**
+   * The name of the picker, used to identify it.
+   */
   name: string;
+
+  /**
+   * The data to be displayed and selected in the picker.
+   */
   data: string[];
+
+  /**
+   * Custom styles to apply to the WheelPicker component.
+   */
   style: ViewStyle;
+
+  /**
+   * A callback function that is triggered when the selected data changes.
+   */
   onChange: (name: string, data: string) => void;
+
+  /**
+   * The currently selected data in the picker.
+   */
   selectedData: string;
 };