@momo-kits/step 0.0.64-beta → 0.0.65-alpha.8

package/Step.vertical.web.js

@@ -0,0 +1,216 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+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 CIRCLE_TEXT_SIZE = 12;
+const ICON_SIZE = 16;
+const ICON_URL = IconSource.ic_check_24;
+const TITLE_SIZE = { size: 14, lineHeight: 20 };
+const SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
+const CONTENT_SIZE = { size: 12, lineHeight: 16 };
+function VerticalStep(props) {
+    VerticalStep.displayName = 'VerticalStep';
+    const {
+        steps = {},
+        currentStep,
+        type,
+        activeCircleColor,
+        inactiveCircleColor,
+        checkedCircleColor,
+        activeBorderColor,
+        inactiveBorderColor,
+        activeLineColor,
+        inactiveLineColor,
+        style,
+    } = props;
+
+    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;
+
+        return (
+            <View
+                style={[
+                    styles.circle,
+                    {
+                        borderColor: borderColor,
+                        backgroundColor: circleColor,
+                    },
+                ]}>
+                {renderCircleContent(index)}
+            </View>
+        );
+    };
+
+    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>
+            );
+        }
+        return <Text style={styles.circleText}>{index + 1}</Text>;
+    };
+
+    const renderLine = (index) => {
+        if (index === steps.length - 1) return null;
+        const lineColor =
+            index < currentStep ? activeLineColor : inactiveLineColor;
+
+        return (
+            <View style={[styles.line, { backgroundColor: lineColor }]}></View>
+        );
+    };
+
+    const renderHeader = (title, subTitle, index) => {
+        const weight = index === currentStep ? '600' : '400';
+
+        return (
+            <View style={styles.header}>
+                <Text style={[styles.title, { fontWeight: weight }]}>
+                    {title}
+                </Text>
+                <Text style={styles.subTitle}>{subTitle}</Text>
+            </View>
+        );
+    };
+
+    const renderContent = (content, index) => {
+        return (
+            <View style={styles.content}>
+                {content && typeof content === 'string' ? (
+                    <Text style={styles.contentText}>{content}</Text>
+                ) : (
+                    content
+                )}
+            </View>
+        );
+    };
+
+    const renderStepPart = (item, index) => {
+        const { title, subTitle, content } = item;
+        return (
+            <View
+                key={index.toString()}
+                style={{
+                    flexDirection: 'row',
+                }}>
+                <View style={styles.circleContainer}>
+                    {renderCircle(index)}
+                    {renderLine(index)}
+                </View>
+                <View style={styles.contentContainer}>
+                    {renderHeader(title, subTitle, index)}
+                    {renderContent(content, index)}
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View style={style}>
+            {steps.map((item, index) => {
+                return renderStepPart(item, index);
+            })}
+        </View>
+    );
+}
+
+export default VerticalStep;
+
+const styles = StyleSheet.create({
+    circleContainer: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%',
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    contentContainer: { marginLeft: Spacing.S, flex: 1 },
+    content: { marginVertical: Spacing.XS, minHeight: 60 },
+    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,
+    },
+    subTitle: {
+        fontSize: SUBTITLE_SIZE.size,
+        lineHeight: SUBTITLE_SIZE.lineHeight,
+        color: Colors.black_12,
+    },
+    line: {
+        width: 2,
+        flex: 1,
+        marginVertical: Spacing.XS,
+        borderRadius: 1,
+    },
+    icon: {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        tintColor: Colors.white,
+    },
+    circleText: {
+        fontSize: CIRCLE_TEXT_SIZE,
+        color: Colors.white,
+        fontWeight: '600',
+    },
+});
+
+VerticalStep.propTypes = {
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
+    }),
+    currentStep: PropTypes.number,
+    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]),
+};
+
+VerticalStep.defaultProps = {
+    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.web.js

@@ -1,302 +1,51 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Image } from 'react-native';
+
 import PropTypes from 'prop-types';
-import { ColorCore as Colors } from '../../core/colors/colorCore';
-import Text from '../../core/components/typography';
+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';
 
-const CIRCLE_SIZE = 24;
-
-const styles = StyleSheet.create({
-    circle: {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        // borderWidth: 1,
-        // borderColor: Colors.sepia_05,
-        borderRadius: CIRCLE_SIZE / 2,
-        backgroundColor: 'white'
-    },
-    line: {
-        height: 4,
-        backgroundColor: 'white',
-        // borderWidth: 1,
-        // borderRadius: 1,
-        // borderStyle: 'dashed',
-        zIndex: 0,
-        // marginTop: 8
-    },
-    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',
-    },
-    circleColumn: {
-        // position: 'absolute',
-        justifyContent: 'space-between',
-    },
-    titleDefault: {
-        color: Colors.black_12
-    },
-    titleActive: {
-        color: Colors.black_17,
-        fontWeight: 'bold'
-    },
-    containerStyle: {
-        minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
-    }
-});
-
-export default class Step 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 });
-    }
-
-    renderLine = () => {
-        const {
-            lineColor, lineStyle, currentStep, data
-        } = this.props;
-        return (
-            <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
-                {/* <View style={styles.topLeft} />
-                <View style={styles.topLeftWidth} />
-                <View style={styles.topRight} /> */}
-            </View>
-        );
-    }
-
-    circle = (value, index) => {
-        const {
-            currentStep, tintColor, data, lineStyle, isNumber, iconActive,
-            iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
-        } = this.props;
-        const { width } = this.state;
-        const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
-        const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
-        const itemWidth = (width - CIRCLE_SIZE) / data?.length;
-        const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
-        const lineWidth = (width - CIRCLE_SIZE) / (data.length - 1);
-        const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
-        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 key={index}>
-                {
-                    data?.length - 1 !== index && (
-                        <View style={[styles.line, {
-                            position: 'absolute',
-                            top: 10,
-                            backgroundColor: lineActive,
-                            width: lineWidth,
-                            height: 4,
-                            marginTop: 0
-                        }, lineStyle]}
-                        />
-                    )
-                }
-                {
-                    isNumber ? (
-                        <View style={{
-                            width: CIRCLE_SIZE,
-                            height: CIRCLE_SIZE,
-                            borderRadius: CIRCLE_SIZE / 2,
-                            backgroundColor: backgroundActive,
-                            borderColor: Colors.pink_09,
-                            borderWidth: 1,
-                            alignItems: 'center',
-                            justifyContent: 'center'
-                        }}
-                        >
-                            <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
-                        </View>
-                    ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
-                }
-
-                <View style={{
-                    position: 'absolute',
-                    width: itemWidth,
-                    left,
-                    top: CIRCLE_SIZE + CIRCLE_SIZE / 4
-                }}
-                >
-                    <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
-                </View>
-            </View>
-        );
-    }
-
-    circleColumn = (value, index) => {
-        const {
-            currentStep, tintColor, data, lineStyle, isNumber, iconActive,
-            iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
-        } = this.props;
-        const { height } = this.state;
-        const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
-        const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
-        const itemWidth = (height - CIRCLE_SIZE) / data?.length;
-        const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
-        const lineWidth = (height - CIRCLE_SIZE) / (data.length - 1);
-        const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
-        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 key={index}>
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    {
-                        isNumber ? (
-                            <View style={{
-                                width: CIRCLE_SIZE,
-                                height: CIRCLE_SIZE,
-                                borderRadius: CIRCLE_SIZE / 2,
-                                backgroundColor: backgroundActive,
-                                borderColor: Colors.pink_09,
-                                borderWidth: 1,
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            }}
-                            >
-                                {
-                                    iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
-                                }
-                            </View>
-                        ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
-                    }
-                    <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
-                </View>
-
-                {
-                    data?.length - 1 !== index && (
-                        <View style={[styles.line, {
-                            left: 10,
-                            backgroundColor: lineActive,
-                            width: 4,
-                            height: lineWidth,
-                            marginTop: 0,
-                        }, lineStyle]}
-                        />
-                    )
-                }
-
-            </View>
-        );
-    }
-
-    renderCircle = () => {
-        const { data = [], isVertical } = this.props;
-        return data.map(isVertical ? this.circleColumn : this.circle);
-    }
-
-    render() {
-        const { width, height } = this.state;
-        const { style, isVertical } = this.props;
-        return (
-            <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
-                {/* {this.renderLine()} */}
-                {
-                    isVertical ? (
-                        <View style={[styles.circleColumn, { height }]}>
-                            {this.renderCircle()}
-                        </View>
-                    ) : (
-                        <View style={[styles.circleRow, { width }]}>
-                            {this.renderCircle()}
-                        </View>
-                    )
-                }
-
-            </View>
-        );
+function Step(props) {
+    const { isVertical } = props;
+    if (isVertical) {
+        return <VerticalStep {...props} />;
     }
+    return <HorizontalStep {...props} />;
 }
+export default Step;
 
 Step.propTypes = {
-    data: PropTypes.arrayOf(PropTypes.string),
+    steps: PropTypes.arrayOf({
+        title: PropTypes.string.isRequired,
+        subTitle: PropTypes.string,
+        content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
+        error: PropTypes.bool,
+    }),
     currentStep: PropTypes.number,
-    tintColor: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    isNumber: PropTypes.bool,
-    isVertical: PropTypes.bool,
-    iconActive: PropTypes.any,
-    iconInActive: PropTypes.any,
-    lineColorActive: PropTypes.string,
-    lineColorInActive: PropTypes.string,
-    bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    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 = {
-    data: [],
     currentStep: 0,
-    tintColor: Colors.sepia_05
-};
+    type: 'check',
+    size: 'normal',
+    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/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "@momo-kits/step",
-  "version": "0.0.64-beta",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "@momo-kits/core": ">=0.0.5-beta"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
+    "name": "@momo-kits/step",
+    "version": "0.0.65-alpha.8",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {},
+    "peerDependencies": {
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "@momo-kits/core-v2": ">=0.0.5-beta"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
 }

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