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

package/src/libs/Collapse/types.ts

@@ -1,84 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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

@@ -1,16 +0,0 @@
-{
-    "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

@@ -1,17 +0,0 @@
-#!/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

@@ -1,31 +0,0 @@
-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

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