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

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) {
@@ -150,26 +167,29 @@ export default class Quantity extends Component {
   };
 
   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 =
@@ -178,10 +198,10 @@ export default class Quantity extends Component {
       const {isChangeValue, onConditionCheck} = this.props;
       const {value} = this.state;
       const type = isIncrease ? 'increase' : 'decrease';
-      if (isChangeValue) {
+      if (isChangeValue && value !== '') {
         const newValue = isIncrease
-          ? value + this.getValue('increase', step)
-          : value - this.getValue('decrease', step);
+          ? 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,
@@ -211,6 +230,7 @@ export default class Quantity extends Component {
       step,
     } = this.props;
     const {min} = this.props || 1;
+    const {max} = this.props || 999;
     if (isSingle && value === 0) {
       return (
         <View style={[styles.container, style]}>
@@ -246,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}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/stepper",
-  "version": "0.0.18-beta-2",
+  "version": "0.0.19-beta-2",
   "private": false,
   "main": "index.js",
   "dependencies": {},