@momo-kits/stepper 0.0.33-beta → 0.0.36

package/Stepper.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import {
-    View, StyleSheet
-} from 'react-native';
+import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
 import PropTypes from 'prop-types';
 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';
-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: {
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
         tintColor: Colors.pink_03,
     },
     text: {
-        color: Colors.black_17
+        color: Colors.black_17,
     },
     numberBox: {
         justifyContent: 'center',
@@ -31,68 +31,121 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: Colors.white,
-        borderColor: 'transparent'
+        borderColor: 'transparent',
     },
     borderBox: {
-        borderColor: Colors.black_04, borderWidth: 1, borderRadius: 6
+        borderColor: Colors.black_04,
+        borderWidth: 1,
+        borderRadius: 6,
     },
     disabledIcon: {
         tintColor: Colors.black_09,
     },
     disabledBox: {
-        borderColor: Colors.black_03, backgroundColor: Colors.black_03
-    }
+        borderColor: Colors.black_03,
+        backgroundColor: Colors.black_03,
+    },
 });
 
 const getStyle = (type) => {
     const objStyle = {
         large: {
             size: {
-                ...styles.borderBox, width: 32, // height: 26
+                ...styles.borderBox,
+                width: 32, // height: 26
             },
             icon: {
-                width: 24, height: 24, resizeMode: 'contain'
+                width: 24,
+                height: 24,
+                resizeMode: 'contain',
             },
-            text: 'Title'
+            text: 'Title',
         },
         medium: {
             size: {
-                ...styles.borderBox, width: 28, // height: 24
+                ...styles.borderBox,
+                width: 28, // height: 24
             },
             icon: {
-                width: 24, height: 24, resizeMode: 'contain'
+                width: 24,
+                height: 24,
+                resizeMode: 'contain',
             },
-            text: 'SubTitle'
+            text: 'SubTitle',
         },
         small: {
             size: {
-                ...styles.borderBox, width: 20, // height: 16
+                ...styles.borderBox,
+                width: 20, // height: 16
             },
             icon: {
-                width: 16, height: 16, resizeMode: 'contain'
+                width: 16,
+                height: 16,
+                resizeMode: 'contain',
             },
-            text: 'Caption'
-        }
+            text: 'Caption',
+        },
+    };
+    return objStyle[type] || objStyle.medium;
+};
 
+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
+            ownUpdate: false,
         };
     }
 
+    componentDidMount() {
+        Keyboard.addListener(
+            'keyboardDidHide',
+            this.checkData(
+                this.state.value,
+                'increase',
+                this.props.min,
+                this.props.max,
+            ),
+        );
+    }
+
+    componentWillUnmount() {
+        Keyboard.removeAllListeners('keyboardDidHide');
+    }
+
     static getDerivedStateFromProps(nextProps, prevState) {
         const { value = undefined } = this?.props || {};
         if (prevState.ownUpdate) {
             return {
                 ownUpdate: false,
             };
-        } if (nextProps.value !== value && nextProps.value !== prevState.value) {
+        }
+        if (nextProps.value !== value && nextProps.value !== prevState.value) {
             return { value: nextProps.value };
         }
         return null;
@@ -100,85 +153,151 @@ export default class Quantity extends Component {
 
     onChangeValue = (value, type) => {
         const { onChange } = this.props;
-        return onChange && typeof onChange === 'function' && onChange(value, type);
-    }
+        return (
+            onChange && typeof onChange === 'function' && onChange(value, type)
+        );
+    };
 
-    getValue = (key) => {
+    getValue = (key, step) => {
         const { isIncreaseValue, isDecreaseValue } = this.props;
         const value = {
-            increase: isIncreaseValue ? 1 : 0,
-            decrease: isDecreaseValue ? 1 : 0,
+            increase: isIncreaseValue ? parseInt(step) : 0,
+            decrease: isDecreaseValue ? parseInt(step) : 0,
         };
         return value[key];
     };
 
-    setValue = (newValue, type) => {
-        this.setState({
-            value: newValue,
-            ownUpdate: true,
-        }, () => {
-            this.onChangeValue(newValue, type);
-        });
-    }
+    setValue = (newValue = 0, type) => {
+        this.setState(
+            {
+                value: newValue,
+                ownUpdate: true,
+            },
+            () => {
+                this.onChangeValue(newValue, type);
+            },
+        );
+    };
 
-    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) {
+    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);
+            });
+        }
+
+        console.log(value, min, max);
+    };
+
+    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.setValue(newValue, type);
+                this.onChangeValue(value, type);
             }
-        } else {
-            this.onChangeValue(value, type);
-        }
-    };
+        };
 
     render() {
         const { value } = this.state;
         const {
-            style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle
+            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)}
+                        disabled={value >= max || !isIncreaseValue}
+                        onPress={this.onPress(true, step)}
                         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)}
+                    disabled={value === min || disabled}
+                    onPress={this.onPress(false, step)}
                     icon={minus}
                 />
-                <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
-                    <TextComp weight="bold" style={styles.text}>{value}</TextComp>
+                <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}
+                        </TextComp>
+                    )}
                 </View>
                 <IconButton
                     tintColor={tintColor}
                     style={iconStyle}
                     size={size}
-                    disabled={(value >= max || !isIncreaseValue)}
-                    onPress={this.onPress(true)}
+                    disabled={value >= max || !isIncreaseValue || disabled}
+                    onPress={this.onPress(true, step)}
                     icon={plus}
                 />
             </View>
@@ -186,17 +305,18 @@ export default class Quantity extends Component {
     }
 }
 
-const IconButton = ({
-    disabled, onPress, icon, size, tintColor, style
-}) => (
+const IconButton = ({ disabled, onPress, icon, size, tintColor, style }) => (
     <TouchableOpacity
-        style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
+        style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
         disabled={disabled}
-        onPress={onPress}
-    >
+        onPress={onPress}>
         <Image
             source={icon}
-            style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
+            style={[
+                getStyle(size).icon,
+                { tintColor },
+                disabled && styles.disabledIcon,
+            ]}
         />
     </TouchableOpacity>
 );
@@ -214,8 +334,11 @@ Quantity.propTypes = {
     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 = {
@@ -227,4 +350,7 @@ Quantity.defaultProps = {
     isSingle: false,
     size: 'medium',
     tintColor: Colors.pink_05_b,
+    isInput: false,
+    disabled: false,
+    step: 1,
 };

package/Stepper.web.js

@@ -1,232 +1,319 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
-    View, StyleSheet, TouchableOpacity, Image
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  TextInput,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import Text from '../typography';
-import Colors from '../../colors';
-import ValueUtil from '../../utils/ValueUtil';
+import Text from '../../core/components/typography';
+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 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,
+  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 = type => {
+  const objStyle = {
+    large: {
+      size: {
+        ...styles.borderBox,
+        width: 32, // height: 26
+      },
+      icon: {
         width: 24,
+        height: 24,
         resizeMode: 'contain',
-        tintColor: Colors.pink_03,
+      },
+      text: 'Title',
     },
-    text: {
-        color: Colors.black_17
+    medium: {
+      size: {
+        ...styles.borderBox,
+        width: 28, // height: 24
+      },
+      icon: {
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+      },
+      text: 'SubTitle',
     },
-    numberBox: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginHorizontal: 6,
-        backgroundColor: Colors.white,
+    small: {
+      size: {
+        ...styles.borderBox,
+        width: 20, // height: 16
+      },
+      icon: {
+        width: 16,
+        height: 16,
+        resizeMode: 'contain',
+      },
+      text: 'Caption',
     },
-    button: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: Colors.white,
-        borderColor: 'transparent'
+  };
+  return objStyle[type] || objStyle.medium;
+};
+
+const getSize = type => {
+  const objStyle = {
+    large: {
+      size: {
+        width: 32,
+        height: 24, // height: 26
+      },
     },
-    borderBox: {
-        borderColor: Colors.black_04, borderWidth: 1, borderRadius: 6
+    medium: {
+      size: {
+        width: 28,
+        height: 24, // height: 24
+      },
     },
-    disabledIcon: {
-        tintColor: Colors.black_09,
+    small: {
+      size: {
+        width: 20,
+        height: 16, // height: 16
+      },
     },
-    disabledBox: {
-        borderColor: Colors.black_03, backgroundColor: Colors.black_03
-    }
-});
-
-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;
+  };
+  return objStyle[type] || objStyle.medium;
 };
+
 export default class Quantity extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: props.defaultValue || props.min,
-            ownUpdate: false
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.defaultValue || props.min,
+      ownUpdate: false,
+    };
+  }
 
-    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;
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {value = undefined} = this?.props || {};
+    if (prevState.ownUpdate) {
+      return {
+        ownUpdate: false,
+      };
     }
-
-    onChangeValue = (value, type) => {
-        const { onChange } = this.props;
-        return onChange && typeof onChange === 'function' && onChange(value, type);
+    if (nextProps.value !== value && nextProps.value !== prevState.value) {
+      return {value: nextProps.value};
     }
+    return null;
+  }
 
-    getValue = (key) => {
-        const { isIncreaseValue, isDecreaseValue } = this.props;
-        const value = {
-            increase: isIncreaseValue ? 1 : 0,
-            decrease: isDecreaseValue ? 1 : 0,
-        };
-        return value[key];
+  onChangeValue = (value, type) => {
+    const {onChange} = this.props;
+    return onChange && typeof onChange === 'function' && onChange(value, type);
+  };
+
+  getValue = (key, step) => {
+    const {isIncreaseValue, isDecreaseValue} = this.props;
+    const value = {
+      increase: isIncreaseValue ? step : 0,
+      decrease: isDecreaseValue ? step : 0,
     };
+    return value[key];
+  };
 
-    setValue = (newValue, type) => {
-        this.setState({
-            value: newValue,
-            ownUpdate: true,
-        }, () => {
-            this.onChangeValue(newValue, type);
-        });
+  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 {
+      onValue(newValue, type);
     }
+  };
 
-    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);
-            }
+  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.onChangeValue(value, type);
+          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>
-        );
+  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 (
+        <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]}>
+          {isInput ? (
+            <TextInput
+              style={[{textAlignVertical: 'center'}, getSize(size).size]}
+              underlineColorAndroid="transparent"
+              value={value.toString()}
+              textAlign="center"
+              maxLength={3}
+              keyboardType="number-pad"
+              onChangeText={text => this.setValue(text)}
+            />
+          ) : (
+            <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>
+    );
+  }
 }
 
-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={ValueUtil.getImageSource(icon)}
-            style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
-        />
-    </TouchableOpacity>
+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', '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', '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]),
+  isInput: PropTypes.bool,
+  step: PropTypes.number,
 };
 
 Quantity.defaultProps = {
-    min: 1,
-    max: 100,
-    isChangeValue: true,
-    isIncreaseValue: true,
-    isDecreaseValue: true,
-    isSingle: false,
-    size: 'medium',
-    tintColor: Colors.pink_05_b,
-};
+  min: 1,
+  max: 100,
+  isChangeValue: true,
+  isIncreaseValue: true,
+  isDecreaseValue: true,
+  isSingle: false,
+  size: 'medium',
+  tintColor: Colors.pink_05_b,
+  isInput: false,
+  step: 1,
+};

package/index.js

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

package/package.json

@@ -1,22 +1,15 @@
 {
   "name": "@momo-kits/stepper",
-  "version": "0.0.33-beta",
+  "version": "0.0.36",
   "private": false,
   "main": "index.js",
   "dependencies": {},
   "peerDependencies": {
-    "react-native": ">=0.55",
+    "@momo-kits/core": ">=0.0.5-beta",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
-    "@momo-kits/core": ">=0.0.5-beta"
+    "react-native": ">=0.55"
   },
-  "devDependencies": {
-    "metro-react-native-babel-preset": "^0.64.0",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5"
-  },
-  "license": "MoMo",
-  "jest": {
-    "preset": "react-native"
-  }
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-echo  '{"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"}'

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    presets: ['module:metro-react-native-babel-preset'],
-};