@momo-kits/step 0.0.73-beta → 0.72.1

package/Step.js

@@ -1,303 +1,52 @@
 import React, { Component } from 'react';
-import { View, StyleSheet } from 'react-native';
-
 import PropTypes from 'prop-types';
-import {
-    Colors, Text, IconSource, Image
-} from '@momo-kits/core';
-
-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];
+import HorizontalStep from './Step.horizontal';
+import VerticalStep from './Step.vertical';
 
-        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]} />
-                }
+import { Colors } from '@momo-kits/core-v2';
 
-                <View style={{
-                    position: 'absolute',
-                    width: itemWidth,
-                    left,
-                    top: CIRCLE_SIZE + CIRCLE_SIZE / 4
-                }}
-                >
-                    <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
-                </View>
-            </View>
-        );
+const Step = (props) => {
+    alert("CCCC")
+    const { isVertical } = props;
+    if (isVertical) {
+        return <VerticalStep {...props} />;
     }
+    return <HorizontalStep {...props} />;
+};
 
-    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>
-        );
-    }
-}
+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_03,
+    inactiveCircleColor: Colors.black_06,
+    checkedCircleColor: Colors.pink_08,
+    activeBorderColor: Colors.pink_10,
+    inactiveBorderColor: Colors.black_04,
+    activeLineColor: Colors.pink_08,
+    inactiveLineColor: Colors.black_04,
+};

package/Step.vertical.js

@@ -0,0 +1,313 @@
+import {
+  Colors,
+  IconSource,
+  Image,
+  ScaleSize,
+  Spacing,
+  Text,
+} from '@momo-kits/core-v2';
+
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+
+const ICON_URL = IconSource.ic_check_24;
+
+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,
+    };
+  }
+
+  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;
+    }
+
+    return (
+      <View
+        style={[
+          styles.circle,
+          {
+            width: CIRCLE_SIZE,
+            height: CIRCLE_SIZE,
+            borderRadius: CIRCLE_SIZE / 2,
+            borderColor: borderColor,
+            backgroundColor: circleColor,
+          },
+        ]}>
+        {renderCircleContent(error, index)}
+      </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.circleText,
+            {
+              fontSize: CIRCLE_TEXT_SIZE,
+              lineHeight: CIRCLE_TEXT_SIZE + 2,
+            },
+          ]}>
+          {index + 1}
+        </Text>
+      );
+    }
+    return (
+      <Text
+        style={[
+          styles.circleText,
+          {
+            fontSize: CIRCLE_TEXT_SIZE,
+            lineHeight: CIRCLE_TEXT_SIZE + 2,
+          },
+        ]}>
+        {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}]} />;
+  };
+
+  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.title,
+            {
+              lineHeight: TITLE_SIZE.lineHeight,
+              fontSize: TITLE_SIZE.size,
+              fontWeight: weight,
+              color: error
+                ? errorColor
+                : index < currentStep
+                ? disabledColor
+                : Colors.black_17,
+            },
+          ]}>
+          {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>
+    );
+  };
+
+  const renderContent = (content, error, index, size) => {
+    const disabledColor = Colors.black_09;
+    let marginBottom = size === 'small' ? Spacing.S : Spacing.M;
+    let minHeight = ScaleSize(30);
+
+    if (index === steps.length - 1) {
+      marginBottom = 0;
+      minHeight = 0;
+    }
+
+    return (
+      <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>
+    );
+  };
+
+  const renderStepPart = (item, index) => {
+    const {title, subTitle, content, error} = item;
+    return (
+      <View
+        key={index.toString()}
+        style={{
+          flexDirection: 'row',
+        }}>
+        <View style={styles.circleContainer}>
+          {renderCircle(error, index)}
+          {renderLine(index)}
+        </View>
+        <View style={styles.contentContainer}>
+          {renderHeader(title, subTitle, error, index)}
+          {renderContent(content, error, index, size)}
+        </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: {
+    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',
+  },
+});