@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/libs/Collapse/types.ts

@@ -0,0 +1,84 @@
+import {TagProps} from '@momo-kits/foundation';
+import React, {Dispatch, SetStateAction} from 'react';
+
+export type CollapseImageSize = 24 | 32 | 40;
+
+export type CollapseProps = {
+  /**
+   * The title represents what is being collapsed or expanded. It is usually a summary or
+   * a brief heading corresponding to the detailed content that gets revealed.
+   */
+  title: string;
+
+  /**
+   * Optional. A more detailed explanation or continuation of the title. This text provides
+   * additional context or information, which is particularly useful when the collapsed content
+   * is not immediately visible or requires extra explanation.
+   */
+  description?: string;
+
+  /**
+   * Optional. The URL or local file path of an image to be displayed. This feature is often
+   * used to provide a visual context or decoration, enhancing user engagement or understanding
+   * of the information being toggled.
+   */
+  image?: string;
+
+  /**
+   * Optional. A callback function that is triggered when the collapse component is pressed or
+   * selected. This function is typically used to toggle the view state of the collapsible content.
+   * Add isExpanded as a parameter to know the current state of the collapse, for tracking.
+   */
+  onPress?: (isExpanded: boolean) => void;
+
+  /**
+   * Optional. If `true`, a border is displayed around the collapse component, visually separating
+   * it from other UI elements. This is particularly useful in densely packed interfaces to delineate
+   * between different sections.
+   * Defaults to `false` if not provided.
+   */
+  showBorder?: boolean;
+
+  imageSize?: CollapseImageSize;
+
+  subTitle?: string;
+  tagProps?: TagProps;
+  scrollEnabled?: boolean;
+  scrollContentMaxHeight?: number;
+  titleSize?: 'small' | 'medium' | 'large';
+  useBackgroundCollapseButton?: boolean;
+
+  headerAlign: 'flex-start' | 'flex-end' | 'center';
+
+  expandDefault?: boolean;
+
+  children?: React.ReactNode;
+
+  /**
+   * Optional. If `true`, the collapse component will not use Animated.View for the transition
+   * effect when expanding or collapsing. This is useful when the component is nested within
+   * another collapsible component that already has an animated transition effect.
+   * Can be use to fix the iseue: If WebView is the children of Collapse, the WebView will be blank when collapse is expanded.
+   * Defaults to `false` if not provided.
+   */
+  disabledAnimated?: boolean;
+
+  accessibilityLabel?: string;
+
+  nestedScrollEnabled?: boolean;
+
+  /**
+   * Optional. Background color of the collapse.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. Color of the title text.
+   */
+  titleColor?: string;
+};
+
+export type CollapseHandle = {
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  expanded: boolean;
+};

package/src/libs/DateTimePicker/WheelPicker.tsx

@@ -0,0 +1,163 @@
+import React, {
+  FC,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  Animated,
+  FlatList,
+  ListRenderItemInfo,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  View,
+} from 'react-native';
+import styles from './styles';
+import { ApplicationContext } from '@momo-kits/foundation';
+import { WheelPickerProps } from './types';
+import { debounce, itemSize } from './utils';
+import WheelPickerItem from './WheelPickerItem';
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+const WheelPicker: FC<WheelPickerProps> = ({
+  name,
+  data,
+  style,
+  onChange,
+  selectedData,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const flatListRef = useRef<any>(null);
+  const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
+  const canMomentum = useRef(false);
+  const initItemNum = 15;
+
+  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 renderItem = useCallback(({ item, index }: ListRenderItemInfo<any>) => {
+    return (
+      <WheelPickerItem
+        item={item}
+        index={index}
+        scrollAnimatedValue={scrollAnimatedValue}
+        itemSize={itemSize}
+      />
+    );
+  }, []);
+
+  const renderOverlay = () => {
+    return (
+      <View style={styles.overlay}>
+        <View style={[styles.selectedItem, { height: itemSize }]} />
+      </View>
+    );
+  };
+
+  const getItemLayout = (
+    _data: ArrayLike<unknown> | null | undefined,
+    index: number,
+  ) => ({
+    length: itemSize,
+    offset: itemSize * index,
+    index,
+  });
+
+  const onMomentumScrollBegin = () => {
+    canMomentum.current = true;
+  };
+
+  const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (canMomentum.current) {
+      let index = Math.round(e.nativeEvent.contentOffset.y / itemSize);
+      onChange?.(name, data[index + 2]);
+    }
+    canMomentum.current = false;
+  };
+
+  const onScrollToIndexFailed = (error: any) => {
+    console.warn('FlatList scrollToIndex failed', error);
+  };
+
+  return (
+    <View
+      style={[
+        style,
+        styles.wheelPicker,
+        {
+          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.surface,
+          maxHeight: itemSize * 5,
+        },
+      ]}
+    >
+      {renderOverlay()}
+      <AnimatedFlatList
+        windowSize={7}
+        initialNumToRender={initItemNum}
+        maxToRenderPerBatch={initItemNum}
+        snapToInterval={itemSize}
+        snapToOffsets={data.map((_, index) => index * itemSize)}
+        keyExtractor={(item, index) => `Wheel picker item ${item}-${index}`}
+        decelerationRate={'fast'}
+        getItemLayout={getItemLayout}
+        onScrollToIndexFailed={onScrollToIndexFailed}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }],
+          {
+            useNativeDriver: true,
+          },
+        )}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        ref={flatListRef}
+        showsVerticalScrollIndicator={false}
+        data={data}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+};
+
+export default memo(WheelPicker);

package/src/libs/DateTimePicker/WheelPickerItem.tsx

@@ -0,0 +1,58 @@
+import React, { FC, memo, useContext } from 'react';
+import { Animated } from 'react-native';
+import styles from './styles';
+import { ApplicationContext } from '@momo-kits/foundation';
+import { WheelPickerItemProps } from './types';
+
+const WheelPickerItem: FC<WheelPickerItemProps> = ({
+  item,
+  index,
+  scrollAnimatedValue,
+  itemSize,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const position = Animated.divide(scrollAnimatedValue, itemSize);
+  const distance = Animated.subtract(index, position);
+  const opacity =
+    distance.interpolate({
+      inputRange: [0, 1, 2, 3, 4],
+      outputRange: [0.4, 0.8, 1, 0.8, 0.4],
+      extrapolate: 'clamp',
+    }) || 1;
+  const scale =
+    distance.interpolate({
+      inputRange: [0, 1, 2, 3, 4],
+      outputRange: [0.87, 0.87, 1, 0.87, 0.87],
+      extrapolate: 'clamp',
+    }) || 1;
+
+  return (
+    <Animated.View
+      style={[
+        styles.wheelItem,
+        {
+          opacity,
+          height: itemSize,
+        },
+      ]}
+    >
+      <Animated.Text
+        allowFontScaling={false}
+        style={{
+          fontFamily: `${theme.font}-Semibold`,
+          transform: [
+            {
+              scale,
+            },
+          ],
+          fontSize: 16,
+          lineHeight: 22,
+        }}
+      >
+        {item}
+      </Animated.Text>
+    </Animated.View>
+  );
+};
+
+export default memo(WheelPickerItem);

package/src/libs/DateTimePicker/index.tsx

@@ -0,0 +1,188 @@
+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,
+  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,
+  arrayLabelTime = [],
+  style,
+}) => {
+  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();
+  }, [currentDate]);
+
+  useEffect(() => {
+    let initData = selectedValue;
+
+    if (selectedValue < minDate) {
+      initData = minDate;
+    } else if (selectedValue > maxDate) {
+      initData = maxDate;
+    }
+
+    onChange?.(initData);
+  }, []);
+
+  const formatParts = format.split(/[^A-Za-z]+/);
+  const isOnlyHour = formatParts.length === 1 && formatParts[0] === 'HH';
+  const dayData = useMemo(
+    () =>
+      getDaysInMonth(+currentDate.year, +currentDate.month, minDate, maxDate),
+    [currentDate.year, currentDate.month, minDate, maxDate],
+  );
+  const monthData = useMemo(
+    () => getMonths(minDate, maxDate, +currentDate.year),
+    [currentDate.year, minDate, maxDate],
+  );
+  const yearData = useMemo(
+    () => getYears(minDate, maxDate),
+    [minDate, maxDate],
+  );
+  const hourData = useMemo(() => getHours(isOnlyHour ? 12 : 24), []);
+  const minData = useMemo(() => getMinutes(minuteInterval), []);
+
+  const setupData = () => {
+    const componentData: { [key: string]: DateObject } = {
+      DD: {
+        name: 'day',
+        data: dayData,
+      },
+      MM: {
+        name: 'month',
+        data: monthData,
+      },
+      YYYY: {
+        name: 'year',
+        data: yearData,
+      },
+      HH: { name: 'hour', data: hourData },
+      mm: { name: 'min', data: minData },
+    };
+
+    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;
+      }
+    }
+
+    const changedDate = new Date(
+      newDate.year,
+      newDate.month - 1,
+      newDate.day,
+      newDate.hour,
+      newDate.min,
+    );
+
+    if (
+      JSON.stringify(newDate.valueOf()) !==
+      JSON.stringify(currentDate.valueOf())
+    ) {
+      if (changedDate < minDate) {
+        onChange?.(minDate);
+      } else if (changedDate > maxDate) {
+        onChange?.(maxDate);
+      } else onChange?.(changedDate);
+    }
+    setCurrentDate(newDate);
+  };
+
+  const paddingArray = ['', ''];
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    if (containerWidth !== e.nativeEvent.layout.width) {
+      setContainerWidth(e.nativeEvent.layout.width);
+    }
+  };
+
+  return (
+    <View onLayout={onLayout} style={[style, styles.datePicker]}>
+      {data.map((dataItem, index) => {
+        return (
+          <View key={`${dataItem.name}_${index}`}>
+            {arrayLabelTime[index] && (
+              <View style={styles.dateTimeContainer}>
+                <Text typography="action_s_bold">{arrayLabelTime[index]}</Text>
+              </View>
+            )}
+            <WheelPicker
+              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/src/libs/DateTimePicker/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/date-picker",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/src/libs/DateTimePicker/publish.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+

package/src/libs/DateTimePicker/styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  wheelItem: {
+    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',
+  },
+  selectedItem: {
+    backgroundColor: Colors.blue_10,
+  },
+  datePicker: {
+    overflow: 'hidden',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  dateTimeContainer: { alignItems: 'center', marginBottom: Spacing.S },
+});

package/src/libs/DateTimePicker/types.ts

@@ -0,0 +1,102 @@
+import {Animated, ViewStyle} from 'react-native';
+import AnimatedValue = Animated.AnimatedValue;
+
+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;
+  /**
+   * Optional. Label for Time
+   */
+  arrayLabelTime?: string[];
+
+  style?: ViewStyle;
+};
+
+/**
+ * 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;
+};
+
+export type WheelPickerItemProps = {
+  item: number;
+  index: number;
+  scrollAnimatedValue: AnimatedValue;
+  itemSize: number;
+};