@momo-kits/step 0.0.61-rc.1 → 0.0.62-alpha.13

package/Step.vertical.web.js

@@ -1,401 +1,216 @@
-import React, { Component } from 'react';
-import { View, StyleSheet, Image, ScrollView } from 'react-native';
-
 import PropTypes from 'prop-types';
+import React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
 import Colors from '../../core/colors';
 import Text from '../../core/components/typography';
+import Spacing from '../../core/spacing';
+
 import { Icons as IconSource } from '../../core/icons';
 
 const CIRCLE_SIZE = 24;
+const CIRCLE_TEXT_SIZE = 12;
+const ICON_SIZE = 16;
+const ICON_URL = IconSource.ic_check_24;
+const TITLE_SIZE = { size: 14, lineHeight: 20 };
+const SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+const CONTENT_SIZE = { size: 12, lineHeight: 16 };
+function VerticalStep(props) {
+    VerticalStep.displayName = 'VerticalStep';
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+    } = props;
+
+    const renderCircle = (index) => {
+        let circleColor = inactiveCircleColor;
+        let borderColor = inactiveBorderColor;
+
+        if (index < currentStep) circleColor = checkedCircleColor;
+        else if (index === currentStep) circleColor = activeCircleColor;
+
+        if (index <= currentStep) borderColor = activeBorderColor;
 
-const styles = StyleSheet.create({
-    circle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderRadius: CIRCLE_SIZE / 2,
-        borderWidth: 2,
-        padding: 4,
-    },
-    iconImage: {
-        width: 16,
-        height: 16,
-        position: 'absolute',
-        top: 2,
-        left: 2,
-    },
-    titleDefault: {
-        color: Colors.black_12,
-        fontSize: 14,
-        fontWeight: 'normal',
-    },
-    titleActive: {
-        color: Colors.black_17,
-        fontSize: 14,
-        fontWeight: 'bold',
-    },
-    container: {
-        width: '100%',
-        paddingRight: 48,
-        marginTop: 4,
-    },
-    titleAndDate: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    description: {
-        fontSize: 12,
-        color: Colors.black_12,
-        marginBottom: 16,
-        paddingTop: 4,
-        paddingLeft: 11,
-    },
-    date: {
-        fontSize: 10,
-        color: Colors.black_12,
-    },
-    number: {
-        fontSize: 12,
-        color: 'white',
-        textAlign: 'center',
-        lineHeight: 13,
-    },
-    lineVertical: {
-        marginLeft: 11,
-        width: 2,
-        minHeight: 10,
-        marginTop: 4,
-        marginBottom: 4,
-        flex: 1,
-    },
-    minHeight: {
-        minHeight: 12,
-        marginBottom: 4,
-    },
-});
-
-export default class VerticalStep extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            width: 0,
-            height: 0,
-        };
-    }
-
-    onLayout = (e) => {
-        this.setState({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    };
-
-    /* #region  render cust */
-    _renderCircleImage = ({ icon = '', circleColor, circleBorderColor }) => {
         return (
-            <View>
-                <View
-                    style={[
-                        styles.circle,
-                        {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
-                        },
-                    ]}>
-                    <Image
-                        source={icon}
-                        style={[styles.iconImage, { tintColor: '#ffffff' }]}
-                    />
-                </View>
+            <View
+                style={[
+                    styles.circle,
+                    {
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(index)}
             </View>
         );
     };
 
-    _renderCircleText = ({
-        circleColor = '',
-        circleBorderColor = '',
-        index = 0,
-    }) => {
-        return (
-            <View>
-                <View
-                    style={[
-                        styles.circle,
-                        {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
-                        },
-                    ]}>
-                    <Text style={styles.number}>{index + 1}</Text>
-                </View>
-            </View>
-        );
-    };
-
-    _renderCircle = ({
-        circleColor = '',
-        circleBorderColor = '',
-        isActiveState = false,
-        circleUnchecked = false,
-        iconActive,
-        iconUnchecked,
-        icon = {},
-        index = 0,
-    }) => {
-        let resultComponent = <></>;
-        if (!isActiveState) {
-            if (circleUnchecked) {
-                if (Object.keys(iconUnchecked).length === 0) {
-                    resultComponent = this._renderCircleImage({
-                        icon,
-                        circleColor,
-                        circleBorderColor,
-                    });
-                } else {
-                    resultComponent = this._renderCircleText({
-                        circleColor,
-                        circleBorderColor,
-                        index,
-                    });
-                }
-            } else {
-                resultComponent = this._renderCircleImage({
-                    icon,
-                    circleColor,
-                    circleBorderColor,
-                });
-            }
-        } else {
-            // This is active case
-            // If icon diff "" & regex http or https url so will render image component
-            if (Object.keys(iconActive).length === 0) {
-                resultComponent = this._renderCircleImage({
-                    icon,
-                    circleColor,
-                    circleBorderColor,
-                });
-            } else {
-                // Otherwise render index number in text component
-                resultComponent = resultComponent = this._renderCircleText({
-                    circleColor,
-                    circleBorderColor,
-                    index,
-                });
-            }
+    const renderCircleContent = (index) => {
+        if (type === 'check') {
+            return <Image source={ICON_URL} style={styles.icon} />;
+        } else if (type === 'combine') {
+            return index < currentStep ? (
+                <Image source={ICON_URL} style={styles.icon} />
+            ) : (
+                <Text style={styles.circleText}>{index + 1}</Text>
+            );
         }
-        return resultComponent;
+        return <Text style={styles.circleText}>{index + 1}</Text>;
     };
 
-    _renderLine = ({ titles = {}, index = 0, lineActive = '' }) => {
-        let resultComponent = <></>;
+    const renderLine = (index) => {
+        if (index === steps.length - 1) return null;
+        const lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
 
-        if (titles?.length - 1 !== index) {
-            resultComponent = (
-                <View
-                    style={[
-                        styles.lineVertical,
-                        {
-                            backgroundColor: lineActive,
-                        },
-                    ]}
-                />
-            );
-        }
-        return resultComponent;
+        return (
+            <View style={[styles.line, { backgroundColor: lineColor }]}></View>
+        );
     };
 
-    _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
-        let resultComponent = (
-            <View>
-                <Text.Caption
-                    style={[{ marginLeft: 10 }, textFontStyle, titleStyle]}>
-                    {value}
-                </Text.Caption>
+    const renderHeader = (title, subTitle, index) => {
+        const weight = index === currentStep ? '600' : '400';
+
+        return (
+            <View style={styles.header}>
+                <Text style={[styles.title, { fontWeight: weight }]}>
+                    {title}
+                </Text>
+                <Text style={styles.subTitle}>{subTitle}</Text>
             </View>
         );
-        return resultComponent;
-    };
-
-    _renderDateOrValue = ({
-        date = '',
-        isActiveState = false,
-        circleChecked = false,
-        dateStyle = {},
-        index = 0,
-    }) => {
-        // Init states in render function
-        let resultComponent = <></>;
-        if (!date) {
-            return resultComponent;
-        }
-        if (isActiveState || circleChecked) {
-            resultComponent = (
-                <Text style={[styles.date, dateStyle]}>{date[index]}</Text>
-            );
-        }
-        return resultComponent;
     };
 
-    _renderDescription = ({ items = {}, descriptionStyle = {}, index = 0 }) => {
-        let resultComponent = <></>;
-
-        if (items) {
-            resultComponent = (
-                <View>
-                    {typeof items[index] == 'string' ? (
-                        <Text style={[styles.description, descriptionStyle]}>
-                            {items[index]}
-                        </Text>
-                    ) : (
-                        <View style={[styles.description]}>{items[index]}</View>
-                    )}
-                </View>
-            );
-        }
-        return resultComponent;
+    const renderContent = (content, index) => {
+        return (
+            <View style={styles.content}>
+                {content && typeof content === 'string' ? (
+                    <Text style={styles.contentText}>{content}</Text>
+                ) : (
+                    content
+                )}
+            </View>
+        );
     };
-    /* #endregion */
-
-    circleColumn = (value, index) => {
-        const {
-            currentStep,
-            titles,
-            iconActive,
-            iconChecked,
-            iconUnchecked,
-            circleColorActive,
-            circleColorChecked,
-            circleColorUnchecked,
-            circleBorderColorActive,
-            circleBorderColorChecked,
-            circleBorderColorUnchecked,
-            lineColorActive,
-            lineColorInActive,
-            items,
-            date,
-            titleStyle,
-            descriptionStyle,
-            dateStyle,
-        } = this.props;
-
-        // Three circle states
-        const isActiveState = currentStep == index + 1;
-        const circleChecked = currentStep > index + 1;
-        const circleUnchecked = currentStep < index + 1;
-
-        // Default properties is inactive state
-        let icon = {};
-        let circleColor = circleColorUnchecked || Colors.black_06;
-        let circleBorderColor = circleBorderColorUnchecked || Colors.black_04;
-        let textFontStyle = styles.titleDefault;
-        let lineActive = lineColorInActive || Colors.black_04;
-
-        let tintColor = '#ffd6e7';
-
-        // This is all properties in active state
-        if (isActiveState) {
-            icon = iconActive || index + 1;
-            circleColor = circleColorActive || '#d82d8b';
-            circleBorderColor = circleBorderColorActive || Colors.pink_09;
-            textFontStyle = styles.titleActive;
-        }
-
-        if (circleChecked) {
-            icon = iconChecked || IconSource.ic_check_24;
-            lineActive = lineColorActive || tintColor;
-            circleColor = circleColorChecked || '#ffadd2';
-            circleBorderColor = circleBorderColorChecked || Colors.pink_09;
-        }
-
-        if (circleUnchecked) {
-            icon = iconUnchecked || index + 1;
-        }
 
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content } = item;
         return (
-            <View key={index} style={{ flexDirection: 'row' }}>
-                <View>
-                    {this._renderCircle({
-                        circleColor,
-                        circleBorderColor,
-                        isActiveState,
-                        circleUnchecked,
-                        iconActive,
-                        iconUnchecked,
-                        icon,
-                        index,
-                    })}
-                    {this._renderLine({
-                        titles,
-                        index,
-                        lineActive,
-                    })}
+            <View
+                key={index.toString()}
+                style={{
+                    flexDirection: 'row',
+                }}>
+                <View style={styles.circleContainer}>
+                    {renderCircle(index)}
+                    {renderLine(index)}
                 </View>
-                <View style={styles.container}>
-                    <View style={styles.titleAndDate}>
-                        {this._renderTitle({
-                            textFontStyle,
-                            titleStyle,
-                            value,
-                        })}
-                        {this._renderDateOrValue({
-                            date,
-                            isActiveState,
-                            circleChecked,
-                            dateStyle,
-                            index,
-                        })}
-                    </View>
-                    {this._renderDescription({
-                        items,
-                        descriptionStyle,
-                        index,
-                    })}
+                <View style={styles.contentContainer}>
+                    {renderHeader(title, subTitle, index)}
+                    {renderContent(content, index)}
                 </View>
             </View>
         );
     };
 
-    renderCircle = () => {
-        const { titles = [[]] } = this.props;
-        return titles.map(this.circleColumn);
-    };
-
-    render() {
-        return (
-            <ScrollView>
-                <View onLayout={this.onLayout}>
-                    <View style={[styles.circleColumn]}>
-                        {this.renderCircle()}
-                    </View>
-                </View>
-            </ScrollView>
-        );
-    }
+    return (
+        <View style={style}>
+            {steps.map((item, index) => {
+                return renderStepPart(item, index);
+            })}
+        </View>
+    );
 }
 
+export default VerticalStep;
+
+const styles = StyleSheet.create({
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS, minHeight: 60 },
+    contentText: {
+        fontSize: CONTENT_SIZE.size,
+        lineHeight: CONTENT_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    title: {
+        lineHeight: TITLE_SIZE.lineHeight,
+        fontSize: TITLE_SIZE.size,
+    },
+    subTitle: {
+        fontSize: SUBTITLE_SIZE.size,
+        lineHeight: SUBTITLE_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    line: {
+        width: 2,
+        flex: 1,
+        marginVertical: Spacing.XS,
+        borderRadius: 1,
+    },
+    icon: {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        tintColor: Colors.white,
+    },
+    circleText: {
+        fontSize: CIRCLE_TEXT_SIZE,
+        color: Colors.white,
+        fontWeight: '600',
+    },
+});
+
 VerticalStep.propTypes = {
-    titles: PropTypes.array,
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
+    }),
     currentStep: PropTypes.number,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    items: PropTypes.array,
-    isVertical: PropTypes.bool,
-    iconActive: PropTypes.any,
-    iconChecked: PropTypes.any,
-    iconUnchecked: PropTypes.any,
-    circleColorActive: PropTypes.string,
-    circleColorChecked: PropTypes.string,
-    circleColorUnchecked: PropTypes.string,
-    circleBorderColorActive: PropTypes.string,
-    circleBorderColorChecked: PropTypes.string,
-    circleBorderColorUnchecked: PropTypes.string,
-    lineColorActive: PropTypes.string,
-    lineColorInActive: PropTypes.string,
-    titleStyle: PropTypes.object,
-    descriptionStyle: PropTypes.object,
-    dateStyle: PropTypes.object,
+    type: PropTypes.oneOf(['check', 'combine', 'text']),
+    activeCircleColor: PropTypes.string,
+    inactiveCircleColor: PropTypes.string,
+    checkedCircleColor: PropTypes.string,
+    activeBorderColor: PropTypes.string,
+    inactiveBorderColor: PropTypes.string,
+    activeLineColor: PropTypes.string,
+    inactiveLineColor: PropTypes.string,
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 };
 
 VerticalStep.defaultProps = {
-    titles: [],
     currentStep: 0,
+    type: 'check',
+    activeCircleColor: Colors.pink_05_b,
+    inactiveCircleColor: Colors.black_06,
+    checkedCircleColor: '#f382c0',
+    activeBorderColor: Colors.pink_09,
+    inactiveBorderColor: Colors.black_04,
+    activeLineColor: '#fbd5ea',
+    inactiveLineColor: Colors.black_04,
 };

package/Step.web.js

@@ -6,56 +6,46 @@ import VerticalStep from './Step.vertical.web.js';
 import Colors from '../../core/colors';
 import { Icons as IconSource } from '../../core/icons';
 
-export default class Step extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        const { isVertical } = this.props;
-        let DefaultComponent = HorizontalStep;
-        if (isVertical) {
-            DefaultComponent = VerticalStep;
-        }
-        return <DefaultComponent {...this.props} />;
+function Step(props) {
+    const { isVertical } = props;
+    if (isVertical) {
+        return <VerticalStep {...props} />;
     }
+    return <HorizontalStep {...props} />;
 }
+export default Step;
 
 Step.propTypes = {
-    titles: PropTypes.array,
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
+        error: PropTypes.bool,
+    }),
     currentStep: PropTypes.number,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    items: PropTypes.array,
-    isVertical: PropTypes.bool,
-    iconActive: PropTypes.any,
-    iconChecked: PropTypes.any,
-    iconUnchecked: PropTypes.any,
-    circleColorActive: PropTypes.string,
-    circleColorChecked: PropTypes.string,
-    circleColorUnchecked: PropTypes.string,
-    circleBorderColorActive: PropTypes.string,
-    circleBorderColorChecked: PropTypes.string,
-    circleBorderColorUnchecked: PropTypes.string,
-    lineColorActive: PropTypes.string,
-    lineColorInActive: PropTypes.string,
-    titleStyle: PropTypes.object,
-    descriptionStyle: PropTypes.object,
-    dateStyle: PropTypes.object,
+    type: PropTypes.oneOf(['check', 'combine', 'text']),
+    size: PropTypes.oneOf(['default', 'small']),
+    activeCircleColor: PropTypes.string,
+    inactiveCircleColor: PropTypes.string,
+    checkedCircleColor: PropTypes.string,
+    activeBorderColor: PropTypes.string,
+    inactiveBorderColor: PropTypes.string,
+    activeLineColor: PropTypes.string,
+    inactiveLineColor: PropTypes.string,
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    checkIcon: PropTypes.string,
+    errorIcon: PropTypes.string,
 };
 
 Step.defaultProps = {
-    titles: [],
     currentStep: 0,
-    isVertical: false,
-    iconActive: 'index + 1',
-    iconChecked: IconSource.ic_check_24,
-    iconUnchecked: 'index + 1',
-    circleColorActive: '#d82d8b',
-    circleColorChecked: '#ffadd2',
-    circleColorUnchecked: Colors.black_06,
-    circleBorderColorActive: Colors.pink_09,
-    circleBorderColorChecked: Colors.pink_09,
-    circleBorderColorUnchecked: Colors.black_04,
-    lineColorActive: '#ffd6e7',
-    lineColorInActive: Colors.black_04,
+    type: 'check',
+    size: 'normal',
+    activeCircleColor: Colors.pink_05_b,
+    inactiveCircleColor: Colors.black_06,
+    checkedCircleColor: '#f382c0',
+    activeBorderColor: Colors.pink_09,
+    inactiveBorderColor: Colors.black_04,
+    activeLineColor: '#fbd5ea',
+    inactiveLineColor: Colors.black_04,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.0.61-rc.1",
+    "version": "0.0.62-alpha.13",
     "private": false,
     "main": "index.js",
     "dependencies": {},
@@ -8,7 +8,7 @@
         "react-native": ">=0.55",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
-        "@momo-kits/core": ">=0.0.5-beta"
+        "@momo-kits/core-v2": ">=0.0.5-beta"
     },
     "devDependencies": {},
     "license": "MoMo"

package/Step.constants.js

@@ -1 +0,0 @@
-export const IS_VALID_URL = /((\w+:\/\/\S+)|(\w+[\.:]\w+\S+))[^\s,\.]/