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

package/src/libs/Slider/styles.ts

@@ -0,0 +1,36 @@
+import {I18nManager, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  controlsContainer: {
+    flexDirection: 'row',
+    justifyContent: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+    alignItems: 'center',
+  },
+  highThumbContainer: {
+    position: 'absolute',
+  },
+  railsContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  labelFixedContainer: {
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+  },
+  labelFloatingContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+  },
+  touchableArea: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  label: {
+    backgroundColor: Colors.black_01,
+    paddingVertical: Spacing.XXS,
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.XS,
+  },
+});

package/src/libs/Stepper/NumberView.tsx

@@ -0,0 +1,64 @@
+import React, { FC, useContext } from 'react';
+import { TextInput, View } from 'react-native';
+import { StepperValueProps } from './types';
+import { ApplicationContext, useScaleSize } from '@momo-kits/foundation';
+import styles from './styles';
+
+const NumberView: FC<StepperValueProps> = ({
+  value = 0,
+  size = 'large',
+  editable = false,
+  onValueChange,
+  disabled,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const scaledHeight28 = useScaleSize(28);
+  const scaledHeight24 = useScaleSize(24);
+  const scaledFontSize = useScaleSize(12);
+
+  const formattedNumber = (value: number) => {
+    if (isNaN(value)) {
+      return '0';
+    } else {
+      return value.toString();
+    }
+  };
+
+  const textColor = disabled
+    ? theme.colors.text.disable
+    : theme.colors.text.default;
+
+  const borderColor = disabled
+    ? theme.colors.border.disable
+    : theme.colors.border.default;
+  return (
+    <View
+      style={[
+        styles.numberViewBase,
+        size === 'large'
+          ? { minWidth: 32, height: scaledHeight28 }
+          : { minWidth: 28, height: scaledHeight24 },
+        { borderColor },
+      ]}
+    >
+      <TextInput
+        allowFontScaling={false}
+        editable={editable}
+        style={[
+          styles.numberViewInput,
+          { fontSize: scaledFontSize },
+          { color: textColor },
+        ]}
+        value={formattedNumber(value)}
+        onChangeText={onValueChange}
+        keyboardType={'number-pad'}
+        selectionColor={theme.colors.primary}
+        accessibilityLabel={`${componentId}|input`}
+        accessibilityState={{ disabled }}
+      />
+    </View>
+  );
+};
+
+export default NumberView;

package/src/libs/Stepper/StepperButton.tsx

@@ -0,0 +1,37 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity} from 'react-native';
+import styles from './styles';
+import {StepperButtonProps} from './types';
+import {ApplicationContext, Icon} from '@momo-kits/foundation';
+
+const StepperButton: FC<StepperButtonProps> = ({
+  disabled = false,
+  sign = '+',
+  size = 'large',
+  onPress,
+  componentId,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const sizeStyle = size === 'large' ? styles.button : styles.smallButton;
+  const buttonIcon =
+    sign === '-' ? '24_navigation_minus_circle' : '24_navigation_plus_circle';
+  const buttonColor = disabled
+    ? theme.colors.text.disable
+    : theme.colors.primary;
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={onPress}
+      style={[sizeStyle]}
+      accessibilityState={{disabled}}
+      accessibilityLabel={`${componentId}|${
+        sign === '+' ? 'plus' : 'minus'
+      }-touch`}>
+      <Icon size={22} color={buttonColor} source={buttonIcon} />
+    </TouchableOpacity>
+  );
+};
+
+export default StepperButton;

package/src/libs/Stepper/index.tsx

@@ -0,0 +1,139 @@
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import {View} from 'react-native';
+import StepperButton from './StepperButton';
+import {DisabledStatus, StepperProps} from './types';
+import styles from './styles';
+import NumberView from './NumberView';
+import {MiniAppContext, ScreenContext} from '@momo-kits/foundation';
+
+const Stepper = forwardRef(
+  (
+    {
+      size = 'large',
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      disabled = false,
+      step = 1,
+      editable = false,
+      onValueChange,
+      accessibilityLabel,
+    }: StepperProps,
+    ref
+  ) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const app = useContext<any>(MiniAppContext);
+    const screen = useContext<any>(ScreenContext);
+    const componentName = 'Stepper';
+
+    const componentId = useMemo(() => {
+      if (accessibilityLabel) {
+        return accessibilityLabel;
+      }
+      let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+      return id;
+    }, [componentName, accessibilityLabel, app, screen]);
+
+    useImperativeHandle(ref, () => ({
+      setStepValue: (value: React.SetStateAction<number>) => {
+        setValue(value);
+        _onValueChange(value.toString());
+      },
+    }));
+
+    useEffect(() => {
+      setValue(defaultValue);
+    }, [defaultValue]);
+
+    const onPlus = () => {
+      let newValue = value + step;
+      _onValueChange(newValue.toString());
+    };
+    const onMinus = () => {
+      let newValue = value - step;
+      _onValueChange(newValue.toString());
+    };
+    const _onValueChange = (num: string) => {
+      let newValue = parseInt(num);
+
+      if (isNaN(newValue)) {
+        newValue = 0;
+      }
+
+      if (newValue > max) {
+        newValue = max;
+      }
+
+      if (newValue < min) {
+        newValue = min;
+      }
+
+      setValue(newValue);
+      onValueChange?.(newValue);
+    };
+    const getViewDisabledStatus = () => {
+      let disabledStatus: DisabledStatus;
+
+      if (Array.isArray(disabled)) {
+        disabledStatus = {
+          plus: disabled[1],
+          minus: disabled[0],
+          number: disabled[0] && disabled[1],
+        };
+      } else {
+        disabledStatus = {
+          plus: disabled,
+          minus: disabled,
+          number: disabled,
+        };
+      }
+
+      if (value === min) {
+        disabledStatus.minus = true;
+      }
+      if (value === max) {
+        disabledStatus.plus = true;
+      }
+      return disabledStatus;
+    };
+
+    const viewStatus = getViewDisabledStatus();
+
+    return (
+      <View style={styles.stepper} accessibilityLabel={componentId}>
+        <StepperButton
+          onPress={onMinus}
+          sign={'-'}
+          size={size}
+          disabled={viewStatus.minus}
+          componentId={componentId}
+        />
+        <NumberView
+          onValueChange={_onValueChange}
+          size={size}
+          value={value}
+          disabled={viewStatus.number}
+          editable={editable}
+          componentId={componentId}
+        />
+        <StepperButton
+          onPress={onPlus}
+          size={size}
+          disabled={viewStatus.plus}
+          componentId={componentId}
+        />
+      </View>
+    );
+  }
+);
+
+export {Stepper};
+export type {StepperProps};

package/src/libs/Stepper/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/stepper",
+    "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/Stepper/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/Stepper/styles.ts

@@ -0,0 +1,44 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: Radius.XL,
+    backgroundColor: Colors.black_03,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  smallButton: {
+    width: 28,
+    height: 28,
+    borderRadius: Radius.L,
+    backgroundColor: Colors.black_03,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconWrapper: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  stepper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  numberViewBase: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: Spacing.S,
+  },
+  numberViewInput: {
+    paddingVertical: 0,
+    textAlign: 'center',
+  },
+});

package/src/libs/Stepper/types.ts

@@ -0,0 +1,154 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Properties for the StepperButton component, which represents the individual
+ * increment and decrement buttons in a stepper control.
+ */
+export type StepperButtonProps = {
+  /**
+   * Optional. If `true`, the button is disabled and not interactive.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Determines the button's function in the stepper, either increment ('+') or decrement ('-').
+   */
+  sign?: '+' | '-';
+
+  /**
+   * Optional. Specifies the size of the button. If not provided, a default size is used.
+   */
+  size?: 'large' | 'small';
+
+  /**
+   * A callback function that is triggered when the button is pressed.
+   */
+  onPress: () => void;
+
+  /**
+   * Optional. Assign accessibility label to the button for automated testing.
+   */
+  componentId: string;
+};
+
+/**
+ * Properties for the StepperValue component, which displays the current value
+ * within a stepper control and allows for direct input.
+ */
+export type StepperValueProps = {
+  /**
+   * The current numeric value displayed by the stepper.
+   */
+  value: number;
+
+  /**
+   * Optional. If `true`, the value display is disabled and not interactive.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional. Specifies the size of the value display. If not provided, a default size is used.
+   */
+  size?: 'large' | 'small';
+
+  /**
+   * Optional. If `true`, the value display is editable, and users can input values directly.
+   * Defaults to `false` if not provided.
+   */
+  editable?: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when the value changes, receiving the new value as a parameter.
+   */
+  onValueChange?: (value: string) => void;
+
+  /**
+   * Optional. Assign accessibility label to the button for automated testing.
+   */
+  componentId: string;
+};
+
+/**
+ * General properties for the Stepper component, which combines the buttons and value display
+ * to provide a full feature numeric stepper control.
+ */
+export type StepperProps = {
+  /**
+   * The initial value when the stepper is first rendered.
+   */
+  defaultValue: number;
+
+  /**
+   * Optional. The minimum allowable value for the stepper. If not provided, there is no minimum.
+   */
+  min?: number;
+
+  /**
+   * Optional. The maximum allowable value for the stepper. If not provided, there is no maximum.
+   */
+  max?: number;
+
+  /**
+   * Optional. Specifies whether the entire stepper control or specific parts are disabled.
+   * Can be a single boolean (to disable all) or an array of booleans (to control individual components).
+   */
+  disabled?: boolean | boolean[];
+
+  /**
+   * Optional. The step increment used for each button press. Defaults to 1 if not provided.
+   */
+  step?: number;
+
+  /**
+   * Optional. Specifies the size of the stepper components. If not provided, a default size is used.
+   */
+  size?: 'large' | 'small';
+
+  /**
+   * Optional. If `true`, the value display is editable, and users can input values directly.
+   * Defaults to `false` if not provided.
+   */
+  editable?: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when the stepper's value changes, receiving the new value as a parameter.
+   */
+  onValueChange?: (value: number) => void;
+
+  /**
+   * Optional. Custom styles to apply to the Stepper component. Can be used to adjust the visual presentation or layout.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * Optional. Assign accessibility label to the button for automated testing.
+   */
+  accessibilityLabel?: string;
+};
+
+/**
+ * Specifies the disabled state for each part of the Stepper component, allowing
+ * individual parts to be disabled as needed.
+ */
+export type DisabledStatus = {
+  /**
+   * If `true`, the increment (plus) button is disabled.
+   */
+  plus: boolean;
+
+  /**
+   * If `true`, the decrement (minus) button is disabled.
+   */
+  minus: boolean;
+
+  /**
+   * If `true`, the value display (number) is disabled, preventing direct input.
+   */
+  number: boolean;
+};
+
+export type StepperRef = {
+  setStepValue: (value: number) => void;
+};

package/src/libs/Steps/StepIcon.tsx

@@ -0,0 +1,86 @@
+import {Colors, Icon, Text, useScaleSize, Radius} from '@momo-kits/foundation';
+import React, {FC} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import styles from './styles';
+import {StepIconProps} from './types';
+
+const StepIcon: FC<StepIconProps> = ({
+  size = 'large',
+  backgroundColor,
+  borderColor,
+  error,
+  style,
+  useNumber,
+  index,
+  isActive,
+  customIcon,
+}) => {
+  const scaledSize = useScaleSize(16);
+  const scaledRadiusM = useScaleSize(Radius.M);
+
+  let iconStyle: StyleProp<ViewStyle> = styles.stepIcon;
+  let checkIconSize = 16;
+  let contentIconSize = 8;
+
+  if (size === 'small') {
+    iconStyle = [
+      styles.stepIcon,
+      {
+        width: scaledSize,
+        height: scaledSize,
+        borderWidth: 2,
+        borderRadius: scaledRadiusM,
+      },
+    ];
+    checkIconSize = 12;
+    contentIconSize = 6;
+  }
+
+  let iconSource = error ? 'navigation_close' : 'notifications_check';
+
+  const renderIcon = () => {
+    // useNumber is true, render number
+    if (useNumber) {
+      return (
+        <Text
+          style={{position: 'absolute'}}
+          typography={'header_xs_semibold'}
+          color={Colors.black_01}>
+          {index + 1}
+        </Text>
+      );
+    }
+
+    if (isActive) {
+      // customIcon is true, render customIcon
+      if (customIcon) {
+        return (
+          <Icon
+            size={checkIconSize}
+            color={Colors.black_01}
+            source={customIcon}
+          />
+        );
+      }
+      // render default Icon
+      return (
+        <View
+          style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
+        />
+      );
+    }
+
+    return (
+      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+    );
+  };
+
+  return (
+    <View
+      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
+      {renderIcon()}
+    </View>
+  );
+};
+
+export default StepIcon;