@momo-kits/date-picker 0.92.16-beta.0 → 0.92.16-beta.1

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';
@@ -24,7 +31,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
   useEffect(() => {
     scrollListener.current && clearInterval(Number(scrollListener.current));
     scrollListener.current = scrollAnimatedValue.addListener(
-      ({value}) => (active.current = value),
+      ({value}) => (active.current = value)
     );
 
     return () => {
@@ -44,7 +51,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
       let aDiff = Math.abs(Number(a) - Number(value));
       let bDiff = Math.abs(Number(b) - Number(value));
 
-      if (aDiff == bDiff) {
+      if (aDiff === bDiff) {
         return a < b ? a : b;
       } else {
         return bDiff < aDiff ? b : a;
@@ -156,7 +163,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
 
   const getItemLayout = (
     data: unknown[] | undefined | null,
-    index: number,
+    index: number
   ) => ({
     length: itemSize,
     offset: itemSize * index,
@@ -191,7 +198,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
           [{nativeEvent: {contentOffset: {y: scrollAnimatedValue}}}],
           {
             useNativeDriver: true,
-          },
+          }
         )}
         onMomentumScrollEnd={onMomentumScrollEnd}
         ref={flatListRef}
@@ -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,21 +42,27 @@ 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(
           +currentDate.year,
           +currentDate.month,
           minDate,
-          maxDate,
+          maxDate
         ),
       },
       MM: {
@@ -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);
@@ -107,43 +114,56 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
       newDate.month - 1,
       newDate.day,
       newDate.hour,
-      newDate.min,
+      newDate.min
     );
 
     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>
   );
 };
 
+export type {DateTimePickerProps};
 export {DateTimePicker};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/date-picker",
-    "version": "0.92.16-beta.0",
+    "version": "0.92.16-beta.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {
@@ -15,4 +15,4 @@
     },
     "license": "MoMo",
     "dependencies": {}
-}
+}

package/publish.sh

@@ -6,16 +6,23 @@ mkdir dist
 rsync -r --exclude=/dist ./* dist
 cd dist
 
-if [ "$1" == "beta" ]; then  # Publish beta
-  npm version $(npm view @momo-kits/date-picker@beta version)
-  npm version prepatch --preid=beta
-  npm publish --tag beta --access=public
-else                        # Publish latest
-  npm version $(npm view @momo-kits/date-picker version)
-  npm version patch
+if [ "$1" == "stable" ]; then
+  #npm version $(npm view @momo-kits/date-picker@stable version)
+  #npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  #npm version $(npm view @momo-kits/date-picker@latest version)
+  #npm version prerelease --preid=rc
   npm publish --tag latest --access=public
+else
+  #npm version $(npm view @momo-kits/date-picker@beta version)
+  #npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
 fi
 
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
 # Clean up
 cd ..
 rm -rf dist

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