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

package/Stepper.js

@@ -1,232 +1,314 @@
-import React, { Component } from 'react';
-import {
-    View, StyleSheet
-} from 'react-native';
+import React, {Component} from 'react';
+import {View, StyleSheet, TextInput} from 'react-native';
 import PropTypes from 'prop-types';
-import {
-    Text, Colors, Image, TouchableOpacity
-} from '@momo-kits/core';
+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: {
-        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;
+  }
+
+  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 => {
+    const {isIncreaseValue, isDecreaseValue} = this.props;
+    const value = {
+      increase: isIncreaseValue ? 1 : 0,
+      decrease: isDecreaseValue ? 1 : 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) =>
+    () => {
+      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.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,
+      disabled,
+    } = 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 || disabled}
+          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"
+              editable={!disabled}
+              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 || disabled}
+          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={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,
+  disabled: PropTypes.bool,
+  tintColor: PropTypes.string,
+  iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  isInput: PropTypes.bool,
 };
 
 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,
+  disabled: 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.10",
+  "version": "0.0.18-beta-1",
   "private": false,
   "main": "index.js",
   "dependencies": {},