@momo-kits/step 0.0.43-beta.25 → 0.0.43-beta.28

package/Step.horizontal.web.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Image, Dimensions } from 'react-native';
+import { View, StyleSheet, Image, Dimensions, ScrollView } from 'react-native';
 
 import PropTypes from 'prop-types';
 import Colors from '../../core/colors';
@@ -9,15 +9,6 @@ import { Icons as IconSource } from '../../core/icons';
 const CIRCLE_SIZE = 24;
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
-// this is layout of each item (flexdirection row)
-// this is left container (flex 0.2, )
-// this is value label
-// this is image
-// this is caption label
-// this is desc label
-// this is right container (flex 0.8)
-// this is line (width flex = 1 or width 100 percent)
-
 const styles = StyleSheet.create({
     circle: {
         width: CIRCLE_SIZE,
@@ -26,25 +17,23 @@ const styles = StyleSheet.create({
         borderWidth: 2,
         padding: 4,
     },
-    checkedCircle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderRadius: CIRCLE_SIZE / 2,
-        backgroundColor: '#ffadd2',
-        borderWidth: 2,
-        borderColor: Colors.pink_09,
+    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',
     },
-    containerStyle: {
-        minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
-    },
     description: {
         fontSize: 12,
         color: Colors.black_12,
@@ -64,7 +53,6 @@ const styles = StyleSheet.create({
     },
     lineHorizontal: {
         height: 2,
-        marginTop: 26,
         width: '100%',
     },
     minHeight: {
@@ -89,51 +77,259 @@ export default class HorizontalStep extends Component {
         });
     };
 
-    circleStep = (index) => {
+    _renderCircleImage = ({
+        icon = '',
+        circleColor = '',
+        circleBorderColor = '',
+    }) => {
         return (
-            <View style={[styles.circle]}>
-                <Text style={styles.number}>{index}</Text>
+            <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>
         );
     };
 
+    _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>
+            );
+        } 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 (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;
+    };
+
+    _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;
+    };
+
+    _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,
-            iconInActive,
+            iconChecked,
+            iconUnchecked,
+            circleColorActive,
+            circleColorChecked,
+            circleColorUnchecked,
+            circleBorderColorActive,
+            circleBorderColorChecked,
+            circleBorderColorUnchecked,
             lineColorActive,
             lineColorInActive,
             items,
-            currentStepColor,
             date,
             isVertical,
-            titleFontSize,
+            titleStyle,
+            descriptionStyle,
+            dateStyle,
         } = this.props;
-        const icon =
-            currentStep >= index + 2
-                ? iconActive || IconSource.ic_check_24
-                : iconInActive || index + 1;
-        var circleColor =
-            currentStep >= index + 1 ? currentStepColor : Colors.black_06;
-        var circleBorderColor =
-            currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
-        const textFontStyle =
-            currentStep === index + 1
-                ? styles.titleActive
-                : styles.titleDefault;
-        const lineActive =
-            currentStep >= index + 2
-                ? lineColorActive
-                    ? Colors.pink_09
-                    : '#ffd6e7'
-                : lineColorInActive || Colors.black_04;
-        const minHeight = !isVertical && styles.minHeight;
+
+        // 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,
         );
         const lineRight = parseInt(`-${lineWidth / 2}`);
+
         return (
             <View
                 key={index}
@@ -147,70 +343,43 @@ export default class HorizontalStep extends Component {
                         flexDirection: 'column',
                         alignItems: 'center',
                     }}>
-                    {currentStep >= index + 1 ? (
-                        <Text style={[styles.date, { marginBottom: 4 }]}>
-                            {date}
-                        </Text>
-                    ) : (
-                        <View style={minHeight}></View>
-                    )}
-                    {currentStep <= index + 1 ? (
-                        <View>
-                            {/* image */}
-                            <View
-                                style={[
-                                    styles.circle,
-                                    {
-                                        backgroundColor: circleColor,
-                                        borderColor: circleBorderColor,
-                                    },
-                                ]}>
-                                <Text style={styles.number}>{icon}</Text>
-                            </View>
-                        </View>
-                    ) : (
-                        <View>
-                            <Image
-                                source={icon}
-                                style={[
-                                    styles.checkedCircle,
-                                    { tintColor: '#ffd6e7' },
-                                ]}
-                            />
-                        </View>
-                    )}
-                    <View>
-                        <Text.Caption
-                            style={[
-                                { marginTop: 4, fontSize: titleFontSize },
-                                textFontStyle,
-                            ]}>
-                            {value}
-                        </Text.Caption>
-                    </View>
-
-                    <View>
-                        <Text style={[{ fontSize: 10 }]}>{items[index]}</Text>
-                    </View>
+                    {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,
+                    })}
                 </View>
-                {titles?.length - 1 !== index && (
-                    <View
-                        style={{
-                            position: 'absolute',
-                            right: lineRight,
-                            width: lineWidth,
-                            zIndex: -1,
-                        }}>
-                        <View
-                            style={[
-                                styles.lineHorizontal,
-                                {
-                                    backgroundColor: lineActive,
-                                },
-                            ]}
-                        />
-                    </View>
-                )}
+                {this._renderLine({
+                    titles,
+                    index,
+                    lineRight,
+                    lineWidth,
+                    lineActive,
+                    date,
+                })}
             </View>
         );
     };
@@ -223,16 +392,16 @@ export default class HorizontalStep extends Component {
     render() {
         const { style = {} } = this.props;
         return (
-            <View
-                style={[styles.containerStyle, style]}
-                onLayout={this.onLayout}>
-                <View
-                    style={{
-                        flexDirection: 'row',
-                    }}>
-                    {this.renderCircle()}
+            <ScrollView>
+                <View style={[style]} onLayout={this.onLayout}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                        }}>
+                        {this.renderCircle()}
+                    </View>
                 </View>
-            </View>
+            </ScrollView>
         );
     }
 }
@@ -244,11 +413,19 @@ HorizontalStep.propTypes = {
     items: PropTypes.array,
     isVertical: PropTypes.bool,
     iconActive: PropTypes.any,
-    iconInActive: 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,
-    borderColorActive: PropTypes.string,
-    borderColorInActive: PropTypes.string,
+    titleStyle: PropTypes.object,
+    descriptionStyle: PropTypes.object,
+    dateStyle: PropTypes.object,
 };
 
 HorizontalStep.defaultProps = {

package/Step.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import HorizontalStep from './Step.horizontal';
 import VerticalStep from './Step.vertical';
 
+import { Colors, IconSource } from '@momo-kits/core';
 export default class Step extends Component {
     constructor(props) {
         super(props);
@@ -25,15 +26,34 @@ Step.propTypes = {
     items: PropTypes.array,
     isVertical: PropTypes.bool,
     iconActive: PropTypes.any,
-    iconInActive: 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,
-    borderColorActive: PropTypes.string,
-    borderColorInActive: PropTypes.string,
-    titleFontSize: PropTypes.number,
+    titleStyle: PropTypes.object,
+    descriptionStyle: PropTypes.object,
+    dateStyle: PropTypes.object,
 };
 
 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,
 };