@momo-kits/stepper 0.0.10 → 0.0.12

package/Stepper.js

@@ -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) => () => {
@@ -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(type).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(type).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(type).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

@@ -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) => () => {
@@ -167,18 +202,27 @@ export default class Quantity extends Component {
                 <IconButton
                     style={iconStyle}
                     tintColor={tintColor}
-                    size={size}
+                    type={type}
                     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 style={[styles.numberBox, getStyle(type).size, valueStyle]}>
+                    {
+                        isInput ? <TextInput 
+                        style={[{textAlignVertical: 'center'}, getSize(type).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}
+                    type={type}
                     disabled={(value >= max || !isIncreaseValue)}
                     onPress={this.onPress(true)}
                     icon={plus}
@@ -192,19 +236,19 @@ 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(type).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(type).icon, { tintColor }, disabled && styles.disabledIcon]}
+    />
     </TouchableOpacity>
 );
 
 Quantity.propTypes = {
-    size: PropTypes.oneOf(['large', 'medium', 'small']),
+    type: PropTypes.oneOf(['large', 'medium', 'small']),
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     min: PropTypes.number,
@@ -218,6 +262,7 @@ Quantity.propTypes = {
     isSingle: PropTypes.bool,
     tintColor: PropTypes.string,
     iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    isInput: PropTypes.bool,
 };
 
 Quantity.defaultProps = {
@@ -227,6 +272,7 @@ Quantity.defaultProps = {
     isIncreaseValue: true,
     isDecreaseValue: true,
     isSingle: false,
-    size: 'medium',
+    type: 'medium',
     tintColor: Colors.pink_05_b,
+    isInput: false
 };

package/package.json

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