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

package/Step.vertical.js

@@ -1,402 +1,288 @@
-import { Colors, IconSource, Image, Text } from '@momo-kits/core';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import { IS_VALID_URL } from './Step.constants';
+import {
+    Colors,
+    IconSource,
+    Image,
+    ScaleSize,
+    Spacing,
+    Text,
+} from '@momo-kits/core-v2';
 
-const CIRCLE_SIZE = 24;
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const ICON_URL = IconSource.ic_check_24;
 
-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,
-        };
+const VerticalStep = (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 };
     }
 
-    onLayout = (e) => {
-        this.setState({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    };
+    const renderCircle = (error, index) => {
+        let circleColor = inactiveCircleColor;
+        let borderColor = inactiveBorderColor;
+
+        if (index < currentStep) circleColor = checkedCircleColor;
+        else if (index === currentStep) circleColor = activeCircleColor;
+
+        if (index <= currentStep) borderColor = activeBorderColor;
+        if (error) {
+            circleColor = Colors.red_03;
+            borderColor = Colors.red_08;
+        }
 
-    /* #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,
+                    {
+                        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.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.circle,
+                        styles.circleText,
                         {
-                            backgroundColor: circleColor,
-                            borderColor: circleBorderColor,
+                            fontSize: CIRCLE_TEXT_SIZE,
+                            lineHeight: CIRCLE_TEXT_SIZE + 2,
                         },
                     ]}>
-                    <Text style={styles.number}>{index + 1}</Text>
-                </View>
-            </View>
+                    {index + 1}
+                </Text>
+            );
+        }
+        return (
+            <Text
+                style={[
+                    styles.circleText,
+                    {
+                        fontSize: CIRCLE_TEXT_SIZE,
+                        lineHeight: CIRCLE_TEXT_SIZE + 2,
+                    },
+                ]}>
+                {index + 1}
+            </Text>
         );
     };
 
-    _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;
-    };
+    const renderLine = (index) => {
+        if (index === steps.length - 1) return null;
+        const lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
 
-    _renderLine = ({ titles = {}, index = 0, lineActive = '' }) => {
-        let resultComponent = <></>;
+        return <View style={[styles.line, { backgroundColor: lineColor }]} />;
+    };
 
-        if (titles?.length - 1 !== index) {
-            resultComponent = (
-                <View
+    const renderHeader = (title, subTitle, error, index) => {
+        const weight = index === currentStep ? '600' : '400';
+        const disabledColor = Colors.black_09;
+        const errorColor = Colors.red_03;
+        return (
+            <View style={styles.header}>
+                <Text
                     style={[
-                        styles.lineVertical,
+                        styles.title,
                         {
-                            backgroundColor: lineActive,
+                            lineHeight: TITLE_SIZE.lineHeight,
+                            fontSize: TITLE_SIZE.size,
+                            fontWeight: weight,
+                            color: error
+                                ? errorColor
+                                : index < currentStep
+                                ? disabledColor
+                                : null,
                         },
-                    ]}
-                />
-            );
-        }
-        return resultComponent;
-    };
-
-    _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
-        let resultComponent = (
-            <View>
-                <Text.Caption
-                    style={[{ marginLeft: 10 }, textFontStyle, titleStyle]}>
-                    {value}
-                </Text.Caption>
+                    ]}>
+                    {title}
+                </Text>
+                <Text
+                    style={[
+                        styles.subTitle,
+                        {
+                            fontSize: SUBTITLE_SIZE.size,
+                            lineHeight: SUBTITLE_SIZE.lineHeight,
+                            color:
+                                index < currentStep && !error
+                                    ? disabledColor
+                                    : Colors.black_12,
+                        },
+                    ]}>
+                    {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;
-    };
+    const renderContent = (content, error, index, size) => {
+        const disabledColor = Colors.black_09;
+        let marginBottom = size === 'small' ? Spacing.S : Spacing.M;
+        let minHeight = ScaleSize(30);
 
-    _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;
-    };
-    /* #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;
+        if (index === steps.length - 1) {
+            marginBottom = 0;
+            minHeight = 0;
         }
 
         return (
-            <View key={index} style={{ flexDirection: 'row' }}>
-                <View>
-                    {this._renderCircle({
-                        circleColor,
-                        circleBorderColor,
-                        isActiveState,
-                        circleUnchecked,
-                        iconActive,
-                        iconUnchecked,
-                        icon,
-                        index,
-                    })}
-                    {this._renderLine({
-                        titles,
-                        index,
-                        lineActive,
-                    })}
-                </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>
+            <View
+                style={[
+                    styles.content,
+                    {
+                        marginBottom,
+                        minHeight,
+                    },
+                ]}>
+                {content && typeof content === 'string' ? (
+                    <Text
+                        style={[
+                            styles.contentText,
+                            {
+                                fontSize: CONTENT_SIZE.size,
+                                lineHeight: CONTENT_SIZE.lineHeight,
+                                color:
+                                    index < currentStep && !error
+                                        ? disabledColor
+                                        : Colors.black_12,
+                            },
+                        ]}>
+                        {content}
+                    </Text>
+                ) : (
+                    content
+                )}
             </View>
         );
     };
 
-    renderCircle = () => {
-        const { titles = [[]] } = this.props;
-        return titles.map(this.circleColumn);
-    };
-
-    render() {
-        const { scrollEnabled = false } = this.props;
-
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content, error } = item;
         return (
-            <ScrollView scrollEnabled={scrollEnabled}>
-                <View onLayout={this.onLayout}>
-                    <View style={[styles.circleColumn]}>
-                        {this.renderCircle()}
-                    </View>
+            <View
+                key={index.toString()}
+                style={{
+                    flexDirection: 'row',
+                }}>
+                <View style={styles.circleContainer}>
+                    {renderCircle(error, index)}
+                    {renderLine(index)}
                 </View>
-            </ScrollView>
+                <View style={styles.contentContainer}>
+                    {renderHeader(title, subTitle, error, index)}
+                    {renderContent(content, error, index, size)}
+                </View>
+            </View>
         );
-    }
-}
+    };
 
-VerticalStep.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,
-    scrollEnabled: PropTypes.bool,
+    return (
+        <View style={style}>
+            {steps.map((item, index) => {
+                return renderStepPart(item, index);
+            })}
+        </View>
+    );
 };
 
-VerticalStep.defaultProps = {
-    titles: [],
-    currentStep: 0,
-};
+export default VerticalStep;
+
+const styles = StyleSheet.create({
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: {
+        marginTop: Spacing.XS,
+    },
+    contentText: {
+        color: Colors.black_12,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    title: {},
+    subTitle: {
+        color: Colors.black_12,
+    },
+    line: {
+        width: 2,
+        flex: 1,
+        marginVertical: Spacing.XS,
+        borderRadius: 1,
+    },
+    icon: {
+        tintColor: Colors.white,
+    },
+    circleText: {
+        color: Colors.white,
+        fontWeight: '600',
+    },
+});