@momo-kits/stepper 0.0.1

package/Stepper.js

@@ -0,0 +1,232 @@
+import React, { Component } from 'react';
+import {
+    View, StyleSheet
+} from 'react-native';
+import PropTypes from 'prop-types';
+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 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 = (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;
+};
+export default class Quantity extends Component {
+    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;
+    }
+
+    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];
+    };
+
+    setValue = (newValue, type) => {
+        this.setState({
+            value: newValue,
+            ownUpdate: true,
+        }, () => {
+            this.onChangeValue(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);
+            }
+        } 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>
+        );
+    }
+}
+
+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]),
+};
+
+Quantity.defaultProps = {
+    min: 1,
+    max: 100,
+    isChangeValue: true,
+    isIncreaseValue: true,
+    isDecreaseValue: true,
+    isSingle: false,
+    size: 'medium',
+    tintColor: Colors.pink_05_b,
+};

package/Stepper.web.js

@@ -0,0 +1,232 @@
+import React, { Component } from 'react';
+import {
+    View, StyleSheet, TouchableOpacity, Image
+} 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';
+
+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 = (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;
+};
+export default class Quantity extends Component {
+    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;
+    }
+
+    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];
+    };
+
+    setValue = (newValue, type) => {
+        this.setState({
+            value: newValue,
+            ownUpdate: true,
+        }, () => {
+            this.onChangeValue(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);
+            }
+        } 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>
+        );
+    }
+}
+
+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]),
+};
+
+Quantity.defaultProps = {
+    min: 1,
+    max: 100,
+    isChangeValue: true,
+    isIncreaseValue: true,
+    isDecreaseValue: true,
+    isSingle: false,
+    size: 'medium',
+    tintColor: Colors.pink_05_b,
+};

package/index.js

@@ -0,0 +1,3 @@
+import Stepper from './Stepper';
+
+export default Stepper;

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@momo-kits/stepper",
+  "version": "0.0.1",
+  "private": false,
+  "main": "index.js",
+  "dependencies": {},
+  "peerDependencies": {
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2",
+    "react": "16.9.0",
+    "@momo-kits/core": ">=0.0.5-beta"
+  },
+  "devDependencies": {},
+  "license": "MoMo"
+}

package/publish.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --access=public
+cd ..
+rm -rf dist
+
+
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'