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

package/src/libs/Steps/utils.ts

@@ -0,0 +1,175 @@
+import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+import {Step} from '@momo-kits/step';
+import {useContext} from 'react';
+
+type StepStatus = 'incomplete' | 'current' | 'completed' | 'error' | 'disable';
+type StepTypo = {
+  typography: Typography;
+  color: string;
+};
+
+const getStatus = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean
+): StepStatus => {
+  if (disabled) return 'disable';
+  if (error) return 'error';
+  if (activeIndex === currentIndex) return 'current';
+  if (activeIndex > currentIndex) return 'completed';
+  return 'incomplete';
+};
+const checkSizeAndStepType = (
+  stepType?: 'vertical' | 'horizontal',
+  size?: 'small' | 'large'
+) => {
+  return (
+    stepType === 'horizontal' || (stepType === 'vertical' && size === 'small')
+  );
+};
+
+const getTypoTitle = (
+  status: StepStatus,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+): Typography => {
+  const defaultTypo =
+    !!size && stepType === 'vertical'
+      ? 'body_default_regular'
+      : 'description_default_regular';
+
+  switch (status) {
+    case 'current':
+    case 'error': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'header_xs_semibold'
+        : 'header_s_semibold';
+    }
+    case 'incomplete':
+    case 'completed': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'description_default_regular'
+        : 'body_default_regular';
+    }
+    default: {
+      return defaultTypo;
+    }
+  }
+};
+
+export const GetStepTypo = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const status = getStatus(activeIndex, currentIndex, error);
+
+  let title: StepTypo = {
+    color: theme.colors.text.default,
+    typography: getTypoTitle(status, size, stepType),
+  };
+  let description: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: !!size
+      ? 'description_xs_regular'
+      : 'description_default_regular',
+  };
+  let time: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: 'description_xs_regular',
+  };
+
+  switch (status) {
+    case 'current': {
+      title.color = theme.colors.primary;
+      break;
+    }
+    case 'error': {
+      title.color = theme.colors.error.primary;
+      break;
+    }
+  }
+
+  return {title, description, time};
+};
+
+export const GetStepColor = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  length: number = 1,
+  disabled?: boolean
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const DEFAULT_LINE_COLOR = theme.colors.background.default;
+  const COMPLETED_LINE_COLOR = theme.colors.primary + '33';
+
+  let backgroundColor = Colors.black_06;
+  let borderColor = theme.colors.border.default;
+  let lineColorLeft = DEFAULT_LINE_COLOR;
+  let lineColorRight = DEFAULT_LINE_COLOR;
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (activeIndex > currentIndex) {
+    lineColorLeft = COMPLETED_LINE_COLOR;
+    lineColorRight = COMPLETED_LINE_COLOR;
+  }
+  if (activeIndex === currentIndex) {
+    lineColorLeft = COMPLETED_LINE_COLOR;
+  }
+
+  if (currentIndex === 0) {
+    lineColorLeft = 'transparent';
+  }
+  if (currentIndex === length - 1) {
+    lineColorRight = 'transparent';
+  }
+
+  switch (status) {
+    case 'current': {
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
+      break;
+    }
+
+    case 'completed': {
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
+      break;
+    }
+
+    case 'error': {
+      backgroundColor = theme.colors.error.primary;
+      borderColor = theme.colors.error.container;
+      break;
+    }
+
+    case 'disable': {
+      backgroundColor = Colors.pink_08;
+      borderColor = Colors.pink_10;
+      break;
+    }
+  }
+
+  return {backgroundColor, borderColor, lineColorLeft, lineColorRight, status};
+};
+
+export const getOnPressCompleted = (
+  item: Step,
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean,
+  onPress?: (item: Step, index: number) => void
+) => {
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (status === 'completed' && onPress) {
+    return () => onPress(item, currentIndex);
+  }
+  return undefined;
+};

package/src/libs/SuggestAction/SuggestActionView.tsx

@@ -0,0 +1,124 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {Animated, Easing, TouchableOpacity} from 'react-native';
+import {SuggestActionProps, SuggestActionRef} from './types';
+import {
+  ApplicationContext,
+  Button,
+  Icon,
+  Image,
+  Shadow,
+  Text,
+} from '@momo-kits/foundation';
+import styles from './styles';
+
+const DURATION = 200;
+
+const SuggestAction: ForwardRefRenderFunction<
+  SuggestActionRef,
+  SuggestActionProps
+> = (
+  {
+    image,
+    onPressButton = () => {},
+    onClose,
+    bottom = 72,
+    message = 'Message',
+    buttonTitle = 'Button',
+    boldMessage,
+  },
+  ref
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useImperativeHandle(ref, () => ({show}));
+  const show = () => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: DURATION,
+      useNativeDriver: false,
+      easing: Easing.linear,
+    }).start();
+  };
+  const hide = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: DURATION,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const handleClose = () => {
+    onClose?.();
+    hide();
+  };
+
+  const handleButtonPress = () => {
+    onPressButton?.();
+    hide();
+  };
+
+  const renderMessage = () => {
+    if (!!boldMessage) {
+      let splitMessage = [];
+      let index = message.toLowerCase().indexOf(boldMessage.toLowerCase());
+      if (index !== -1) {
+        splitMessage = [
+          message.substring(0, index),
+          boldMessage,
+          message.substring(index + boldMessage.length),
+        ];
+
+        return (
+          <Text style={styles.content} typography={'body_default_regular'}>
+            {splitMessage[0]}
+            <Text typography={'action_s_bold'}>{splitMessage[1]}</Text>
+            {splitMessage[2]}
+          </Text>
+        );
+      }
+    }
+
+    return (
+      <Text style={styles.content} typography={'description_default_regular'}>
+        {message}
+      </Text>
+    );
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.background.surface,
+          opacity,
+          bottom,
+        },
+        Shadow.Light,
+      ]}>
+      {!!image && <Image source={{uri: image}} style={styles.image} />}
+      {renderMessage()}
+      <Button
+        type="tonal"
+        title={buttonTitle}
+        onPress={handleButtonPress}
+        size={'small'}
+        full={false}
+      />
+      <TouchableOpacity style={styles.closeIcon} onPress={handleClose}>
+        <Icon source={'navigation_close'} />
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+export default forwardRef(SuggestAction);
+export type {SuggestActionRef, SuggestActionProps};

package/src/libs/SuggestAction/index.tsx

@@ -0,0 +1,3 @@
+import SuggestAction from './SuggestActionView';
+
+export {SuggestAction};

package/src/libs/SuggestAction/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/suggest-action",
+    "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/SuggestAction/publish.sh

@@ -0,0 +1,16 @@
+#!/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/SuggestAction/styles.ts

@@ -0,0 +1,30 @@
+import {Dimensions, StyleSheet} from 'react-native';
+import {Radius, Spacing} from '@momo-kits/foundation';
+
+const screenWidth = Dimensions.get('window').width;
+
+export default StyleSheet.create({
+  image: {
+    width: 32,
+    height: 32,
+    borderRadius: Radius.XS,
+    marginRight: Spacing.S,
+  },
+  container: {
+    flexDirection: 'row',
+    width: screenWidth - Spacing.M * 2,
+    marginHorizontal: Spacing.M,
+    padding: Spacing.M,
+    borderRadius: Radius.S,
+    alignItems: 'center',
+    position: 'absolute',
+    zIndex: 10,
+  },
+  content: {
+    flex: 1,
+    marginRight: Spacing.M,
+  },
+  closeIcon: {
+    marginLeft: Spacing.S,
+  },
+});

package/src/libs/SuggestAction/types.ts

@@ -0,0 +1,36 @@
+export type SuggestActionProps = {
+  /**
+   * Optional. A callback function that is triggered when the action suggestion is closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * Optional. A callback function that is triggered when the action button is pressed.
+   */
+  onPressButton?: () => void;
+
+  /**
+   * The image associated with the action, typically displayed as part of the suggestion.
+   */
+  image?: string;
+
+  /**
+   * Optional. Specifies the bottom margin for the component. Useful for positioning or spacing within a layout.
+   */
+  bottom?: number;
+
+  message: string;
+  buttonTitle: string;
+  boldMessage?: string;
+};
+
+/**
+ * A reference type for the SuggestAction component.
+ * Allows external control over the visibility of the SuggestAction component.
+ */
+export type SuggestActionRef = {
+  /**
+   * A method to show the SuggestAction component. Can be called to display the component when needed.
+   */
+  show: () => void;
+};

package/src/libs/Swipe/SwipeView.tsx

@@ -0,0 +1,151 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {Animated, Dimensions, TouchableHighlight, View} from 'react-native';
+import {Swipeable} from 'react-native-gesture-handler';
+import {ApplicationContext, Colors, Icon, Text} from '@momo-kits/foundation';
+import {SwipeableRef, SwipeAction, SwipeProps} from './types';
+import styles from './styles';
+
+const ACTION_WIDTH = 56;
+
+export const Swipe: ForwardRefRenderFunction<SwipeableRef, SwipeProps> = (
+  {children, leftActions, rightActions, height = 56, itemRadius, ...props},
+  ref
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const screenWidth = Dimensions.get('window').width;
+  const swipeableRef = useRef<Swipeable>(null);
+
+  const renderActionItem = (
+    action: SwipeAction,
+    index: number,
+    length: number,
+    direction: 'left' | 'right',
+    dragX: Animated.AnimatedInterpolation<number | string>
+  ) => {
+    const {
+      label,
+      icon,
+      onPress,
+      backgroundColor = theme.colors.highlight.primary,
+    } = action;
+
+    let inputRange = [0, ACTION_WIDTH * length];
+    let outputRange = [-ACTION_WIDTH * (index + 1), 0];
+
+    let zIndex = -index;
+
+    if (direction === 'right') {
+      inputRange = [-ACTION_WIDTH * length, 0];
+      outputRange = [0, ACTION_WIDTH * (length - index)];
+      zIndex = index;
+    }
+
+    const translateX = dragX.interpolate({
+      inputRange,
+      outputRange,
+      extrapolate: 'clamp',
+    });
+
+    return (
+      <TouchableHighlight
+        key={`swipe-action-${direction}-${index}`}
+        underlayColor={Colors.black_01}
+        activeOpacity={0.8}
+        style={{zIndex: zIndex}}
+        onPress={onPress}>
+        <Animated.View
+          style={[
+            styles.action,
+            {
+              backgroundColor,
+              transform: [{translateX}],
+              width: ACTION_WIDTH,
+              borderRadius: itemRadius,
+            },
+          ]}>
+          {!!icon && <Icon source={icon} color={Colors.black_01} />}
+          <Text
+            style={styles.textCenter}
+            numberOfLines={1}
+            color={Colors.black_01}
+            typography={'label_s_medium'}>
+            {label}
+          </Text>
+        </Animated.View>
+      </TouchableHighlight>
+    );
+  };
+
+  const renderActions = (
+    actions: SwipeAction[] = [],
+    direction: 'left' | 'right',
+    dragX: Animated.AnimatedInterpolation<number | string>
+  ) => {
+    let overlayPosition: {[key: string]: number} = {left: 0};
+    if (direction === 'right') {
+      overlayPosition = {right: 0};
+    }
+    return (
+      <View style={styles.row}>
+        <View
+          style={[
+            {
+              width: screenWidth,
+              backgroundColor: theme.colors.background.surface,
+              height: '100%',
+              zIndex: -10,
+              position: 'absolute',
+            },
+            overlayPosition,
+          ]}
+        />
+        {actions?.map((item, index) => {
+          //maximum 3 actions
+          if (index < 3) {
+            return renderActionItem(
+              item,
+              index,
+              actions?.length,
+              direction,
+              dragX
+            );
+          }
+        })}
+      </View>
+    );
+  };
+
+  useImperativeHandle(ref, () => ({
+    openLeft: () => swipeableRef?.current?.openLeft(),
+    openRight: () => swipeableRef?.current?.openRight(),
+    close: () => swipeableRef?.current?.close(),
+  }));
+
+  return (
+    <Swipeable
+      {...props}
+      containerStyle={[
+        styles.container,
+        {
+          height,
+        },
+      ]}
+      ref={swipeableRef}
+      renderRightActions={(progressAnimatedValue, dragAnimatedValue) =>
+        renderActions(rightActions, 'right', dragAnimatedValue)
+      }
+      renderLeftActions={(progressAnimatedValue, dragAnimatedValue) =>
+        renderActions(leftActions, 'left', dragAnimatedValue)
+      }>
+      {children}
+    </Swipeable>
+  );
+};
+
+export default forwardRef(Swipe);

package/src/libs/Swipe/index.tsx

@@ -0,0 +1,5 @@
+import Swipe from './SwipeView';
+import {SwipeableRef, SwipeAction, SwipeProps} from './types';
+
+export {Swipe};
+export type {SwipeableRef, SwipeAction, SwipeProps};

package/src/libs/Swipe/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/swipe",
+    "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/Swipe/publish.sh

@@ -0,0 +1,16 @@
+#!/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/Swipe/styles.ts

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  action: {
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  container: {width: '100%'},
+});