@momo-kits/stepper 0.0.61-beta.19 → 0.0.61-beta.2

package/Stepper.js

@@ -1,264 +1,356 @@
-import {
-    Colors,
-    Image,
-    Radius,
-    Spacing,
-    Text,
-    TouchableOpacity,
-} from '@momo-kits/core-v2';
+import React, { Component } from 'react';
+import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import { StyleSheet, TextInput as Input, View } from 'react-native';
+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 Quantity = (props) => {
-    const {
-        disabled,
-        min = 0,
-        max = 5,
-        defaultValue = 0,
-        size,
-        onChange,
-        onIncreasePress,
-        onDecreasePress,
-        isInput = false,
-        step = 1,
-        style,
-    } = props;
-
-    const [value, setValue] = useState(defaultValue);
+const styles = StyleSheet.create({
+    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 = (size) => {
-        switch (size) {
-            case 'small':
-                return {
-                    button: {
-                        width: 20,
-                        height: 20,
-                        borderRadius: Radius.S + Radius.XXS,
-                    },
-                    icon: { width: 16, height: 16 },
-                    input: {
-                        minWidth: 20,
-                        minHeight: 16,
-                        borderRadius: Radius.S,
-                    },
-                    text: {
-                        fontSize: 10,
-                        lineHeight: 14,
-                    },
-                };
-            case 'medium':
-                return {
-                    button: {
-                        width: 28,
-                        height: 28,
-                        borderRadius: Radius.M + Radius.XXS,
-                    },
-                    icon: { width: 24, height: 24 },
-                    input: {
-                        minWidth: 28,
-                        minHeight: 24,
-                        borderRadius: Radius.S,
-                    },
-                    text: {
-                        fontSize: 12,
-                        lineHeight: 16,
-                    },
-                };
-            case 'large':
-                return {
-                    button: {
-                        width: 36,
-                        height: 36,
-                        borderRadius: Radius.L + Radius.XXS,
-                    },
-                    icon: { width: 24, height: 24 },
-                    input: {
-                        minWidth: 32,
-                        minHeight: 26,
-                        borderRadius: Radius.S,
-                    },
-                    text: {
-                        fontSize: 12,
-                        lineHeight: 16,
-                    },
-                };
-        }
+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;
+};
 
-    const validateValue = (value) => {
-        if (value < min) value = min;
-        if (value > max) value = max;
-        return value;
+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;
+};
 
-    const onDecrease = () => {
-        let newValue = value;
-        if (value > min) {
-            newValue = value - step;
-        }
-        if (newValue < min) newValue = min;
+export default class Quantity extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.defaultValue || props.min,
+            ownUpdate: false,
+        };
+    }
 
-        if (onDecreasePress && typeof onDecreasePress === 'function')
-            onDecreasePress(newValue);
+    componentDidMount() {
+        Keyboard.addListener(
+            'keyboardDidHide',
+            this.checkData(
+                this.state.value,
+                'increase',
+                this.props.min,
+                this.props.max,
+            ),
+        );
+    }
 
-        setValue(newValue);
-    };
+    componentWillUnmount() {
+        Keyboard.removeAllListeners('keyboardDidHide');
+    }
 
-    const onIncrease = () => {
-        let newValue = value;
-        if (value < max) {
-            newValue = value + step;
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const { value = undefined } = this?.props || {};
+        if (prevState.ownUpdate) {
+            return {
+                ownUpdate: false,
+            };
         }
-        if (newValue > max) newValue = max;
-
-        if (onIncreasePress && typeof onIncreasePress === 'function')
-            onIncreasePress(newValue);
+        if (nextProps.value !== value && nextProps.value !== prevState.value) {
+            return { value: nextProps.value };
+        }
+        return null;
+    }
 
-        setValue(newValue);
+    onChangeValue = (value, type) => {
+        const { onChange } = this.props;
+        return (
+            onChange && typeof onChange === 'function' && onChange(value, type)
+        );
     };
 
-    const onPressButton = (type) => {
-        if (type === 'plus') onIncrease();
-        else onDecrease();
+    getValue = (key, step) => {
+        const { isIncreaseValue, isDecreaseValue } = this.props;
+        const value = {
+            increase: isIncreaseValue ? parseInt(step) : 0,
+            decrease: isDecreaseValue ? parseInt(step) : 0,
+        };
+        return value[key];
     };
-    const renderButton = (type, size, icon) => {
-        let disabledStatus = props.disabled;
-        if (type === 'plus' && value === max) disabledStatus = true;
-        if (type === 'minus' && value === min) disabledStatus = true;
 
-        if (onPressButton)
-            return (
-                <TouchableOpacity
-                    disabled={disabledStatus}
-                    onPress={() => onPressButton(type)}
-                    style={[getStyle(size).button, styles.button]}>
-                    <Image
-                        source={icon}
-                        style={[
-                            getStyle(size).icon,
-                            styles.icon,
-                            disabledStatus && styles.disabledButton,
-                        ]}
-                    />
-                </TouchableOpacity>
-            );
+    setValue = (newValue = 0, type) => {
+        this.setState(
+            {
+                value: newValue,
+                ownUpdate: true,
+            },
+            () => {
+                this.onChangeValue(newValue, type);
+            },
+        );
     };
 
-    const onChangeText = (value) => {
-        let newValue = validateValue(parseInt(value)) || '0';
-        if (value.length > 1 && value[0] === 0) {
-            newValue = value.substring(1);
+    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);
+            });
         }
 
-        if (onChange && typeof onChange === 'function') onChange(newValue);
-
-        setValue(newValue);
+        console.log(value, min, max);
     };
 
-    console.log(value);
+    onPress =
+        (isIncrease = true, step) =>
+        () => {
+            const { isChangeValue, onConditionCheck } = this.props;
+            const { value } = this.state;
+            const type = isIncrease ? 'increase' : 'decrease';
+            if (isChangeValue && value !== '') {
+                const newValue = isIncrease
+                    ? parseInt(value) + this.getValue('increase', step)
+                    : parseInt(value) - this.getValue('decrease', step);
+                if (typeof onConditionCheck === 'function') {
+                    const passCondition = onConditionCheck(newValue, type);
+                    if (passCondition) {
+                        this.setValue(newValue, type);
+                    }
+                } else {
+                    this.setValue(newValue, type);
+                }
+            } else {
+                this.onChangeValue(value, type);
+            }
+        };
+
+    render() {
+        const { value } = this.state;
+        const {
+            style,
+            valueStyle,
+            size,
+            tintColor,
+            isIncreaseValue,
+            isSingle,
+            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]}>
+                    <IconButton
+                        tintColor={tintColor}
+                        size={size}
+                        disabled={value >= max || !isIncreaseValue}
+                        onPress={this.onPress(true, step)}
+                        icon={plus}
+                    />
+                </View>
+            );
+        }
+        const TextComp = Text[getStyle(size).text];
 
-    return (
-        <View style={style}>
-            <View style={styles.container}>
-                {renderButton('minus', size, minus)}
-                <View style={styles.inputContainer}>
+        return (
+            <View style={[styles.container, style]}>
+                <IconButton
+                    style={iconStyle}
+                    tintColor={tintColor}
+                    size={size}
+                    disabled={value === min || disabled}
+                    onPress={this.onPress(false, step)}
+                    icon={minus}
+                />
+                <View
+                    style={[styles.numberBox, getStyle(size).size, valueStyle]}>
                     {isInput ? (
-                        <Input
-                            textAlign="center"
-                            keyboardType="number-pad"
-                            inputMode="numeric"
-                            selectionColor={Colors.pink_03}
+                        <TextInput
                             style={[
-                                getStyle(size).input,
-                                styles.input,
-                                disabled && styles.disabledInput,
                                 {
-                                    fontSize: size === 'small' ? 10 : 12,
-                                    color: Colors.black_17,
+                                    textAlignVertical: 'center',
+                                    padding: 0,
                                 },
+                                getSize(size).size,
                             ]}
+                            underlineColorAndroid="transparent"
                             value={value.toString()}
-                            onChangeText={onChangeText}
-                            defaultValue={defaultValue.toString()}
+                            textAlign="center"
+                            maxLength={3}
+                            keyboardType="number-pad"
+                            editable={!disabled}
+                            onChangeText={(text) => {
+                                if (text[0] !== '0') {
+                                    this.setValue(text);
+                                }
+                            }}
+                            onEndEditing={this.checkData(
+                                value,
+                                'increase',
+                                min,
+                                max,
+                            )}
                         />
                     ) : (
-                        <View
-                            style={[
-                                getStyle(size).input,
-                                styles.input,
-                                disabled && styles.disabledInput,
-                            ]}>
-                            <Text style={getStyle(size).text}>
-                                {value.toString()}
-                            </Text>
-                        </View>
+                        <TextComp weight="bold" style={styles.text}>
+                            {value.toString()}
+                        </TextComp>
                     )}
                 </View>
-                {renderButton('plus', size, plus)}
+                <IconButton
+                    tintColor={tintColor}
+                    style={iconStyle}
+                    size={size}
+                    disabled={value >= max || !isIncreaseValue || disabled}
+                    onPress={this.onPress(true, step)}
+                    icon={plus}
+                />
             </View>
-        </View>
-    );
-};
+        );
+    }
+}
 
-const styles = StyleSheet.create({
-    button: {
-        backgroundColor: Colors.black_03,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    icon: {
-        tintColor: Colors.pink_03,
-    },
-    container: {
-        flexDirection: 'row',
-    },
-    input: {
-        borderWidth: 1,
-        borderColor: Colors.black_04,
-        marginHorizontal: Spacing.M,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: Spacing.XS,
-    },
-    inputContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    disabledButton: {
-        tintColor: Colors.black_08,
-    },
-    disabledInput: {
-        opacity: 0.4,
-    },
-});
+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,
     disabled: PropTypes.bool,
+    tintColor: PropTypes.string,
+    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     isInput: PropTypes.bool,
     step: PropTypes.number,
-    onIncreasePress: PropTypes.func,
-    onDecreasePress: PropTypes.func,
 };
 
 Quantity.defaultProps = {
-    min: 0,
-    max: 5,
+    min: 1,
+    max: 100,
+    isChangeValue: true,
+    isIncreaseValue: true,
+    isDecreaseValue: true,
+    isSingle: false,
     size: 'medium',
+    tintColor: Colors.pink_05_b,
     isInput: false,
     disabled: false,
     step: 1,
 };
-
-export default Quantity;

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@momo-kits/stepper",
-    "version": "0.0.61-beta.19",
+    "version": "0.0.61-beta.2",
     "private": false,
     "main": "index.js",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
+        "@momo-kits/core": ">=0.0.5-beta",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"