@momo-kits/date-picker 0.150.2-beta.3 → 0.150.2-beta.30

package/WheelPicker.tsx

@@ -15,9 +15,9 @@ import {
   View,
 } from 'react-native';
 import styles from './styles';
-import {ApplicationContext} from '@momo-kits/foundation';
-import {WheelPickerProps} from './types';
-import {debounce, itemSize} from './utils';
+import { ApplicationContext } from '@momo-kits/foundation';
+import { WheelPickerProps } from './types';
+import { debounce, itemSize } from './utils';
 import WheelPickerItem from './WheelPickerItem';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
@@ -28,7 +28,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
   onChange,
   selectedData,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const flatListRef = useRef<any>(null);
   const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
   const canMomentum = useRef(false);
@@ -76,7 +76,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
     });
   }, 100);
 
-  const renderItem = useCallback(({item, index}: ListRenderItemInfo<any>) => {
+  const renderItem = useCallback(({ item, index }: ListRenderItemInfo<any>) => {
     return (
       <WheelPickerItem
         item={item}
@@ -90,14 +90,14 @@ const WheelPicker: FC<WheelPickerProps> = ({
   const renderOverlay = () => {
     return (
       <View style={styles.overlay}>
-        <View style={[styles.selectedItem, {height: itemSize}]} />
+        <View style={[styles.selectedItem, { height: itemSize }]} />
       </View>
     );
   };
 
   const getItemLayout = (
     _data: ArrayLike<unknown> | null | undefined,
-    index: number
+    index: number,
   ) => ({
     length: itemSize,
     offset: itemSize * index,
@@ -128,8 +128,11 @@ const WheelPicker: FC<WheelPickerProps> = ({
         {
           borderColor: theme.colors.border.default,
           backgroundColor: theme.colors.background.surface,
+          maxHeight: itemSize * 5,
         },
-      ]}>
+      ]}
+    >
+      {renderOverlay()}
       <AnimatedFlatList
         windowSize={7}
         initialNumToRender={initItemNum}
@@ -142,10 +145,10 @@ const WheelPicker: FC<WheelPickerProps> = ({
         onScrollToIndexFailed={onScrollToIndexFailed}
         onMomentumScrollBegin={onMomentumScrollBegin}
         onScroll={Animated.event(
-          [{nativeEvent: {contentOffset: {y: scrollAnimatedValue}}}],
+          [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
           {
             useNativeDriver: true,
-          }
+          },
         )}
         onMomentumScrollEnd={onMomentumScrollEnd}
         ref={flatListRef}
@@ -153,7 +156,6 @@ const WheelPicker: FC<WheelPickerProps> = ({
         data={data}
         renderItem={renderItem}
       />
-      {renderOverlay()}
     </View>
   );
 };

package/WheelPickerItem.tsx

@@ -1,8 +1,8 @@
-import React, {FC, memo, useContext} from 'react';
-import {Animated} from 'react-native';
+import React, { FC, memo, useContext } from 'react';
+import { Animated } from 'react-native';
 import styles from './styles';
-import {ApplicationContext, scaleSize} from '@momo-kits/foundation';
-import {WheelPickerItemProps} from './types';
+import { ApplicationContext } from '@momo-kits/foundation';
+import { WheelPickerItemProps } from './types';
 
 const WheelPickerItem: FC<WheelPickerItemProps> = ({
   item,
@@ -10,7 +10,7 @@ const WheelPickerItem: FC<WheelPickerItemProps> = ({
   scrollAnimatedValue,
   itemSize,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const position = Animated.divide(scrollAnimatedValue, itemSize);
   const distance = Animated.subtract(index, position);
   const opacity =
@@ -34,7 +34,8 @@ const WheelPickerItem: FC<WheelPickerItemProps> = ({
           opacity,
           height: itemSize,
         },
-      ]}>
+      ]}
+    >
       <Animated.Text
         style={{
           fontFamily: `${theme.font}-Semibold`,
@@ -43,9 +44,10 @@ const WheelPickerItem: FC<WheelPickerItemProps> = ({
               scale,
             },
           ],
-          fontSize: scaleSize(16),
-          lineHeight: scaleSize(22),
-        }}>
+          fontSize: 16,
+          lineHeight: 22,
+        }}
+      >
         {item}
       </Animated.Text>
     </Animated.View>

package/index.tsx

@@ -1,6 +1,6 @@
-import React, {FC, useEffect, useMemo, useState} from 'react';
-import {Dimensions, LayoutChangeEvent, View} from 'react-native';
-import {scaleSize, Spacing, Text} from '@momo-kits/foundation';
+import React, { FC, useEffect, useMemo, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, View } from 'react-native';
+import { Spacing, Text } from '@momo-kits/foundation';
 import WheelPicker from './WheelPicker';
 import {
   getDaysInMonth,
@@ -8,10 +8,9 @@ import {
   getMinutes,
   getMonths,
   getYears,
-  itemSize,
   timeMode,
 } from './utils';
-import {DateObject, DateTimePickerProps, PickerDataObject} from './types';
+import { DateObject, DateTimePickerProps, PickerDataObject } from './types';
 import styles from './styles';
 
 const date = new Date();
@@ -63,21 +62,21 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
   const dayData = useMemo(
     () =>
       getDaysInMonth(+currentDate.year, +currentDate.month, minDate, maxDate),
-    [currentDate.year, currentDate.month, minDate, maxDate]
+    [currentDate.year, currentDate.month, minDate, maxDate],
   );
   const monthData = useMemo(
     () => getMonths(minDate, maxDate, +currentDate.year),
-    [currentDate.year, minDate, maxDate]
+    [currentDate.year, minDate, maxDate],
   );
   const yearData = useMemo(
     () => getYears(minDate, maxDate),
-    [minDate, maxDate]
+    [minDate, maxDate],
   );
   const hourData = useMemo(() => getHours(isOnlyHour ? 12 : 24), []);
   const minData = useMemo(() => getMinutes(minuteInterval), []);
 
   const setupData = () => {
-    const componentData: {[key: string]: DateObject} = {
+    const componentData: { [key: string]: DateObject } = {
       DD: {
         name: 'day',
         data: dayData,
@@ -90,8 +89,8 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
         name: 'year',
         data: yearData,
       },
-      HH: {name: 'hour', data: hourData},
-      mm: {name: 'min', data: minData},
+      HH: { name: 'hour', data: hourData },
+      mm: { name: 'min', data: minData },
     };
 
     const initialData = formatParts.map(part => {
@@ -105,7 +104,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
     });
 
     if (isOnlyHour) {
-      initialData.push({name: 'timeMode', data: timeMode});
+      initialData.push({ name: 'timeMode', data: timeMode });
     }
 
     setData(initialData);
@@ -131,7 +130,7 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
       newDate.month - 1,
       newDate.day,
       newDate.hour,
-      newDate.min
+      newDate.min,
     );
 
     if (
@@ -156,23 +155,12 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
   };
 
   return (
-    <View
-      onLayout={onLayout}
-      style={[
-        style,
-        styles.datePicker,
-        {
-          height:
-            arrayLabelTime.length > 0
-              ? itemSize * 5 + scaleSize(20) //date label height
-              : itemSize * 5,
-        },
-      ]}>
+    <View onLayout={onLayout} style={[style, styles.datePicker]}>
       {data.map((dataItem, index) => {
         return (
           <View key={`${dataItem.name}_${index}`}>
             {arrayLabelTime[index] && (
-              <View style={{alignItems: 'center', marginBottom: Spacing.S}}>
+              <View style={styles.dateTimeContainer}>
                 <Text typography="action_s_bold">{arrayLabelTime[index]}</Text>
               </View>
             )}
@@ -196,5 +184,5 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
   );
 };
 
-export type {DateTimePickerProps};
-export {DateTimePicker};
+export type { DateTimePickerProps };
+export { DateTimePicker };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/date-picker",
-    "version": "0.150.2-beta.3",
+    "version": "0.150.2-beta.30",
     "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: {
@@ -10,7 +10,6 @@ export default StyleSheet.create({
   wheelPicker: {
     borderWidth: 1,
     borderRadius: Radius.S,
-    flex: 1,
   },
   overlay: {
     position: 'absolute',
@@ -19,7 +18,6 @@ export default StyleSheet.create({
     right: 0,
     left: 0,
     justifyContent: 'center',
-    zIndex: -1,
   },
   selectedItem: {
     backgroundColor: Colors.blue_10,
@@ -29,4 +27,5 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+  dateTimeContainer: { alignItems: 'center', marginBottom: Spacing.S },
 });

package/utils.ts

@@ -1,6 +1,4 @@
-import { scaleSize } from '@momo-kits/foundation';
-
-const itemSize = scaleSize(42);
+const itemSize = 42;
 
 const paddingNum = (num: number) => {
   return num > 9 ? String(num) : `0${num}`;