@momo-kits/stepper 0.0.18-beta-1 → 0.0.19-beta-1

package/Stepper.js

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
-import {View, StyleSheet, TextInput} 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';
+import {max, min} from 'react-native-reanimated';
 
 const minus =
   'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
@@ -122,6 +123,22 @@ export default class Quantity extends Component {
     };
   }
 
+  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) {
@@ -140,48 +157,51 @@ export default class Quantity extends Component {
     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 ? step : 0,
+      decrease: isDecreaseValue ? step : 0,
     };
     return value[key];
   };
 
   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);
-        },
-      );
-    };
+    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);
+  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) =>
+    (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')
-          : value - this.getValue('decrease');
+          ? parseInt(value) + this.getValue('increase', step)
+          : parseInt(value) - this.getValue('decrease', step);
         if (typeof onConditionCheck === 'function') {
           const passCondition = onConditionCheck(newValue, type);
           if (passCondition) {
@@ -199,7 +219,6 @@ export default class Quantity extends Component {
     const {value} = this.state;
     const {
       style,
-      max,
       valueStyle,
       size,
       tintColor,
@@ -208,8 +227,10 @@ export default class Quantity extends Component {
       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]}>
@@ -217,7 +238,7 @@ export default class Quantity extends Component {
             tintColor={tintColor}
             size={size}
             disabled={value >= max || !isIncreaseValue}
-            onPress={this.onPress(true)}
+            onPress={this.onPress(true, step)}
             icon={plus}
           />
         </View>
@@ -231,7 +252,7 @@ export default class Quantity extends Component {
           tintColor={tintColor}
           size={size}
           disabled={value === min || disabled}
-          onPress={this.onPress(false)}
+          onPress={this.onPress(false, step)}
           icon={minus}
         />
         <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
@@ -245,6 +266,7 @@ export default class Quantity extends Component {
               keyboardType="number-pad"
               editable={!disabled}
               onChangeText={text => this.setValue(text)}
+              onEndEditing={this.checkData(value, 'increase', min, max)}
             />
           ) : (
             <TextComp weight="bold" style={styles.text}>
@@ -257,7 +279,7 @@ export default class Quantity extends Component {
           style={iconStyle}
           size={size}
           disabled={value >= max || !isIncreaseValue || disabled}
-          onPress={this.onPress(true)}
+          onPress={this.onPress(true, step)}
           icon={plus}
         />
       </View>
@@ -298,6 +320,7 @@ Quantity.propTypes = {
   tintColor: PropTypes.string,
   iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   isInput: PropTypes.bool,
+  step: PropTypes.number,
 };
 
 Quantity.defaultProps = {
@@ -311,4 +334,5 @@ Quantity.defaultProps = {
   tintColor: Colors.pink_05_b,
   isInput: false,
   disabled: false,
+  step: 1,
 };

package/Stepper.web.js

@@ -1,278 +1,319 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
-    View, StyleSheet, TouchableOpacity, Image, TextInput
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  TextInput,
 } from 'react-native';
 import PropTypes from 'prop-types';
 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;
 };
 
-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
-            },
-        }
-
+export default class Quantity extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.defaultValue || props.min,
+      ownUpdate: false,
     };
-    return objStyle[type] || objStyle.medium;
-};
+  }
 
-
-export default class Quantity extends Component {
-    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,
+      };
     }
-
-    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 (nextProps.value !== value && nextProps.value !== prevState.value) {
+      return {value: nextProps.value};
     }
+    return null;
+  }
 
-    onChangeValue = (value, type) => {
-        const { onChange } = this.props;
-        return onChange && typeof onChange === 'function' && onChange(value, type);
-    }
+  onChangeValue = (value, type) => {
+    const {onChange} = this.props;
+    return onChange && typeof onChange === 'function' && onChange(value, type);
+  };
 
-    getValue = (key) => {
-        const { isIncreaseValue, isDecreaseValue } = this.props;
-        const value = {
-            increase: isIncreaseValue ? 1 : 0,
-            decrease: isDecreaseValue ? 1 : 0,
-        };
-        return value[key];
+  getValue = (key, step) => {
+    const {isIncreaseValue, isDecreaseValue} = this.props;
+    const value = {
+      increase: isIncreaseValue ? step : 0,
+      decrease: isDecreaseValue ? step : 0,
     };
+    return value[key];
+  };
 
-    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);
-            });
-        };
+  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)
-        }
+    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) =>
+    () => {
+      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, 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>
-        );
+  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
+const IconButton = ({disabled, onPress, icon, size, tintColor, style}) => (
+  <TouchableOpacity
+    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]}
+      source={icon}
+      style={[
+        getStyle(size).icon,
+        {tintColor},
+        disabled && styles.disabledIcon,
+      ]}
     />
-    </TouchableOpacity>
+  </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]),
-    isInput: PropTypes.bool,
+  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,
-    isInput: false
+  min: 1,
+  max: 100,
+  isChangeValue: true,
+  isIncreaseValue: true,
+  isDecreaseValue: true,
+  isSingle: false,
+  size: 'medium',
+  tintColor: Colors.pink_05_b,
+  isInput: false,
+  step: 1,
 };
-

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@momo-kits/stepper",
-  "version": "0.0.18-beta-1",
+  "version": "0.0.19-beta-1",
   "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": {},
   "license": "MoMo"
-}
+}