@momo-kits/date-picker 0.73.3-beta.5 → 0.74.2-react-native.1

package/WheelPicker.tsx

@@ -0,0 +1,207 @@
+import React, {FC, useCallback, useContext, useEffect, useRef} from 'react';
+import {Animated, FlatList, View} from 'react-native';
+import styles from './styles';
+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,
+  style,
+  onChange,
+  selectedData,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const flatListRef = useRef<FlatList>(null);
+  const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
+  const active = useRef(0);
+  const scrollListener = useRef('0');
+  const itemSize = 42;
+
+  useEffect(() => {
+    scrollListener.current && clearInterval(Number(scrollListener.current));
+    scrollListener.current = scrollAnimatedValue.addListener(
+      ({value}) => (active.current = value),
+    );
+
+    return () => {
+      clearInterval(Number(scrollListener.current));
+    };
+  }, [scrollAnimatedValue]);
+
+  useEffect(() => {
+    debouncedScrollEnd();
+    return () => {
+      debouncedScrollEnd.cancel();
+    };
+  }, [data.length]);
+
+  const findClosestIndex = (array: string[], value: string) => {
+    let closest = array.reduce((a, b) => {
+      let aDiff = Math.abs(Number(a) - Number(value));
+      let bDiff = Math.abs(Number(b) - Number(value));
+
+      if (aDiff == bDiff) {
+        return a < b ? a : b;
+      } else {
+        return bDiff < aDiff ? b : a;
+      }
+    });
+
+    return array.indexOf(closest);
+  };
+
+  const debouncedScrollEnd = debounce(() => {
+    let selectedIndex = data.indexOf(selectedData);
+
+    if (selectedIndex === -1) {
+      selectedIndex = findClosestIndex(data, selectedData);
+    }
+
+    if (selectedIndex < 2) {
+      selectedIndex = 2;
+    }
+    if (selectedIndex > data.length - 3) {
+      selectedIndex = data.length - 3;
+    }
+    flatListRef.current?.scrollToIndex({
+      index: selectedIndex - 2,
+      animated: true,
+    });
+  }, 100);
+
+  const onMomentumScrollEnd = () => {
+    let index = Math.round(active.current / itemSize);
+    onChange?.(name, data[index + 2]);
+  };
+
+  const ItemComponent: FC<any> = React.memo(props => {
+    const {item, opacity, scale} = props;
+
+    return (
+      <Animated.View
+        style={[
+          styles.wheelItem,
+          {
+            opacity,
+          },
+        ]}>
+        <Animated.Text
+          style={{
+            fontFamily: `${theme.font}-Semibold`,
+            transform: [{scale}],
+            fontSize: scaleSize(15),
+            lineHeight: scaleSize(22),
+          }}>
+          {item}
+        </Animated.Text>
+      </Animated.View>
+    );
+  });
+
+  const renderItem = useCallback(({item, index}) => {
+    const opacityAnimated = (a: number, b: number, c: 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 if (center + 1 === index || center - 1 === index) {
+              return b;
+            } else {
+              return c;
+            }
+          }),
+        ],
+      };
+    };
+
+    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))}
+      />
+    );
+  }, []);
+
+  const renderOverlay = () => {
+    return (
+      <View style={styles.overlay}>
+        <View style={styles.selectedItem} />
+      </View>
+    );
+  };
+
+  const getItemLayout = (
+    data: unknown[] | undefined | null,
+    index: number,
+  ) => ({
+    length: itemSize,
+    offset: itemSize * index,
+    index,
+  });
+
+  const onScrollToIndexFailed = (error: any) => {
+    console.warn('FlatList scrollToIndex failed', error);
+  };
+
+  return (
+    <View
+      key={`Wheel picker ${name}`}
+      style={[
+        style,
+        styles.wheelPicker,
+        {
+          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}>
+      <AnimatedFlatList
+        windowSize={15}
+        initialNumToRender={15}
+        maxToRenderPerBatch={15}
+        pagingEnabled
+        snapToInterval={itemSize}
+        decelerationRate={'fast'}
+        getItemLayout={getItemLayout}
+        onScrollToIndexFailed={onScrollToIndexFailed}
+        onScroll={Animated.event(
+          [{nativeEvent: {contentOffset: {y: scrollAnimatedValue}}}],
+          {
+            useNativeDriver: true,
+          },
+        )}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        ref={flatListRef}
+        keyExtractor={(item, index) => `Wheel picker item ${item}-${index}`}
+        showsVerticalScrollIndicator={false}
+        data={data}
+        renderItem={renderItem}
+      />
+      {renderOverlay()}
+    </View>
+  );
+};
+
+export default WheelPicker;

package/index.tsx

@@ -0,0 +1,148 @@
+import React, {FC, useEffect, useState} from 'react';
+import {Dimensions, LayoutChangeEvent, View} from 'react-native';
+import {Spacing} from '@momo-kits/foundation';
+import WheelPicker from './WheelPicker';
+import {
+  getDaysInMonth,
+  getHours,
+  getMinutes,
+  getMonths,
+  getYears,
+  timeMode,
+} from './utils';
+import {DateObject, DateTimePickerProps, PickerDataObject} from './types';
+import styles from './styles';
+
+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 = minDateDefault,
+  maxDate = maxDateDefault,
+}) => {
+  const [data, setData] = useState<DateObject[]>([]);
+  let [currentDate, setCurrentDate] = useState<PickerDataObject>({
+    day: selectedValue.getDate(),
+    month: selectedValue.getMonth() + 1,
+    year: selectedValue.getFullYear(),
+    hour: selectedValue.getHours(),
+    min: selectedValue.getMinutes(),
+  });
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
+
+  useEffect(() => {
+    setupData();
+    return () => {};
+  }, [selectedValue, currentDate]);
+
+  const setupData = () => {
+    const formatParts = format.split(/[^A-Za-z]+/);
+    const isOnlyHour = formatParts.length === 1 && formatParts[0] === 'HH';
+
+    const componentData: {[key: string]: DateObject} = {
+      DD: {
+        name: 'day',
+        data: getDaysInMonth(
+          +currentDate.year,
+          +currentDate.month,
+          minDate,
+          maxDate,
+        ),
+      },
+      MM: {
+        name: 'month',
+        data: getMonths(minDate, maxDate, +currentDate.year),
+      },
+      YYYY: {
+        name: 'year',
+        data: getYears(minDate, maxDate),
+      },
+      HH: {name: 'hour', data: getHours(isOnlyHour ? 12 : 24)},
+      mm: {name: 'min', data: getMinutes(minuteInterval)},
+    };
+
+    const initialData = formatParts.map(part => {
+      const component = componentData[part];
+      if (!component) {
+        throw new Error(`Invalid format component: ${part}`);
+      }
+      return {
+        ...component,
+      };
+    });
+
+    if (isOnlyHour) {
+      initialData.push({name: 'timeMode', data: timeMode});
+    }
+
+    setData(initialData);
+  };
+
+  const numOfColumns = data.length;
+
+  const onPickerChange = (name: string, dataItem: string) => {
+    const newDate = {
+      ...currentDate,
+      [name]: dataItem,
+    };
+
+    if (name === 'month') {
+      const finalDay = new Date(newDate.year, newDate.month, 0).getDate();
+      if (newDate.day > finalDay) {
+        newDate.day = finalDay;
+      }
+    }
+
+    onChange?.(
+      new Date(
+        newDate.year,
+        newDate.month - 1,
+        newDate.day,
+        newDate.hour,
+        newDate.min,
+      ),
+    );
+
+    setCurrentDate(newDate);
+  };
+
+  const paddingArray = ['', ''];
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    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>
+  );
+};
+
+export {DateTimePicker};

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@momo-kits/date-picker",
-    "version": "0.73.3-beta.5",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "react-native": ">=0.55"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -25,5 +25,4 @@ npm publish --tag beta --access=public
 cd ..
 rm -rf dist
 
-
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/date-picker new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/date-picker"}'
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/date-picker new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/date-picker`"}'

package/styles.ts

@@ -0,0 +1,34 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  wheelItem: {
+    height: 42,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wheelPicker: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    justifyContent: 'center',
+    zIndex: -1,
+  },
+  selectedItem: {
+    height: 42,
+    backgroundColor: Colors.blue_10,
+  },
+  datePicker: {
+    height: 210,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});

package/types.ts

@@ -0,0 +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;
+};

package/utils.ts

@@ -0,0 +1,112 @@
+const paddingNum = (num: number) => {
+  return num > 9 ? String(num) : `0${num}`;
+};
+const getDaysInMonth = (
+  year: number,
+  month: number,
+  minDate: Date,
+  maxDate: Date,
+) => {
+  const daysInMonth = new Date(year, month, 0).getDate();
+
+  let startDay = 1;
+  let endDay = daysInMonth;
+
+  if (year === minDate.getFullYear() && month === minDate.getMonth()) {
+    startDay = minDate.getDate();
+  }
+  if (year === maxDate.getFullYear() && month === maxDate.getMonth()) {
+    endDay = maxDate.getDate();
+  }
+
+  const days = [];
+  for (let day = startDay; day <= endDay; day++) {
+    days.push(paddingNum(day));
+  }
+
+  return days;
+};
+
+const getMonths = (minDate: Date, maxDate: Date, currentYear: number) => {
+  let startMonth = 1;
+  let endMonth = 12;
+
+  if (currentYear === minDate.getFullYear()) {
+    startMonth = minDate.getMonth();
+  }
+  if (currentYear === maxDate.getFullYear()) {
+    endMonth = maxDate.getMonth();
+  }
+
+  const months = [];
+  for (let month = startMonth; month <= endMonth; month++) {
+    months.push(paddingNum(month));
+  }
+
+  return months;
+};
+
+const getYears = (minDate: Date, maxDate: Date) => {
+  const startYear = minDate.getFullYear();
+  const endYear = maxDate.getFullYear();
+  const years = [];
+
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(year.toString());
+  }
+  return years;
+};
+
+const getHours = (hourMode: 12 | 24) => {
+  const hours = [];
+  for (let i = 0; i < hourMode; i++) {
+    let hour = i;
+    if (hourMode === 12) {
+      hour = i + 1;
+    }
+    hours.push(paddingNum(hour));
+  }
+  return hours;
+};
+
+const getMinutes = (interval: number) => {
+  const minutes = [];
+  for (let min = 0; min < 60; min += interval) {
+    minutes.push(paddingNum(min));
+  }
+
+  return minutes;
+};
+
+const timeMode = ['', '', 'AM', 'PM', '', ''];
+
+function debounce<T extends (...args: any[]) => any>(func: T, delay: number) {
+  let timer: NodeJS.Timeout;
+
+  const debounced = function (
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ) {
+    clearTimeout(timer);
+    const context = this;
+    timer = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+
+  debounced.cancel = () => {
+    clearTimeout(timer);
+  };
+
+  return debounced;
+}
+
+export {
+  getDaysInMonth,
+  getMonths,
+  getYears,
+  getHours,
+  getMinutes,
+  timeMode,
+  debounce,
+};