@momo-kits/date-picker 0.92.8-beta.1 → 0.92.8-beta.11

package/WheelPicker.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import {Animated, Platform, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 import styles from './styles';
 import {ApplicationContext, scaleSize} from '@momo-kits/foundation';
@@ -46,12 +46,6 @@ const WheelPicker: FC<WheelPickerProps> = ({
     };
   }, [data.length]);
 
-  useEffect(() => {
-    if (Platform.OS === 'android') {
-      onMomentumScrollEnd();
-    }
-  }, []);
-
   const findClosestIndex = (array: string[], value: string) => {
     let closest = array.reduce((a, b) => {
       let aDiff = Math.abs(Number(a) - Number(value));

package/index.tsx

@@ -1,6 +1,6 @@
-import React, {FC, useCallback, useEffect, useMemo, useState} from 'react';
-import {Dimensions, LayoutChangeEvent, View} from 'react-native';
-import {Spacing} from '@momo-kits/foundation';
+import React, { FC, useEffect, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, Platform, View } from 'react-native';
+import { Spacing, Text } from '@momo-kits/foundation';
 import WheelPicker from './WheelPicker';
 import {
   getDaysInMonth,
@@ -10,7 +10,7 @@ import {
   getYears,
   timeMode,
 } from './utils';
-import {DateObject, DateTimePickerProps, PickerDataObject} from './types';
+import { DateObject, DateTimePickerProps, PickerDataObject } from './types';
 import styles from './styles';
 
 const date = new Date();
@@ -28,6 +28,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
   selectedValue = date,
   minDate = minDateDefault,
   maxDate = maxDateDefault,
+  arrayLabelTime = []
 }) => {
   const [data, setData] = useState<DateObject[]>([]);
   let [currentDate, setCurrentDate] = useState<PickerDataObject>({
@@ -41,14 +42,20 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
 
   useEffect(() => {
     setupData();
-    return () => {};
+    return () => { };
+  }, [selectedValue, currentDate]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      onChange?.(selectedValue);
+    }
   }, []);
 
-  const setupData = useCallback(() => {
+  const setupData = () => {
     const formatParts = format.split(/[^A-Za-z]+/);
     const isOnlyHour = formatParts.length === 1 && formatParts[0] === 'HH';
 
-    const componentData: {[key: string]: DateObject} = {
+    const componentData: { [key: string]: DateObject } = {
       DD: {
         name: 'day',
         data: getDaysInMonth(
@@ -66,8 +73,8 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
         name: 'year',
         data: getYears(minDate, maxDate),
       },
-      HH: {name: 'hour', data: getHours(isOnlyHour ? 12 : 24)},
-      mm: {name: 'min', data: getMinutes(minuteInterval)},
+      HH: { name: 'hour', data: getHours(isOnlyHour ? 12 : 24) },
+      mm: { name: 'min', data: getMinutes(minuteInterval) },
     };
 
     const initialData = formatParts.map(part => {
@@ -81,11 +88,11 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     });
 
     if (isOnlyHour) {
-      initialData.push({name: 'timeMode', data: timeMode});
+      initialData.push({ name: 'timeMode', data: timeMode });
     }
 
     setData(initialData);
-  }, []);
+  };
 
   const numOfColumns = data.length;
 
@@ -113,6 +120,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     if (changedDate <= maxDate && changedDate >= minDate) {
       onChange?.(changedDate);
     }
+
     setCurrentDate(newDate);
   };
 
@@ -128,22 +136,34 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     <View onLayout={onLayout} style={styles.datePicker}>
       {data.map((dataItem, index) => {
         return (
-          <WheelPicker
-            key={`${dataItem.name}_${index}`}
-            selectedData={String(currentDate[dataItem.name])}
-            onChange={onPickerChange}
-            data={[...paddingArray, ...dataItem.data, ...paddingArray]}
-            name={dataItem.name}
-            style={{
-              width:
-                (screenWidth - Spacing.M * 2 - (numOfColumns - 1) * Spacing.M) /
-                numOfColumns,
-            }}
-          />
-        );
+          <View>
+            {arrayLabelTime[index] && (
+              <View style={{ alignItems: 'center', marginBottom: Spacing.M }}>
+                <Text typography="header_default_bold">
+                  {arrayLabelTime[index]}
+                </Text>
+              </View>
+            )}
+            <WheelPicker
+              key={`${dataItem.name}_${index}`}
+              selectedData={String(currentDate[dataItem.name])}
+              onChange={onPickerChange}
+              data={[...paddingArray, ...dataItem.data, ...paddingArray]}
+              name={dataItem.name}
+              style={{
+                width:
+                  (containerWidth -
+                    Spacing.M * 2 -
+                    (numOfColumns - 1) * Spacing.M) /
+                  numOfColumns,
+              }}
+            />
+          </View>
+        )
       })}
     </View>
   );
 };
 
+export type {DateTimePickerProps};
 export {DateTimePicker};

package/package.json

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

package/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius} from '@momo-kits/foundation';
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   wheelItem: {
@@ -30,5 +30,6 @@ export default StyleSheet.create({
     overflow: 'hidden',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
+    marginBottom: Spacing.XL,
   },
 });

package/types.ts

@@ -1,4 +1,4 @@
-import {ViewStyle} from 'react-native';
+import { ViewStyle } from 'react-native';
 
 export type DateTimePickerProps = {
   /**
@@ -30,6 +30,11 @@ export type DateTimePickerProps = {
    * Optional. The maximum date that can be selected.
    */
   maxDate?: Date;
+  /**
+   * Optional. Label for Time
+   */
+  arrayLabelTime?: string[];
+
 };
 
 /**