@momo-kits/stepper 0.0.74-beta → 0.72.1

package/Stepper.js

@@ -1,232 +1,256 @@
-import React, { Component } from 'react';
 import {
-    View, StyleSheet
-} from 'react-native';
+  Colors,
+  Image,
+  Radius,
+  Spacing,
+  Text,
+  TouchableOpacity,
+} from '@momo-kits/core-v2';
 import PropTypes from 'prop-types';
-import {
-    Text, Colors, Image, TouchableOpacity
-} from '@momo-kits/core';
+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 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 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 Quantity = props => {
+  const {
+    disabled,
+    min = 0,
+    max = 5,
+    defaultValue = 0,
+    size,
+    onChange,
+    onIncreasePress,
+    onDecreasePress,
+    isInput = false,
+    step = 1,
+    style,
+    tintColor,
+  } = props;
 
-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;
-};
-export default class Quantity extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: props.defaultValue || props.min,
-            ownUpdate: false
+  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,
+          },
         };
     }
+  };
 
-    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;
+  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;
 
-    onChangeValue = (value, type) => {
-        const { onChange } = this.props;
-        return onChange && typeof onChange === 'function' && onChange(value, type);
+    if (onDecreasePress && typeof onDecreasePress === 'function') {
+      onDecreasePress(newValue);
     }
 
-    getValue = (key) => {
-        const { isIncreaseValue, isDecreaseValue } = this.props;
-        const value = {
-            increase: isIncreaseValue ? 1 : 0,
-            decrease: isDecreaseValue ? 1 : 0,
-        };
-        return value[key];
-    };
-
-    setValue = (newValue, type) => {
-        this.setState({
-            value: newValue,
-            ownUpdate: true,
-        }, () => {
-            this.onChangeValue(newValue, type);
-        });
+    setValue(newValue);
+  };
+
+  const onIncrease = () => {
+    let newValue = value;
+    if (value < max) {
+      newValue = value + step;
     }
+    if (newValue > max) newValue = max;
 
-    onPress = (isIncrease = true) => () => {
-        const { isChangeValue, onConditionCheck } = this.props;
-        const { value } = this.state;
-        const type = isIncrease ? 'increase' : 'decrease';
-        if (isChangeValue) {
-            const newValue = isIncrease ? value + this.getValue('increase') : value - this.getValue('decrease');
-            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
-        } = this.props;
-        const { min } = this.props || 1;
-        if (isSingle && value === 0) {
-            return (
-                <View style={[styles.container, style]}>
-                    <IconButton
-                        tintColor={tintColor}
-                        size={size}
-                        disabled={(value >= max || !isIncreaseValue)}
-                        onPress={this.onPress(true)}
-                        icon={plus}
-                    />
-                </View>
-            );
-        }
-        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]}>
-                    <TextComp weight="bold" style={styles.text}>{value}</TextComp>
-                </View>
-                <IconButton
-                    tintColor={tintColor}
-                    style={iconStyle}
-                    size={size}
-                    disabled={(value >= max || !isIncreaseValue)}
-                    onPress={this.onPress(true)}
-                    icon={plus}
-                />
-            </View>
-        );
+    if (onIncreasePress && typeof onIncreasePress === 'function') {
+      onIncreasePress(newValue);
+    }
+
+    setValue(newValue);
+  };
+
+  const onPressButton = type => {
+    if (type === 'plus') {
+      onIncrease();
+    } else {
+      onDecrease();
     }
-}
-
-const IconButton = ({
-    disabled, onPress, icon, size, tintColor, style
-}) => (
-    <TouchableOpacity
-        style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
-        disabled={disabled}
-        onPress={onPress}
-    >
-        <Image
+  };
+  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 }, disabled && styles.disabledIcon]}
-        />
-    </TouchableOpacity>
-);
+            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', '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,
-    tintColor: PropTypes.string,
-    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  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: 1,
-    max: 100,
-    isChangeValue: true,
-    isIncreaseValue: true,
-    isDecreaseValue: true,
-    isSingle: false,
-    size: 'medium',
-    tintColor: Colors.pink_05_b,
+  min: 0,
+  max: 5,
+  size: 'medium',
+  isInput: false,
+  disabled: false,
+  step: 1,
+  tintColor: Colors.pink_03,
 };
+
+export default Quantity;

package/Stepper.web.js

@@ -1,232 +1,258 @@
-import React, { Component } from 'react';
+import React, {Component, useState} from 'react';
 import {
-    View, StyleSheet, TouchableOpacity, Image
+  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/colors';
-import ValueUtil from '../../core/utils/ValueUtil';
+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 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 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 Quantity = props => {
+  const {
+    disabled,
+    min = 0,
+    max = 5,
+    defaultValue = 0,
+    size,
+    onChange,
+    onIncreasePress,
+    onDecreasePress,
+    isInput = false,
+    step = 1,
+    style,
+    tintColor,
+  } = props;
 
-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;
-};
-export default class Quantity extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: props.defaultValue || props.min,
-            ownUpdate: false
+  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;
+  };
 
-    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;
+  const onDecrease = () => {
+    let newValue = value;
+    if (value > min) {
+      newValue = value - step;
     }
+    if (newValue < min) newValue = min;
 
-    onChangeValue = (value, type) => {
-        const { onChange } = this.props;
-        return onChange && typeof onChange === 'function' && onChange(value, type);
+    if (onDecreasePress && typeof onDecreasePress === 'function') {
+      onDecreasePress(newValue);
     }
 
-    getValue = (key) => {
-        const { isIncreaseValue, isDecreaseValue } = this.props;
-        const value = {
-            increase: isIncreaseValue ? 1 : 0,
-            decrease: isDecreaseValue ? 1 : 0,
-        };
-        return value[key];
-    };
-
-    setValue = (newValue, type) => {
-        this.setState({
-            value: newValue,
-            ownUpdate: true,
-        }, () => {
-            this.onChangeValue(newValue, type);
-        });
+    setValue(newValue);
+  };
+
+  const onIncrease = () => {
+    let newValue = value;
+    if (value < max) {
+      newValue = value + step;
     }
+    if (newValue > max) newValue = max;
 
-    onPress = (isIncrease = true) => () => {
-        const { isChangeValue, onConditionCheck } = this.props;
-        const { value } = this.state;
-        const type = isIncrease ? 'increase' : 'decrease';
-        if (isChangeValue) {
-            const newValue = isIncrease ? value + this.getValue('increase') : value - this.getValue('decrease');
-            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
-        } = this.props;
-        const { min } = this.props || 1;
-        if (isSingle && value === 0) {
-            return (
-                <View style={[styles.container, style]}>
-                    <IconButton
-                        tintColor={tintColor}
-                        size={size}
-                        disabled={(value >= max || !isIncreaseValue)}
-                        onPress={this.onPress(true)}
-                        icon={plus}
-                    />
-                </View>
-            );
-        }
-        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]}>
-                    <TextComp weight="bold" style={styles.text}>{value}</TextComp>
-                </View>
-                <IconButton
-                    tintColor={tintColor}
-                    style={iconStyle}
-                    size={size}
-                    disabled={(value >= max || !isIncreaseValue)}
-                    onPress={this.onPress(true)}
-                    icon={plus}
-                />
-            </View>
-        );
+    if (onIncreasePress && typeof onIncreasePress === 'function') {
+      onIncreasePress(newValue);
+    }
+
+    setValue(newValue);
+  };
+
+  const onPressButton = type => {
+    if (type === 'plus') {
+      onIncrease();
+    } else {
+      onDecrease();
     }
-}
-
-const IconButton = ({
-    disabled, onPress, icon, size, tintColor, style
-}) => (
-    <TouchableOpacity
-        style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
-        disabled={disabled}
-        onPress={onPress}
-    >
-        <Image
+  };
+  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 }, disabled && styles.disabledIcon]}
-        />
-    </TouchableOpacity>
-);
+            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', '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,
-    tintColor: PropTypes.string,
-    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  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: 1,
-    max: 100,
-    isChangeValue: true,
-    isIncreaseValue: true,
-    isDecreaseValue: true,
-    isSingle: false,
-    size: 'medium',
-    tintColor: Colors.pink_05_b,
+  min: 0,
+  max: 5,
+  size: 'medium',
+  isInput: false,
+  disabled: false,
+  step: 1,
+  tintColor: Colors.pink_03,
 };
+
+export default Quantity;

package/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "@momo-kits/stepper",
-  "version": "0.0.74-beta",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "@momo-kits/core": ">=0.0.5-beta"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
+    "name": "@momo-kits/stepper",
+    "version": "0.72.1",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/core-v2": ">=0.0.5-beta",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
 }

package/publish.sh

@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+npm publish --tag beta --access=public
 cd ..
 rm -rf dist
 
 
-curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'
+#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'