@momo-kits/stepper 0.0.9 → 0.0.14

package/Stepper.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-    View, StyleSheet
+    View, StyleSheet, TextInput
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {
@@ -79,6 +79,30 @@ const getStyle = (type) => {
     };
     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);
@@ -114,13 +138,24 @@ export default class Quantity extends Component {
         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) => () => {
@@ -145,7 +180,7 @@ export default class Quantity extends Component {
     render() {
         const { value } = this.state;
         const {
-            style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle
+            style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle, isInput
         } = this.props;
         const { min } = this.props || 1;
         if (isSingle && value === 0) {
@@ -173,7 +208,16 @@ export default class Quantity extends Component {
                     icon={minus}
                 />
                 <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
-                    <TextComp weight="bold" style={styles.text}>{value}</TextComp>
+                    {
+                        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}
@@ -192,14 +236,14 @@ const IconButton = ({
     disabled, onPress, icon, size, tintColor, style
 }) => (
     <TouchableOpacity
-        style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
-        disabled={disabled}
-        onPress={onPress}
+    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]}
-        />
+    <Image
+        source={icon}
+        style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
+    />
     </TouchableOpacity>
 );
 
@@ -218,6 +262,7 @@ Quantity.propTypes = {
     isSingle: PropTypes.bool,
     tintColor: PropTypes.string,
     iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    isInput: PropTypes.bool,
 };
 
 Quantity.defaultProps = {
@@ -229,4 +274,5 @@ Quantity.defaultProps = {
     isSingle: false,
     size: 'medium',
     tintColor: Colors.pink_05_b,
+    isInput: false
 };

package/Stepper.web.js

@@ -1,11 +1,10 @@
 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 '../../core/components/typography';
 import Colors from '../../core/colors';
-import ValueUtil from '../../core/utils/ValueUtil';
 
 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';
@@ -79,6 +78,30 @@ const getStyle = (type) => {
     };
     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);
@@ -114,13 +137,24 @@ export default class Quantity extends Component {
         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) => () => {
@@ -145,7 +179,7 @@ export default class Quantity extends Component {
     render() {
         const { value } = this.state;
         const {
-            style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle
+            style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle, isInput
         } = this.props;
         const { min } = this.props || 1;
         if (isSingle && value === 0) {
@@ -173,7 +207,16 @@ export default class Quantity extends Component {
                     icon={minus}
                 />
                 <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
-                    <TextComp weight="bold" style={styles.text}>{value}</TextComp>
+                    {
+                        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}
@@ -192,14 +235,14 @@ const IconButton = ({
     disabled, onPress, icon, size, tintColor, style
 }) => (
     <TouchableOpacity
-        style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
-        disabled={disabled}
-        onPress={onPress}
+    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]}
-        />
+    <Image
+        source={icon}
+        style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
+    />
     </TouchableOpacity>
 );
 
@@ -218,6 +261,7 @@ Quantity.propTypes = {
     isSingle: PropTypes.bool,
     tintColor: PropTypes.string,
     iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    isInput: PropTypes.bool,
 };
 
 Quantity.defaultProps = {
@@ -229,4 +273,6 @@ Quantity.defaultProps = {
     isSingle: false,
     size: 'medium',
     tintColor: Colors.pink_05_b,
+    isInput: false
 };
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/stepper",
-  "version": "0.0.9",
+  "version": "0.0.14",
   "private": false,
   "main": "index.js",
   "dependencies": {},