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

package/Step.horizontal.web.js

@@ -1,434 +1,207 @@
-import React, { Component } from 'react';
-import { View, StyleSheet, Image, Dimensions, ScrollView } from 'react-native';
-
+import React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
 import PropTypes from 'prop-types';
 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 SCREEN_WIDTH = Dimensions.get('window').width;
-
-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: {
-        fontSize: 14,
-        color: Colors.black_12,
-        fontWeight: 'normal',
-    },
-    titleActive: {
-        fontSize: 14,
-        color: Colors.black_17,
-        fontWeight: 'bold',
-    },
-    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,
-    },
-    lineHorizontal: {
-        height: 2,
-        width: '100%',
-    },
-    minHeight: {
-        minHeight: 12,
-        marginBottom: 4,
-    },
-});
-
-export default class HorizontalStep extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            width: 0,
-            height: 0,
-        };
-    }
+const CIRCLE_TEXT_SIZE = 12;
+const ICON_SIZE = 16;
+const ICON_URL = IconSource.ic_check_24;
+const TITLE_SIZE = { size: 12, lineHeight: 16 };
+const SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+const CONTENT_SIZE = { size: 12, lineHeight: 16 };
+
+function HorizontalStep(props) {
+    HorizontalStep.displayName = 'HorizontalStep';
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+    } = props;
+    const { titles = [], subTitles = [], contents = [] } = steps;
+
+    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;
 
-    onLayout = (e) => {
-        this.setState({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    };
-
-    _renderCircleImage = ({
-        icon = '',
-        circleColor = '',
-        circleBorderColor = '',
-    }) => {
         return (
-            <View>
-                <View
-                    style={[
-                        styles.circle,
-                        {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
-                        },
-                    ]}>
-                    <Image
-                        source={icon}
-                        style={[styles.iconImage, { tintColor: '#ffffff' }]}
-                    />
-                </View>
-            </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
+                style={[
+                    styles.circle,
+                    {
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(index)}
             </View>
         );
     };
 
-    _renderDateOrValue = ({
-        date = '',
-        isActiveState = false,
-        circleChecked = false,
-        minHeight = 0,
-        dateStyle = {},
-        index = 0,
-    }) => {
-        // Init states in render function
-        let resultComponent = <></>;
-        if (!date) {
-            return resultComponent;
-        }
-        if (isActiveState || circleChecked) {
-            resultComponent = (
-                <Text
-                    style={[
-                        styles.date,
-                        dateStyle,
-                        { minHeight: 12, marginBottom: 4 },
-                    ]}>
-                    {date[index]}
-                </Text>
+    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>
             );
-        } else {
-            resultComponent = <View style={minHeight}></View>;
         }
-        return resultComponent;
+        return <Text style={styles.circleText}>{index + 1}</Text>;
     };
 
-    _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,
-                });
-            }
-        }
-        return resultComponent;
-    };
+    const renderLine = (index) => {
+        let lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
 
-    _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
-        let resultComponent = (
-            <View>
-                <Text.Caption
-                    style={[{ marginTop: 4 }, textFontStyle, titleStyle]}>
-                    {value}
-                </Text.Caption>
-            </View>
-        );
-        return resultComponent;
-    };
-
-    _renderDescription = ({ items = {}, descriptionStyle = {}, index = 0 }) => {
-        let resultComponent = <></>;
-
-        if (items) {
-            resultComponent = (
-                <View>
-                    <Text style={[{ fontSize: 10 }, descriptionStyle]}>
-                        {items[index]}
-                    </Text>
-                </View>
-            );
-        }
-        return resultComponent;
-    };
+        if (index === -1 || index === steps.length - 1)
+            lineColor = 'transparent';
 
-    _renderLine = ({
-        titles = {},
-        index = 0,
-        lineRight = 0,
-        lineWidth = 0,
-        lineActive = '',
-        date = {},
-    }) => {
-        let resultComponent = <></>;
-
-        if (titles?.length - 1 !== index) {
-            resultComponent = (
-                <View
-                    style={{
-                        position: 'absolute',
-                        right: lineRight,
-                        width: lineWidth,
-                        zIndex: -1,
-                    }}>
-                    <View
-                        style={[
-                            styles.lineHorizontal,
-                            {
-                                backgroundColor: lineActive,
-                            },
-                            date ? { marginTop: 27 } : { marginTop: 27 - 16 },
-                            /* subtracting spacing from date */
-                        ]}
-                    />
-                </View>
-            );
-        }
-        return resultComponent;
-    };
-
-    circleColumn = (value, index) => {
-        const {
-            currentStep,
-            titles,
-            iconActive,
-            iconChecked,
-            iconUnchecked,
-            circleColorActive,
-            circleColorChecked,
-            circleColorUnchecked,
-            circleBorderColorActive,
-            circleBorderColorChecked,
-            circleBorderColorUnchecked,
-            lineColorActive,
-            lineColorInActive,
-            items,
-            date,
-            isVertical,
-            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 minHeight = !isVertical && styles.minHeight;
-
-        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 lineWidth = Math.round(
-            (SCREEN_WIDTH - 10 - CIRCLE_SIZE - 4) / titles.length,
+        return (
+            <View style={[styles.line, { backgroundColor: lineColor }]}></View>
         );
-        const lineRight = parseInt(`-${lineWidth / 2}`);
+    };
 
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content } = item;
+        const weight = index === currentStep ? '600' : '400';
         return (
-            <View
-                key={index}
-                style={{
-                    flexDirection: 'row',
-                    flex: 1,
-                    justifyContent: 'center',
-                }}>
+            <View key={index.toString()} style={styles.stepPart}>
+                <Text style={styles.subTitle}>{subTitle}</Text>
                 <View
                     style={{
-                        flexDirection: 'column',
+                        flexDirection: 'row',
                         alignItems: 'center',
                     }}>
-                    {this._renderDateOrValue({
-                        date,
-                        isActiveState,
-                        circleChecked,
-                        minHeight,
-                        dateStyle,
-                        index,
-                    })}
-                    {this._renderCircle({
-                        circleColor,
-                        circleBorderColor,
-                        isActiveState,
-                        circleUnchecked,
-                        iconActive,
-                        iconUnchecked,
-                        icon,
-                        index,
-                    })}
-                    {this._renderTitle({
-                        textFontStyle,
-                        titleStyle,
-                        value,
-                    })}
-                    {this._renderDescription({
-                        items,
-                        descriptionStyle,
-                        index,
-                    })}
+                    {renderLine(index - 1)}
+                    {renderCircle(index)}
+                    {renderLine(index)}
                 </View>
-                {this._renderLine({
-                    titles,
-                    index,
-                    lineRight,
-                    lineWidth,
-                    lineActive,
-                    date,
-                })}
+                <Text style={[styles.title, { fontWeight: weight }]}>
+                    {title}
+                </Text>
+                <Text style={styles.contentText}>{content}</Text>
             </View>
         );
     };
 
-    renderCircle = () => {
-        const { titles = [[]] } = this.props;
-        return titles.map(this.circleColumn);
-    };
-
-    render() {
-        const { style = {} } = this.props;
-        return (
-            <ScrollView>
-                <View style={[style]} onLayout={this.onLayout}>
-                    <View
-                        style={{
-                            flexDirection: 'row',
-                        }}>
-                        {this.renderCircle()}
-                    </View>
-                </View>
-            </ScrollView>
-        );
-    }
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                {steps.map((item, index) => {
+                    return renderStepPart(item, index);
+                })}
+            </View>
+        </View>
+    );
 }
 
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', width: '100%' },
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: Spacing.XS,
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS },
+    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,
+        marginBottom: Spacing.XS,
+    },
+    subTitle: {
+        fontSize: SUBTITLE_SIZE.size,
+        lineHeight: SUBTITLE_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    line: {
+        height: 2,
+        borderRadius: 1,
+        flex: 1,
+    },
+    icon: {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        tintColor: Colors.white,
+    },
+    circleText: {
+        fontSize: CIRCLE_TEXT_SIZE,
+        color: Colors.white,
+        fontWeight: '600',
+    },
+    stepPart: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        flex: 1,
+    },
+});
+
 HorizontalStep.propTypes = {
-    titles: PropTypes.array,
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.string,
+    }),
     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]),
 };
 
 HorizontalStep.defaultProps = {
-    titles: [],
+    step: [{ title: '', subTitle: '', content: '' }],
     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.js

@@ -3,55 +3,49 @@ import PropTypes from 'prop-types';
 import HorizontalStep from './Step.horizontal';
 import VerticalStep from './Step.vertical';
 
-import { Colors } from '@momo-kits/core';
+import { Colors } from '@momo-kits/core-v2';
 
-export default class Step extends Component {
-    constructor(props) {
-        super(props);
+const Step = (props) => {
+    const { isVertical } = props;
+    if (isVertical) {
+        return <VerticalStep {...props} />;
     }
+    return <HorizontalStep {...props} />;
+};
 
-    render() {
-        const { isVertical } = this.props;
-        let DefaultComponent = HorizontalStep;
-        if (isVertical) {
-            DefaultComponent = VerticalStep;
-        }
-        return <DefaultComponent {...this.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,
-    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_03,
+    inactiveCircleColor: Colors.black_06,
+    checkedCircleColor: Colors.pink_08,
+    activeBorderColor: Colors.pink_10,
+    inactiveBorderColor: Colors.black_04,
+    activeLineColor: Colors.pink_08,
+    inactiveLineColor: Colors.black_04,
 };