@momo-kits/stepper 0.0.65-alpha.20 → 0.0.65-alpha.23

package/Stepper.js

@@ -1,256 +1,356 @@
-import {
-  Colors,
-  Image,
-  Radius,
-  Spacing,
-  Text,
-  TouchableOpacity,
-} from '@momo-kits/core-v2';
+import React, { Component } from 'react';
+import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import {StyleSheet, TextInput as Input, View} from 'react-native';
+import { Text, Colors, Image, TouchableOpacity } from '@momo-kits/core';
 
 const minus =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
+    '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';
+    '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 styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+    },
+    icon: {
+        height: 24,
+        width: 24,
+        resizeMode: 'contain',
+        tintColor: Colors.pink_03,
+    },
+    text: {
+        color: Colors.black_17,
+    },
+    numberBox: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginHorizontal: 6,
+        backgroundColor: Colors.white,
+    },
+    button: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: Colors.white,
+        borderColor: 'transparent',
+    },
+    borderBox: {
+        borderColor: Colors.black_04,
+        borderWidth: 1,
+        borderRadius: 6,
+    },
+    disabledIcon: {
+        tintColor: Colors.black_09,
+    },
+    disabledBox: {
+        borderColor: Colors.black_03,
+        backgroundColor: Colors.black_03,
+    },
+});
 
-  const [value, setValue] = useState(defaultValue);
+const getStyle = (type) => {
+    const objStyle = {
+        large: {
+            size: {
+                ...styles.borderBox,
+                width: 32, // height: 26
+            },
+            icon: {
+                width: 24,
+                height: 24,
+                resizeMode: 'contain',
+            },
+            text: 'Title',
+        },
+        medium: {
+            size: {
+                ...styles.borderBox,
+                width: 28, // height: 24
+            },
+            icon: {
+                width: 24,
+                height: 24,
+                resizeMode: 'contain',
+            },
+            text: 'SubTitle',
+        },
+        small: {
+            size: {
+                ...styles.borderBox,
+                width: 20, // height: 16
+            },
+            icon: {
+                width: 16,
+                height: 16,
+                resizeMode: 'contain',
+            },
+            text: 'Caption',
+        },
+    };
+    return objStyle[type] || objStyle.medium;
+};
 
-  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 getSize = (type) => {
+    const objStyle = {
+        large: {
+            size: {
+                width: 32,
+                height: 24, // height: 26
+            },
+        },
+        medium: {
+            size: {
+                width: 28,
+                height: 24, // height: 24
+            },
+        },
+        small: {
+            size: {
+                width: 20,
+                height: 16, // height: 16
+            },
+        },
+    };
+    return objStyle[type] || objStyle.medium;
+};
+
+export default class Quantity extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.defaultValue || props.min,
+            ownUpdate: false,
         };
     }
-  };
-
-  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;
+    componentDidMount() {
+        Keyboard.addListener(
+            'keyboardDidHide',
+            this.checkData(
+                this.state.value,
+                'increase',
+                this.props.min,
+                this.props.max,
+            ),
+        );
     }
-    if (newValue < min) newValue = min;
 
-    if (onDecreasePress && typeof onDecreasePress === 'function') {
-      onDecreasePress(newValue);
+    componentWillUnmount() {
+        Keyboard.removeAllListeners('keyboardDidHide');
     }
 
-    setValue(newValue);
-  };
-
-  const onIncrease = () => {
-    let newValue = value;
-    if (value < max) {
-      newValue = value + step;
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const { value = undefined } = this?.props || {};
+        if (prevState.ownUpdate) {
+            return {
+                ownUpdate: false,
+            };
+        }
+        if (nextProps.value !== value && nextProps.value !== prevState.value) {
+            return { value: nextProps.value };
+        }
+        return null;
     }
-    if (newValue > max) newValue = max;
 
-    if (onIncreasePress && typeof onIncreasePress === 'function') {
-      onIncreasePress(newValue);
-    }
+    onChangeValue = (value, type) => {
+        const { onChange } = this.props;
+        return (
+            onChange && typeof onChange === 'function' && onChange(value, type)
+        );
+    };
 
-    setValue(newValue);
-  };
+    getValue = (key, step) => {
+        const { isIncreaseValue, isDecreaseValue } = this.props;
+        const value = {
+            increase: isIncreaseValue ? parseInt(step) : 0,
+            decrease: isDecreaseValue ? parseInt(step) : 0,
+        };
+        return value[key];
+    };
 
-  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;
+    setValue = (newValue = 0, type) => {
+        this.setState(
+            {
+                value: newValue,
+                ownUpdate: true,
+            },
+            () => {
+                this.onChangeValue(newValue, type);
+            },
+        );
+    };
 
-    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>
-      );
-    }
-  };
+    checkData = (value, type, min, max) => () => {
+        if (value < min) {
+            this.setState({ value: min, ownUpdate: true }, () => {
+                this.onChangeValue(value, type);
+            });
+        } else if (value > max) {
+            this.setState({ value: max, ownUpdate: true }, () => {
+                this.onChangeValue(value, type);
+            });
+        }
 
-  const onChangeText = value => {
-    let newValue = validateValue(parseInt(value)) || '0';
-    if (value.length > 1 && value[0] === 0) {
-      newValue = value.substring(1);
-    }
+        console.log(value, min, max);
+    };
 
-    if (onChange && typeof onChange === 'function') onChange(newValue);
+    onPress =
+        (isIncrease = true, step) =>
+        () => {
+            const { isChangeValue, onConditionCheck } = this.props;
+            const { value } = this.state;
+            const type = isIncrease ? 'increase' : 'decrease';
+            if (isChangeValue && value !== '') {
+                const newValue = isIncrease
+                    ? parseInt(value) + this.getValue('increase', step)
+                    : parseInt(value) - this.getValue('decrease', step);
+                if (typeof onConditionCheck === 'function') {
+                    const passCondition = onConditionCheck(newValue, type);
+                    if (passCondition) {
+                        this.setValue(newValue, type);
+                    }
+                } else {
+                    this.setValue(newValue, type);
+                }
+            } else {
+                this.onChangeValue(value, type);
+            }
+        };
 
-    setValue(newValue);
-  };
+    render() {
+        const { value } = this.state;
+        const {
+            style,
+            valueStyle,
+            size,
+            tintColor,
+            isIncreaseValue,
+            isSingle,
+            iconStyle,
+            isInput,
+            disabled,
+            step,
+        } = this.props;
+        const { min } = this.props || 1;
+        const { max } = this.props || 999;
+        if (isSingle && value === 0) {
+            return (
+                <View style={[styles.container, style]}>
+                    <IconButton
+                        tintColor={tintColor}
+                        size={size}
+                        disabled={value >= max || !isIncreaseValue}
+                        onPress={this.onPress(true, step)}
+                        icon={plus}
+                    />
+                </View>
+            );
+        }
+        const TextComp = Text[getStyle(size).text];
 
-  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>
+        return (
+            <View style={[styles.container, style]}>
+                <IconButton
+                    style={iconStyle}
+                    tintColor={tintColor}
+                    size={size}
+                    disabled={value === min || disabled}
+                    onPress={this.onPress(false, step)}
+                    icon={minus}
+                />
+                <View
+                    style={[styles.numberBox, getStyle(size).size, valueStyle]}>
+                    {isInput ? (
+                        <TextInput
+                            style={[
+                                {
+                                    textAlignVertical: 'center',
+                                    padding: 0,
+                                },
+                                getSize(size).size,
+                            ]}
+                            underlineColorAndroid="transparent"
+                            value={value.toString()}
+                            textAlign="center"
+                            maxLength={3}
+                            keyboardType="number-pad"
+                            editable={!disabled}
+                            onChangeText={(text) => {
+                                if (text[0] !== '0') {
+                                    this.setValue(text);
+                                }
+                            }}
+                            onEndEditing={this.checkData(
+                                value,
+                                'increase',
+                                min,
+                                max,
+                            )}
+                        />
+                    ) : (
+                        <TextComp weight="bold" style={styles.text}>
+                            {value.toString()}
+                        </TextComp>
+                    )}
+                </View>
+                <IconButton
+                    tintColor={tintColor}
+                    style={iconStyle}
+                    size={size}
+                    disabled={value >= max || !isIncreaseValue || disabled}
+                    onPress={this.onPress(true, step)}
+                    icon={plus}
+                />
             </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,
-  },
-});
+const IconButton = ({ disabled, onPress, icon, size, tintColor, style }) => (
+    <TouchableOpacity
+        style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
+        disabled={disabled}
+        onPress={onPress}>
+        <Image
+            source={icon}
+            style={[
+                getStyle(size).icon,
+                { tintColor },
+                disabled && styles.disabledIcon,
+            ]}
+        />
+    </TouchableOpacity>
+);
 
 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,
+    size: PropTypes.oneOf(['large', 'medium', 'small']),
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    min: PropTypes.number,
+    max: PropTypes.number,
+    value: PropTypes.number,
+    defaultValue: PropTypes.number,
+    onChange: PropTypes.func,
+    isChangeValue: PropTypes.bool,
+    isIncreaseValue: PropTypes.bool,
+    isDecreaseValue: PropTypes.bool,
+    isSingle: PropTypes.bool,
+    disabled: PropTypes.bool,
+    tintColor: PropTypes.string,
+    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    isInput: PropTypes.bool,
+    step: PropTypes.number,
 };
 
 Quantity.defaultProps = {
-  min: 0,
-  max: 5,
-  size: 'medium',
-  isInput: false,
-  disabled: false,
-  step: 1,
-  tintColor: Colors.pink_03,
+    min: 1,
+    max: 100,
+    isChangeValue: true,
+    isIncreaseValue: true,
+    isDecreaseValue: true,
+    isSingle: false,
+    size: 'medium',
+    tintColor: Colors.pink_05_b,
+    isInput: false,
+    disabled: false,
+    step: 1,
 };
-
-export default Quantity;

package/Stepper.web.js

@@ -1,258 +1,319 @@
-import React, {Component, useState} from 'react';
+import React, {Component} from 'react';
 import {
   View,
   StyleSheet,
   TouchableOpacity,
   Image,
-  TextInput as Input,
+  TextInput,
 } 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';
+import Colors from '../../core/colors';
 
 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 styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  icon: {
+    height: 24,
+    width: 24,
+    resizeMode: 'contain',
+    tintColor: Colors.pink_03,
+  },
+  text: {
+    color: Colors.black_17,
+  },
+  numberBox: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 6,
+    backgroundColor: Colors.white,
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.white,
+    borderColor: 'transparent',
+  },
+  borderBox: {
+    borderColor: Colors.black_04,
+    borderWidth: 1,
+    borderRadius: 6,
+  },
+  disabledIcon: {
+    tintColor: Colors.black_09,
+  },
+  disabledBox: {
+    borderColor: Colors.black_03,
+    backgroundColor: Colors.black_03,
+  },
+});
 
-  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 getStyle = type => {
+  const objStyle = {
+    large: {
+      size: {
+        ...styles.borderBox,
+        width: 32, // height: 26
+      },
+      icon: {
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+      },
+      text: 'Title',
+    },
+    medium: {
+      size: {
+        ...styles.borderBox,
+        width: 28, // height: 24
+      },
+      icon: {
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+      },
+      text: 'SubTitle',
+    },
+    small: {
+      size: {
+        ...styles.borderBox,
+        width: 20, // height: 16
+      },
+      icon: {
+        width: 16,
+        height: 16,
+        resizeMode: 'contain',
+      },
+      text: 'Caption',
+    },
   };
+  return objStyle[type] || objStyle.medium;
+};
 
-  const validateValue = value => {
-    if (value < min) value = min;
-    if (value > max) value = max;
-    return value;
+const getSize = type => {
+  const objStyle = {
+    large: {
+      size: {
+        width: 32,
+        height: 24, // height: 26
+      },
+    },
+    medium: {
+      size: {
+        width: 28,
+        height: 24, // height: 24
+      },
+    },
+    small: {
+      size: {
+        width: 20,
+        height: 16, // height: 16
+      },
+    },
   };
+  return objStyle[type] || objStyle.medium;
+};
 
-  const onDecrease = () => {
-    let newValue = value;
-    if (value > min) {
-      newValue = value - step;
-    }
-    if (newValue < min) newValue = min;
+export default class Quantity extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.defaultValue || props.min,
+      ownUpdate: false,
+    };
+  }
 
-    if (onDecreasePress && typeof onDecreasePress === 'function') {
-      onDecreasePress(newValue);
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {value = undefined} = this?.props || {};
+    if (prevState.ownUpdate) {
+      return {
+        ownUpdate: false,
+      };
     }
-
-    setValue(newValue);
-  };
-
-  const onIncrease = () => {
-    let newValue = value;
-    if (value < max) {
-      newValue = value + step;
+    if (nextProps.value !== value && nextProps.value !== prevState.value) {
+      return {value: nextProps.value};
     }
-    if (newValue > max) newValue = max;
+    return null;
+  }
 
-    if (onIncreasePress && typeof onIncreasePress === 'function') {
-      onIncreasePress(newValue);
-    }
+  onChangeValue = (value, type) => {
+    const {onChange} = this.props;
+    return onChange && typeof onChange === 'function' && onChange(value, type);
+  };
 
-    setValue(newValue);
+  getValue = (key, step) => {
+    const {isIncreaseValue, isDecreaseValue} = this.props;
+    const value = {
+      increase: isIncreaseValue ? step : 0,
+      decrease: isDecreaseValue ? step : 0,
+    };
+    return value[key];
   };
 
-  const onPressButton = type => {
-    if (type === 'plus') {
-      onIncrease();
+  setValue = (newValue = 0, type) => {
+    const {isInput, isIncreaseValue, max, min} = this.props;
+    const onValue = (newValue, type) => {
+      this.setState(
+        {
+          value: newValue,
+          ownUpdate: true,
+        },
+        () => {
+          this.onChangeValue(newValue, type);
+        },
+      );
+    };
+
+    if (isInput) {
+      if (newValue <= max && isIncreaseValue && newValue >= min) {
+        onValue(newValue, type);
+      }
     } else {
-      onDecrease();
+      onValue(newValue, type);
     }
   };
-  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) {
+  onPress =
+    (isIncrease = true, step) =>
+    () => {
+      const {isChangeValue, onConditionCheck} = this.props;
+      const {value} = this.state;
+      const type = isIncrease ? 'increase' : 'decrease';
+      if (isChangeValue) {
+        const newValue = isIncrease
+          ? value + this.getValue('increase', step)
+          : value - this.getValue('decrease', step);
+        if (typeof onConditionCheck === 'function') {
+          const passCondition = onConditionCheck(newValue, type);
+          if (passCondition) {
+            this.setValue(newValue, type);
+          }
+        } else {
+          this.setValue(newValue, type);
+        }
+      } else {
+        this.onChangeValue(value, type);
+      }
+    };
+
+  render() {
+    const {value} = this.state;
+    const {
+      style,
+      max,
+      valueStyle,
+      size,
+      tintColor,
+      isIncreaseValue,
+      isSingle,
+      iconStyle,
+      isInput,
+    } = this.props;
+    const {min} = this.props || 1;
+    if (isSingle && value === 0) {
       return (
-        <TouchableOpacity
-          disabled={disabledStatus}
-          onPress={() => onPressButton(type)}
-          style={[getStyle(size)?.button, styles.button]}>
-          <Image
-            source={icon}
-            style={[
-              getStyle(size)?.icon,
-              disabledStatus && styles.disabledButton,
-              {tintColor},
-            ]}
+        <View style={[styles.container, style]}>
+          <IconButton
+            tintColor={tintColor}
+            size={size}
+            disabled={value >= max || !isIncreaseValue}
+            onPress={this.onPress(true)}
+            icon={plus}
           />
-        </TouchableOpacity>
+        </View>
       );
     }
-  };
-
-  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}>
+    const TextComp = Text[getStyle(size).text];
+    return (
+      <View style={[styles.container, style]}>
+        <IconButton
+          style={iconStyle}
+          tintColor={tintColor}
+          size={size}
+          disabled={value === min}
+          onPress={this.onPress(false)}
+          icon={minus}
+        />
+        <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
           {isInput ? (
-            <Input
+            <TextInput
+              style={[{textAlignVertical: 'center'}, getSize(size).size]}
+              underlineColorAndroid="transparent"
+              value={value.toString()}
               textAlign="center"
+              maxLength={3}
               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()}
+              onChangeText={text => this.setValue(text)}
             />
           ) : (
-            <View
-              style={[
-                getStyle(size)?.input,
-                styles.input,
-                disabled && styles.disabledInput,
-              ]}>
-              <Text style={getStyle(size)?.text}>{value.toString()}</Text>
-            </View>
+            <TextComp weight="bold" style={styles.text}>
+              {value}
+            </TextComp>
           )}
         </View>
-        {renderButton('plus', size, plus)}
+        <IconButton
+          tintColor={tintColor}
+          style={iconStyle}
+          size={size}
+          disabled={value >= max || !isIncreaseValue}
+          onPress={this.onPress(true)}
+          icon={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,
-  },
-});
+const IconButton = ({disabled, onPress, icon, size, tintColor, style}) => (
+  <TouchableOpacity
+    style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
+    disabled={disabled}
+    onPress={onPress}>
+    <Image
+      source={icon}
+      style={[
+        getStyle(size).icon,
+        {tintColor},
+        disabled && styles.disabledIcon,
+      ]}
+    />
+  </TouchableOpacity>
+);
 
 Quantity.propTypes = {
-  size: PropTypes.oneOf(['large', 'medium']),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   min: PropTypes.number,
   max: PropTypes.number,
+  value: PropTypes.number,
   defaultValue: PropTypes.number,
   onChange: PropTypes.func,
-  disabled: PropTypes.bool,
+  isChangeValue: PropTypes.bool,
+  isIncreaseValue: PropTypes.bool,
+  isDecreaseValue: PropTypes.bool,
+  isSingle: PropTypes.bool,
+  tintColor: PropTypes.string,
+  iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   isInput: PropTypes.bool,
   step: PropTypes.number,
-  onIncreasePress: PropTypes.func,
-  onDecreasePress: PropTypes.func,
-  tintColor: PropTypes.string,
 };
 
 Quantity.defaultProps = {
-  min: 0,
-  max: 5,
+  min: 1,
+  max: 100,
+  isChangeValue: true,
+  isIncreaseValue: true,
+  isDecreaseValue: true,
+  isSingle: false,
   size: 'medium',
+  tintColor: Colors.pink_05_b,
   isInput: false,
-  disabled: false,
   step: 1,
-  tintColor: Colors.pink_03,
 };
-
-export default Quantity;

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.0.65-alpha.20",
+    "version": "0.0.65-alpha.23",
     "private": false,
     "main": "index.js",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
+        "@momo-kits/core": ">=0.0.5-beta",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"