@momo-kits/stepper 0.0.60-rc.6 → 0.0.61-alpha.8

package/Stepper.js

@@ -1,356 +1,264 @@
-import React, { Component } from 'react';
-import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
+import {
+    Colors,
+    Image,
+    Radius,
+    Spacing,
+    Text,
+    TouchableOpacity,
+} from '@momo-kits/core-v2';
 import PropTypes from 'prop-types';
-import { Text, Colors, Image, TouchableOpacity } from '@momo-kits/core';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput as Input, View } from 'react-native';
 
 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,
-        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 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 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',
-        },
+    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,
+                    },
+                };
+        }
     };
-    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
-            },
-        },
+    const validateValue = (value) => {
+        if (value < min) value = min;
+        if (value > max) value = max;
+        return value;
     };
-    return objStyle[type] || objStyle.medium;
-};
 
-export default class Quantity extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: props.defaultValue || props.min,
-            ownUpdate: false,
-        };
-    }
+    const onDecrease = () => {
+        let newValue = value;
+        if (value > min) {
+            newValue = value - step;
+        }
+        if (newValue < min) newValue = min;
 
-    componentDidMount() {
-        Keyboard.addListener(
-            'keyboardDidHide',
-            this.checkData(
-                this.state.value,
-                'increase',
-                this.props.min,
-                this.props.max,
-            ),
-        );
-    }
+        if (onDecreasePress && typeof onDecreasePress === 'function')
+            onDecreasePress(newValue);
 
-    componentWillUnmount() {
-        Keyboard.removeAllListeners('keyboardDidHide');
-    }
+        setValue(newValue);
+    };
 
-    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 };
+    const onIncrease = () => {
+        let newValue = value;
+        if (value < max) {
+            newValue = value + step;
         }
-        return null;
-    }
+        if (newValue > max) newValue = max;
 
-    onChangeValue = (value, type) => {
-        const { onChange } = this.props;
-        return (
-            onChange && typeof onChange === 'function' && onChange(value, type)
-        );
+        if (onIncreasePress && typeof onIncreasePress === 'function')
+            onIncreasePress(newValue);
+
+        setValue(newValue);
     };
 
-    getValue = (key, step) => {
-        const { isIncreaseValue, isDecreaseValue } = this.props;
-        const value = {
-            increase: isIncreaseValue ? parseInt(step) : 0,
-            decrease: isDecreaseValue ? parseInt(step) : 0,
-        };
-        return value[key];
+    const onPressButton = (type) => {
+        if (type === 'plus') onIncrease();
+        else onDecrease();
     };
+    const renderButton = (type, size, icon) => {
+        let disabledStatus = props.disabled;
+        if (type === 'plus' && value === max) disabledStatus = true;
+        if (type === 'minus' && value === min) disabledStatus = true;
 
-    setValue = (newValue = 0, type) => {
-        this.setState(
-            {
-                value: newValue,
-                ownUpdate: true,
-            },
-            () => {
-                this.onChangeValue(newValue, type);
-            },
-        );
+        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>
+            );
     };
 
-    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);
-            });
+    const onChangeText = (value) => {
+        let newValue = validateValue(parseInt(value)) || '0';
+        if (value.length > 1 && value[0] === 0) {
+            newValue = value.substring(1);
         }
 
-        console.log(value, min, max);
-    };
+        if (onChange && typeof onChange === 'function') onChange(newValue);
 
-    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);
-            }
-        };
+        setValue(newValue);
+    };
 
-    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];
+    console.log(value);
 
-        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]}>
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                {renderButton('minus', size, minus)}
+                <View style={styles.inputContainer}>
                     {isInput ? (
-                        <TextInput
+                        <Input
+                            textAlign="center"
+                            keyboardType="number-pad"
+                            inputMode="numeric"
+                            selectionColor={Colors.pink_03}
                             style={[
+                                getStyle(size).input,
+                                styles.input,
+                                disabled && styles.disabledInput,
                                 {
-                                    textAlignVertical: 'center',
-                                    padding: 0,
+                                    fontSize: size === 'small' ? 10 : 12,
+                                    color: Colors.black_17,
                                 },
-                                getSize(size).size,
                             ]}
-                            underlineColorAndroid="transparent"
                             value={value.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,
-                            )}
+                            onChangeText={onChangeText}
+                            defaultValue={defaultValue.toString()}
                         />
                     ) : (
-                        <TextComp weight="bold" style={styles.text}>
-                            {value.toString()}
-                        </TextComp>
+                        <View
+                            style={[
+                                getStyle(size).input,
+                                styles.input,
+                                disabled && styles.disabledInput,
+                            ]}>
+                            <Text style={getStyle(size).text}>
+                                {value.toString()}
+                            </Text>
+                        </View>
                     )}
                 </View>
-                <IconButton
-                    tintColor={tintColor}
-                    style={iconStyle}
-                    size={size}
-                    disabled={value >= max || !isIncreaseValue || disabled}
-                    onPress={this.onPress(true, step)}
-                    icon={plus}
-                />
+                {renderButton('plus', size, plus)}
             </View>
-        );
-    }
-}
+        </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 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,
+    },
+});
 
 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: 1,
-    max: 100,
-    isChangeValue: true,
-    isIncreaseValue: true,
-    isDecreaseValue: true,
-    isSingle: false,
+    min: 0,
+    max: 5,
     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.60-rc.6",
+    "version": "0.0.61-alpha.8",
     "private": false,
     "main": "index.js",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/core": ">=0.0.5-beta",
+        "@momo-kits/core-v2": ">=0.0.5-beta",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"