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

package/WheelPicker.tsx

@@ -1,4 +1,11 @@
-import React, {FC, useCallback, useContext, useEffect, useRef} from 'react';
+import React, {
+  FC,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {Animated, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 import styles from './styles';
@@ -205,4 +212,4 @@ const WheelPicker: FC<WheelPickerProps> = ({
   );
 };
 
-export default WheelPicker;
+export default memo(WheelPicker);

package/index.tsx

@@ -1,6 +1,6 @@
-import React, {FC, useEffect, 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 = () => {
     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,7 +88,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     });
 
     if (isOnlyHour) {
-      initialData.push({name: 'timeMode', data: timeMode});
+      initialData.push({ name: 'timeMode', data: timeMode });
     }
 
     setData(initialData);
@@ -113,34 +120,46 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     if (changedDate <= maxDate && changedDate >= minDate) {
       onChange?.(changedDate);
     }
+
     setCurrentDate(newDate);
   };
 
   const paddingArray = ['', ''];
 
   const onLayout = (e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
+    if (containerWidth !== e.nativeEvent.layout.width) {
+      setContainerWidth(e.nativeEvent.layout.width);
+    }
   };
 
   return (
     <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:
-                (containerWidth -
-                  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>
   );

package/package.json

@@ -1,18 +1,18 @@
 {
-    "name": "@momo-kits/date-picker",
-    "version": "0.92.8-beta.10",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react-native-gesture-handler": "1.10.3",
-        "react": "16.9.0",
-        "react-native": ">=0.55",
-        "prop-types": "^15.7.2"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
-    "license": "MoMo",
-    "dependencies": {}
+  "name": "@momo-kits/date-picker",
+  "version": "0.92.8-beta.11",
+  "private": false,
+  "main": "index.tsx",
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react-native-gesture-handler": "1.10.3",
+    "react": "16.9.0",
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo",
+  "dependencies": {}
 }

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[];
+
 };
 
 /**