@momo-kits/step 0.0.60-rc.6 → 0.0.60-rc.7

package/Step.horizontal.js

@@ -1,434 +1,251 @@
-import { Colors, IconSource, Image, Text } from '@momo-kits/core';
+import { Colors, IconSource, Image, Spacing } from '@momo-kits/core-v2';
+import { Text } from '@momo-kits/core';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { IS_VALID_URL } from './Step.constants';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const HorizontalStep = (props) => {
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+        size = 'default',
+        checkIcon,
+        errorIcon,
+    } = props;
+
+    let CIRCLE_SIZE = 24;
+    let CIRCLE_TEXT_SIZE = 12;
+    let ICON_SIZE = 16;
+    let TITLE_SIZE = { size: 14, lineHeight: 20 };
+    let SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+    let CONTENT_SIZE = { size: 12, lineHeight: 16 };
+    const ICON_URL = checkIcon || IconSource.ic_check_24;
+    const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
+    if (size === 'small') {
+        CIRCLE_SIZE = 16;
+        CIRCLE_TEXT_SIZE = 8;
+        ICON_SIZE = 12;
+        TITLE_SIZE = { size: 12, lineHeight: 16 };
+        SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+        CONTENT_SIZE = { size: 10, lineHeight: 14 };
+    }
 
-const CIRCLE_SIZE = 24;
-const SCREEN_WIDTH = Dimensions.get('window').width;
+    const renderCircle = (error, index) => {
+        let circleColor = inactiveCircleColor;
+        let borderColor = inactiveBorderColor;
 
-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,
-        };
-    }
+        if (index < currentStep) circleColor = checkedCircleColor;
+        else if (index === currentStep) circleColor = activeCircleColor;
 
-    onLayout = (e) => {
-        this.setState({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    };
+        if (index <= currentStep) borderColor = activeBorderColor;
 
-    _renderCircleImage = ({
-        icon = '',
-        circleColor = '',
-        circleBorderColor = '',
-    }) => {
+        if (error) {
+            circleColor = Colors.red_03;
+            borderColor = Colors.red_08;
+        }
         return (
-            <View>
-                <View
-                    style={[
-                        styles.circle,
-                        {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
-                        },
-                    ]}>
-                    <Image
-                        source={icon}
-                        style={[styles.iconImage, { tintColor: '#ffffff' }]}
-                    />
-                </View>
+            <View
+                style={[
+                    styles.circle,
+                    {
+                        width: CIRCLE_SIZE,
+                        height: CIRCLE_SIZE,
+                        borderRadius: CIRCLE_SIZE / 2,
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(error, index)}
             </View>
         );
     };
 
-    _renderCircleText = ({
-        circleColor = '',
-        circleBorderColor = '',
-        index = 0,
-    }) => {
-        return (
-            <View>
-                <View
+    const renderCircleContent = (error, index) => {
+        const icon = error ? ERROR_ICON_URL : ICON_URL;
+        if (type === 'check') {
+            return (
+                <Image
+                    source={icon}
                     style={[
-                        styles.circle,
-                        {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
-                        },
-                    ]}>
-                    <Text style={styles.number}>{index + 1}</Text>
-                </View>
-            </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 = (
+                        styles.icon,
+                        { width: ICON_SIZE, height: ICON_SIZE },
+                    ]}
+                />
+            );
+        } else if (type === 'combine') {
+            return index < currentStep ? (
+                <Image
+                    source={icon}
+                    style={[
+                        styles.icon,
+                        { width: ICON_SIZE, height: ICON_SIZE },
+                    ]}
+                />
+            ) : (
                 <Text
                     style={[
-                        styles.date,
-                        dateStyle,
-                        { minHeight: 12, marginBottom: 4 },
+                        styles.circleText,
+                        {
+                            fontSize: CIRCLE_TEXT_SIZE,
+                        },
                     ]}>
-                    {date[index]}
+                    {index + 1}
                 </Text>
             );
-        } else {
-            resultComponent = <View style={minHeight}></View>;
         }
-        return resultComponent;
-    };
-
-    _renderCircle = ({
-        circleColor = '',
-        circleBorderColor = '',
-        isActiveState = false,
-        circleUnchecked = false,
-        iconActive = '',
-        iconUnchecked = '',
-        icon = {},
-        index = 0,
-    }) => {
-        let resultComponent = <></>;
-        if (!isActiveState) {
-            if (circleUnchecked) {
-                if (IS_VALID_URL.test(iconUnchecked)) {
-                    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 (IS_VALID_URL.test(iconActive)) {
-                resultComponent = this._renderCircleImage({
-                    icon,
-                    circleColor,
-                    circleBorderColor,
-                });
-            } else {
-                // Otherwise render index number in text component
-                resultComponent = resultComponent = this._renderCircleText({
-                    circleColor,
-                    circleBorderColor,
-                    index,
-                });
-            }
-        }
-        return resultComponent;
-    };
-
-    _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
-        let resultComponent = (
-            <View>
-                <Text.Caption
-                    style={[{ marginTop: 4 }, textFontStyle, titleStyle]}>
-                    {value}
-                </Text.Caption>
-            </View>
+        return (
+            <Text
+                style={[
+                    styles.circleText,
+                    {
+                        fontSize: CIRCLE_TEXT_SIZE,
+                    },
+                ]}>
+                {index + 1}
+            </Text>
         );
-        return resultComponent;
     };
 
-    _renderDescription = ({ items = {}, descriptionStyle = {}, index = 0 }) => {
-        let resultComponent = <></>;
-
-        if (items) {
-            resultComponent = (
-                <View>
-                    <Text style={[{ fontSize: 10 }, descriptionStyle]}>
-                        {items[index]}
-                    </Text>
-                </View>
-            );
-        }
-        return resultComponent;
-    };
+    const renderLine = (index) => {
+        let lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
 
-    _renderLine = ({
-        titles = {},
-        index = 0,
-        lineRight = 0,
-        lineWidth = 0,
-        lineActive = '',
-        date,
-    }) => {
-        let resultComponent = <></>;
+        if (index === -1 || index === steps.length - 1)
+            lineColor = 'transparent';
 
-        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;
+        return <View style={[styles.line, { backgroundColor: lineColor }]} />;
     };
 
-    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 accessibilityLabel = 'uncheck';
-        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;
-            accessibilityLabel = 'checking';
-        }
-
-        if (circleChecked) {
-            icon = iconChecked || IconSource.ic_check_24;
-            lineActive = lineColorActive || tintColor;
-            circleColor = circleColorChecked || '#ffadd2';
-            circleBorderColor = circleBorderColorChecked || Colors.pink_09;
-            accessibilityLabel = 'checked';
-        }
-
-        if (circleUnchecked) {
-            icon = iconUnchecked || index + 1;
-        }
-
-        const lineWidth = Math.round(
-            (SCREEN_WIDTH - 10 - CIRCLE_SIZE - 4) / titles.length,
-        );
-        const lineRight = parseInt(`-${lineWidth / 2}`);
-
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content, error } = item;
+        const weight = index === currentStep ? '600' : '400';
+        const disabledColor = Colors.black_09;
+        const errorColor = Colors.error;
         return (
-            <View
-                key={index}
-                style={{
-                    flexDirection: 'row',
-                    flex: 1,
-                    justifyContent: 'center',
-                    width: lineWidth,
-                    // backgroundColor: 'red'
-                }}>
+            <View key={index.toString()} style={styles.stepPart}>
+                <Text
+                    style={[
+                        styles.subTitle,
+                        {
+                            fontSize: SUBTITLE_SIZE.size,
+                            lineHeight: SUBTITLE_SIZE.lineHeight,
+                            color:
+                                index < currentStep && !error
+                                    ? disabledColor
+                                    : Colors.black_12,
+                        },
+                    ]}>
+                    {subTitle}
+                </Text>
                 <View
-                    accessibilityLabel={accessibilityLabel}
                     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(error, index)}
+                    {renderLine(index)}
                 </View>
-                {this._renderLine({
-                    titles,
-                    index,
-                    lineRight,
-                    lineWidth,
-                    lineActive,
-                    date,
-                })}
+                <Text
+                    style={[
+                        styles.title,
+                        {
+                            lineHeight: TITLE_SIZE.lineHeight,
+                            fontSize: TITLE_SIZE.size,
+                            fontWeight: weight,
+                            color: error
+                                ? errorColor
+                                : index < currentStep
+                                ? disabledColor
+                                : null,
+                        },
+                    ]}>
+                    {title}
+                </Text>
+                <Text
+                    style={[
+                        styles.contentText,
+                        {
+                            fontSize: CONTENT_SIZE.size,
+                            lineHeight: CONTENT_SIZE.lineHeight,
+                            color:
+                                index < currentStep && !error
+                                    ? disabledColor
+                                    : Colors.black_12,
+                        },
+                    ]}>
+                    {content}
+                </Text>
             </View>
         );
     };
 
-    renderCircle = () => {
-        const { titles = [[]] } = this.props;
-        return titles.map(this.circleColumn);
-    };
-
-    render() {
-        const { style = {} } = this.props;
-        return (
-            <View style={[style]} onLayout={this.onLayout}>
-                <View
-                    style={{
-                        flexDirection: 'row',
-                    }}>
-                    {this.renderCircle()}
-                </View>
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                {steps.map((item, index) => {
+                    return renderStepPart(item, index);
+                })}
             </View>
-        );
-    }
-}
-
-HorizontalStep.propTypes = {
-    titles: PropTypes.array,
-    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,
+        </View>
+    );
 };
 
-HorizontalStep.defaultProps = {
-    titles: [],
-    currentStep: 0,
-};
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', width: '100%' },
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: Spacing.XS,
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS },
+    contentText: {
+        color: Colors.black_12,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    title: {
+        marginBottom: Spacing.XS,
+    },
+    subTitle: {
+        color: Colors.black_12,
+    },
+    line: {
+        height: 2,
+        borderRadius: 1,
+        flex: 1,
+    },
+    icon: {
+        tintColor: Colors.white,
+    },
+    circleText: {
+        color: Colors.white,
+        fontWeight: '600',
+    },
+    stepPart: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        flex: 1,
+    },
+});