@momo-kits/step 0.0.44-beta → 0.0.44-beta.3

package/Step.vertical.web.js

@@ -0,0 +1,401 @@
+import React, { Component } from 'react';
+import { View, StyleSheet, Image, ScrollView } from 'react-native';
+
+import PropTypes from 'prop-types';
+import Colors from '../../core/colors';
+import Text from '../../core/components/typography';
+import { Icons as IconSource } from '../../core/icons';
+
+const CIRCLE_SIZE = 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,
+        };
+    }
+
+    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>
+        );
+    };
+
+    _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,
+                });
+            }
+        }
+        return resultComponent;
+    };
+
+    _renderLine = ({ titles = {}, index = 0, lineActive = '' }) => {
+        let resultComponent = <></>;
+
+        if (titles?.length - 1 !== index) {
+            resultComponent = (
+                <View
+                    style={[
+                        styles.lineVertical,
+                        {
+                            backgroundColor: lineActive,
+                        },
+                    ]}
+                />
+            );
+        }
+        return resultComponent;
+    };
+
+    _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
+        let resultComponent = (
+            <View>
+                <Text.Caption
+                    style={[{ marginLeft: 10 }, textFontStyle, titleStyle]}>
+                    {value}
+                </Text.Caption>
+            </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;
+    };
+    /* #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;
+        }
+
+        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>
+        );
+    };
+
+    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>
+        );
+    }
+}
+
+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,
+};
+
+VerticalStep.defaultProps = {
+    titles: [],
+    currentStep: 0,
+};

package/Step.web.js

@@ -1,170 +1,61 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Image } from 'react-native';
-import PropTypes from 'prop-types';
-import { ColorCore } from '../../core/colors/colorCore';
-import Text from '../../core/components/typography';
-import { Icons } from '../../core/icons';
-
-const CIRCLE_SIZE = 18;
 
-const styles = StyleSheet.create({
-    circle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderWidth: 1,
-        borderColor: ColorCore.sepia_05,
-        borderRadius: 9,
-        backgroundColor: 'white'
-    },
-    line: {
-        height: 1,
-        backgroundColor: 'white',
-        borderWidth: 1,
-        borderRadius: 1,
-        borderStyle: 'dashed',
-        zIndex: 0,
-        marginTop: 9
-    },
-    topRight: {
-        position: 'absolute',
-        right: -1,
-        top: -1,
-        width: 1,
-        height: '100%',
-        backgroundColor: 'white',
-        zIndex: 1
-    },
-    topLeft: {
-        position: 'absolute',
-        left: -1,
-        top: -1,
-        width: '100%',
-        height: 1,
-        backgroundColor: 'white',
-        zIndex: 1
-    },
-    topLeftWidth: {
-        position: 'absolute',
-        left: -1,
-        top: -1,
-        width: 1,
-        height: '100%',
-        backgroundColor: 'white',
-        zIndex: 1
-    },
-    circleRow: {
-        position: 'absolute',
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-    },
-    titleDefault: {
-        color: ColorCore.black_12
-    },
-    titleActive: {
-        color: ColorCore.black_17,
-        fontWeight: 'bold'
-    },
-    containerStyle: {
-        minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
-    }
-});
+import PropTypes from 'prop-types';
+import HorizontalStep from './Step.horizontal.web.js';
+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);
-        this.state = {
-            width: 0
-        };
-    }
-
-    onLayout = (e) => {
-        this.setState({ width: e.nativeEvent.layout.width });
-    }
-
-    renderLine = () => {
-        const { lineColor } = this.props;
-        return (
-            <View style={[styles.line, { borderColor: lineColor }]}>
-                <View style={styles.topLeft} />
-                <View style={styles.topLeftWidth} />
-                <View style={styles.topRight} />
-            </View>
-        );
-    }
-
-    circle = (value, index) => {
-        const { currentStep, tintColor, data } = this.props;
-        const { width } = this.state;
-        const icon = currentStep >= (index + 1) ? Icons.ic_step_active : Icons.ic_step_coming;
-        const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
-        const itemWidth = (width - CIRCLE_SIZE) / data?.length;
-        let left = 0;
-        let textAlignStyle = { textAlign: 'center' };
-        /**
-         * item lefr
-         */
-        if (index === 0) {
-            left = 0;
-            textAlignStyle = { textAlign: 'left' };
-
-            /**
-             * item right
-             */
-        } else if (index === data?.length - 1) {
-            left = -itemWidth + CIRCLE_SIZE;
-            textAlignStyle = { textAlign: 'right' };
-            /**
-             * center item
-             */
-        } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
-        const textStyle = [textAlignStyle, textFontStyle];
-        return (
-            <View>
-                <Image source={icon} style={[styles.circle, { tintColor }]} />
-                <View style={{
-                    position: 'absolute',
-                    width: itemWidth,
-                    left,
-                    top: CIRCLE_SIZE + CIRCLE_SIZE / 2
-                }}
-                >
-                    <Text.Title style={textStyle}>{value}</Text.Title>
-                </View>
-            </View>
-        );
-    }
-
-    renderCircle = () => {
-        const { data = [] } = this.props;
-        const views = data.map(this.circle);
-        return views;
     }
 
     render() {
-        const { width } = this.state;
-        const { style } = this.props;
-        return (
-            <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
-                {this.renderLine()}
-                <View style={[styles.circleRow, { width }]}>
-                    {this.renderCircle()}
-                </View>
-            </View>
-        );
+        const { isVertical } = this.props;
+        let DefaultComponent = HorizontalStep;
+        if (isVertical) {
+            DefaultComponent = VerticalStep;
+        }
+        return <DefaultComponent {...this.props} />;
     }
 }
 
 Step.propTypes = {
-    lineColor: PropTypes.string,
-    data: PropTypes.arrayOf(PropTypes.string),
+    titles: PropTypes.array,
     currentStep: PropTypes.number,
-    tintColor: PropTypes.string,
     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,
 };
 
 Step.defaultProps = {
-    data: [],
-    lineColor: '#fa541c',
+    titles: [],
     currentStep: 0,
-    tintColor: '#fa541c'
+    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,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/step",
-  "version": "0.0.44-beta",
+  "version": "0.0.44-beta.3",
   "private": false,
   "main": "index.js",
   "dependencies": {},

package/publish.sh

@@ -21,7 +21,7 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+npm publish --tag beta --access=public
 cd ..
 rm -rf dist