@momo-kits/stepper 0.73.3-beta.5 → 0.74.2-react-native.2

package/NumberView.tsx

@@ -0,0 +1,47 @@
+import React, {FC, useContext} from 'react';
+import {TextInput, View} from 'react-native';
+import {StepperValueProps} from './types';
+import {ApplicationContext} from '@momo-kits/foundation';
+import styles from './styles';
+
+const NumberView: FC<StepperValueProps> = ({
+  value = 0,
+  size = 'large',
+  editable = false,
+  onValueChange,
+  disabled,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const sizeStyle =
+    size === 'large' ? styles.numberView : styles.numberViewSmall;
+
+  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={[sizeStyle, {borderColor}]}>
+      <TextInput
+        editable={editable}
+        style={[styles.input, {color: textColor}]}
+        value={formattedNumber(value)}
+        onChangeText={onValueChange}
+        keyboardType={'number-pad'}
+        selectionColor={theme.colors.primary}
+      />
+    </View>
+  );
+};
+
+export default NumberView;

package/StepperButton.tsx

@@ -0,0 +1,30 @@
+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,
+}) => {
+  const ICON_SIZE = 12;
+  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]}>
+      <Icon size={22} color={buttonColor} source={buttonIcon} />
+    </TouchableOpacity>
+  );
+};
+
+export default StepperButton;

package/index.tsx

@@ -0,0 +1,95 @@
+import React, {FC, 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';
+
+const Stepper: FC<StepperProps> = ({
+  size = 'large',
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  disabled = false,
+  step = 1,
+  editable = false,
+  onValueChange,
+}) => {
+  const [value, setValue] = useState(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}>
+      <StepperButton
+        onPress={onMinus}
+        sign={'-'}
+        size={size}
+        disabled={viewStatus.minus}
+      />
+      <NumberView
+        onValueChange={_onValueChange}
+        size={size}
+        value={value}
+        disabled={viewStatus.number}
+        editable={editable}
+      />
+      <StepperButton onPress={onPlus} size={size} disabled={viewStatus.plus} />
+    </View>
+  );
+};
+
+export {Stepper};
+export type {StepperProps};

package/package.json

@@ -1,15 +1,17 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.73.3-beta.5",
+    "version": "0.74.2-react-native.2",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "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/styles.ts

@@ -0,0 +1,54 @@
+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',
+  },
+  numberView: {
+    width: 32,
+    height: 28,
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: Spacing.S,
+  },
+  numberViewSmall: {
+    width: 28,
+    height: 24,
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: Spacing.S,
+  },
+  input: {
+    fontSize: 12,
+  },
+});

package/types.ts

@@ -0,0 +1,135 @@
+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;
+};
+
+/**
+ * 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;
+};
+
+/**
+ * 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[];
+};
+
+/**
+ * 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;
+};

package/Stepper.js

@@ -1,256 +0,0 @@
-import {
-  Colors,
-  Image,
-  Radius,
-  Spacing,
-  Text,
-  TouchableOpacity,
-} from '@momo-kits/core-v2';
-import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import {StyleSheet, TextInput as Input, View} from 'react-native';
-
-const minus =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
-const plus =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
-
-const Quantity = props => {
-  const {
-    disabled,
-    min = 0,
-    max = 5,
-    defaultValue = 0,
-    size,
-    onChange,
-    onIncreasePress,
-    onDecreasePress,
-    isInput = false,
-    step = 1,
-    style,
-    tintColor,
-  } = props;
-
-  const [value, setValue] = useState(defaultValue);
-
-  const getStyle = size => {
-    switch (size) {
-      case 'medium':
-        return {
-          button: {
-            width: 28,
-            height: 28,
-            borderRadius: Radius.M + Radius.XXS,
-          },
-          icon: {
-            width: 24,
-            height: 24,
-          },
-          input: {
-            minWidth: 28,
-            minHeight: 24,
-            borderRadius: Radius.S,
-          },
-          text: {
-            fontSize: 12,
-            lineHeight: 16,
-          },
-        };
-      case 'large':
-        return {
-          button: {
-            width: 36,
-            height: 36,
-            borderRadius: Radius.L + Radius.XXS,
-          },
-          icon: {
-            width: 24,
-            height: 24,
-          },
-          input: {
-            minWidth: 32,
-            minHeight: 26,
-            borderRadius: Radius.S,
-          },
-          text: {
-            fontSize: 12,
-            lineHeight: 16,
-          },
-        };
-    }
-  };
-
-  const validateValue = value => {
-    if (value < min) value = min;
-    if (value > max) value = max;
-    return value;
-  };
-
-  const onDecrease = () => {
-    let newValue = value;
-    if (value > min) {
-      newValue = value - step;
-    }
-    if (newValue < min) newValue = min;
-
-    if (onDecreasePress && typeof onDecreasePress === 'function') {
-      onDecreasePress(newValue);
-    }
-
-    setValue(newValue);
-  };
-
-  const onIncrease = () => {
-    let newValue = value;
-    if (value < max) {
-      newValue = value + step;
-    }
-    if (newValue > max) newValue = max;
-
-    if (onIncreasePress && typeof onIncreasePress === 'function') {
-      onIncreasePress(newValue);
-    }
-
-    setValue(newValue);
-  };
-
-  const onPressButton = type => {
-    if (type === 'plus') {
-      onIncrease();
-    } else {
-      onDecrease();
-    }
-  };
-  const renderButton = (type, size, icon) => {
-    let disabledStatus = props.disabled;
-    if (type === 'plus' && value === max) disabledStatus = true;
-    if (type === 'minus' && value === min) disabledStatus = true;
-
-    if (onPressButton) {
-      return (
-        <TouchableOpacity
-          disabled={disabledStatus}
-          onPress={() => onPressButton(type)}
-          style={[getStyle(size)?.button, styles.button]}>
-          <Image
-            source={icon}
-            style={[
-              getStyle(size)?.icon,
-              {tintColor},
-              disabledStatus && styles.disabledButton,
-            ]}
-          />
-        </TouchableOpacity>
-      );
-    }
-  };
-
-  const onChangeText = value => {
-    let newValue = validateValue(parseInt(value)) || '0';
-    if (value.length > 1 && value[0] === 0) {
-      newValue = value.substring(1);
-    }
-
-    if (onChange && typeof onChange === 'function') onChange(newValue);
-
-    setValue(newValue);
-  };
-
-  return (
-    <View style={style}>
-      <View style={styles.container}>
-        {renderButton('minus', size, minus)}
-        <View style={styles.inputContainer}>
-          {isInput ? (
-            <Input
-              textAlign="center"
-              keyboardType="number-pad"
-              inputMode="numeric"
-              selectionColor={Colors.pink_03}
-              style={[
-                getStyle(size)?.input,
-                styles.input,
-                disabled && styles.disabledInput,
-                {
-                  fontSize: size === 'small' ? 10 : 12,
-                  color: Colors.black_17,
-                },
-              ]}
-              value={value.toString()}
-              onChangeText={onChangeText}
-              defaultValue={defaultValue.toString()}
-            />
-          ) : (
-            <View
-              style={[
-                getStyle(size)?.input,
-                styles.input,
-                disabled && styles.disabledInput,
-              ]}>
-              <Text style={getStyle(size)?.text}>{value.toString()}</Text>
-            </View>
-          )}
-        </View>
-        {renderButton('plus', size, plus)}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: Colors.black_03,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  icon: {},
-  container: {
-    flexDirection: 'row',
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: Colors.black_04,
-    marginHorizontal: Spacing.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: Spacing.XS,
-    paddingVertical: Spacing.ZERO,
-  },
-  inputContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  disabledButton: {
-    tintColor: Colors.black_08,
-  },
-  disabledInput: {
-    opacity: 0.4,
-  },
-});
-
-Quantity.propTypes = {
-  size: PropTypes.oneOf(['large', 'medium']),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  min: PropTypes.number,
-  max: PropTypes.number,
-  defaultValue: PropTypes.number,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  isInput: PropTypes.bool,
-  step: PropTypes.number,
-  onIncreasePress: PropTypes.func,
-  onDecreasePress: PropTypes.func,
-  tintColor: PropTypes.string,
-};
-
-Quantity.defaultProps = {
-  min: 0,
-  max: 5,
-  size: 'medium',
-  isInput: false,
-  disabled: false,
-  step: 1,
-  tintColor: Colors.pink_03,
-};
-
-export default Quantity;

package/Stepper.web.js

@@ -1,258 +0,0 @@
-import React, {Component, useState} from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  TextInput as Input,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import Text from '../../core/components/typography';
-import Colors from '../../core-v2/colors';
-import Radius from '../../core-v2/radius';
-import Spacing from '../../core-v2/spacing';
-
-const minus =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
-const plus =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
-
-const Quantity = props => {
-  const {
-    disabled,
-    min = 0,
-    max = 5,
-    defaultValue = 0,
-    size,
-    onChange,
-    onIncreasePress,
-    onDecreasePress,
-    isInput = false,
-    step = 1,
-    style,
-    tintColor,
-  } = props;
-
-  const [value, setValue] = useState(defaultValue);
-
-  const getStyle = size => {
-    switch (size) {
-      case 'medium':
-        return {
-          button: {
-            width: 28,
-            height: 28,
-            borderRadius: Radius.M + Radius.XXS,
-          },
-          icon: {
-            width: 24,
-            height: 24,
-          },
-          input: {
-            minWidth: 28,
-            minHeight: 24,
-            borderRadius: Radius.S,
-          },
-          text: {
-            fontSize: 12,
-            lineHeight: 16,
-          },
-        };
-      case 'large':
-        return {
-          button: {
-            width: 36,
-            height: 36,
-            borderRadius: Radius.L + Radius.XXS,
-          },
-          icon: {
-            width: 24,
-            height: 24,
-          },
-          input: {
-            minWidth: 32,
-            minHeight: 26,
-            borderRadius: Radius.S,
-          },
-          text: {
-            fontSize: 12,
-            lineHeight: 16,
-          },
-        };
-    }
-  };
-
-  const validateValue = value => {
-    if (value < min) value = min;
-    if (value > max) value = max;
-    return value;
-  };
-
-  const onDecrease = () => {
-    let newValue = value;
-    if (value > min) {
-      newValue = value - step;
-    }
-    if (newValue < min) newValue = min;
-
-    if (onDecreasePress && typeof onDecreasePress === 'function') {
-      onDecreasePress(newValue);
-    }
-
-    setValue(newValue);
-  };
-
-  const onIncrease = () => {
-    let newValue = value;
-    if (value < max) {
-      newValue = value + step;
-    }
-    if (newValue > max) newValue = max;
-
-    if (onIncreasePress && typeof onIncreasePress === 'function') {
-      onIncreasePress(newValue);
-    }
-
-    setValue(newValue);
-  };
-
-  const onPressButton = type => {
-    if (type === 'plus') {
-      onIncrease();
-    } else {
-      onDecrease();
-    }
-  };
-  const renderButton = (type, size, icon) => {
-    let disabledStatus = props.disabled;
-    if (type === 'plus' && value === max) disabledStatus = true;
-    if (type === 'minus' && value === min) disabledStatus = true;
-
-    if (onPressButton) {
-      return (
-        <TouchableOpacity
-          disabled={disabledStatus}
-          onPress={() => onPressButton(type)}
-          style={[getStyle(size)?.button, styles.button]}>
-          <Image
-            source={icon}
-            style={[
-              getStyle(size)?.icon,
-              disabledStatus && styles.disabledButton,
-              {tintColor},
-            ]}
-          />
-        </TouchableOpacity>
-      );
-    }
-  };
-
-  const onChangeText = value => {
-    let newValue = validateValue(parseInt(value)) || '0';
-    if (value.length > 1 && value[0] === 0) {
-      newValue = value.substring(1);
-    }
-
-    if (onChange && typeof onChange === 'function') onChange(newValue);
-
-    setValue(newValue);
-  };
-
-  return (
-    <View style={style}>
-      <View style={styles.container}>
-        {renderButton('minus', size, minus)}
-        <View style={styles.inputContainer}>
-          {isInput ? (
-            <Input
-              textAlign="center"
-              keyboardType="number-pad"
-              inputMode="numeric"
-              selectionColor={Colors.pink_03}
-              style={[
-                getStyle(size)?.input,
-                styles.input,
-                disabled && styles.disabledInput,
-                {
-                  fontSize: size === 'small' ? 10 : 12,
-                  color: Colors.black_17,
-                },
-              ]}
-              value={value.toString()}
-              onChangeText={onChangeText}
-              defaultValue={defaultValue.toString()}
-            />
-          ) : (
-            <View
-              style={[
-                getStyle(size)?.input,
-                styles.input,
-                disabled && styles.disabledInput,
-              ]}>
-              <Text style={getStyle(size)?.text}>{value.toString()}</Text>
-            </View>
-          )}
-        </View>
-        {renderButton('plus', size, plus)}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: Colors.black_03,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  icon: {},
-  container: {
-    flexDirection: 'row',
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: Colors.black_04,
-    marginHorizontal: Spacing.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: Spacing.XS,
-    paddingVertical: Spacing.ZERO,
-  },
-  inputContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  disabledButton: {
-    tintColor: Colors.black_08,
-  },
-  disabledInput: {
-    opacity: 0.4,
-  },
-});
-
-Quantity.propTypes = {
-  size: PropTypes.oneOf(['large', 'medium']),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  min: PropTypes.number,
-  max: PropTypes.number,
-  defaultValue: PropTypes.number,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  isInput: PropTypes.bool,
-  step: PropTypes.number,
-  onIncreasePress: PropTypes.func,
-  onDecreasePress: PropTypes.func,
-  tintColor: PropTypes.string,
-};
-
-Quantity.defaultProps = {
-  min: 0,
-  max: 5,
-  size: 'medium',
-  isInput: false,
-  disabled: false,
-  step: 1,
-  tintColor: Colors.pink_03,
-};
-
-export default Quantity;

package/index.js

@@ -1,3 +0,0 @@
-import Stepper from './Stepper';
-
-export default Stepper;