@momo-kits/step 0.0.74-beta → 0.72.1

package/Step.horizontal.js

@@ -0,0 +1,279 @@
+import {Colors, IconSource, Image, Spacing, Text} from '@momo-kits/core-v2';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+
+const HorizontalStep = 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 => {
+    let lineColor = index < currentStep ? activeLineColor : inactiveLineColor;
+
+    if (index === -1 || index === steps.length - 1) {
+      lineColor = 'transparent';
+    }
+
+    return <View style={[styles.line, {backgroundColor: lineColor}]} />;
+  };
+
+  const renderStepPart = (item, index) => {
+    const {title, subTitle, content, error} = item;
+    const weight = index === currentStep ? '600' : '400';
+    const disabledColor = Colors.black_09;
+    const errorColor = Colors.error;
+    return (
+      <View key={index.toString()} style={styles.stepPart}>
+        <Text
+          style={[
+            styles.subTitle,
+            {
+              fontSize: SUBTITLE_SIZE.size,
+              lineHeight: SUBTITLE_SIZE.lineHeight,
+              color:
+                index < currentStep && !error ? disabledColor : Colors.black_12,
+            },
+          ]}>
+          {subTitle}
+        </Text>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          {renderLine(index - 1)}
+          {renderCircle(error, index)}
+          {renderLine(index)}
+        </View>
+        <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.contentText,
+            {
+              fontSize: CONTENT_SIZE.size,
+              lineHeight: CONTENT_SIZE.lineHeight,
+              color:
+                index < currentStep && !error ? disabledColor : Colors.black_12,
+            },
+          ]}>
+          {content}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={style}>
+      <View style={styles.container}>
+        {steps.map((item, index) => {
+          return renderStepPart(item, index);
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  circleContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    height: '100%',
+  },
+  circle: {
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: Spacing.XS,
+  },
+  contentContainer: {
+    marginLeft: Spacing.S,
+    flex: 1,
+  },
+  content: {marginVertical: Spacing.XS},
+  contentText: {
+    color: Colors.black_12,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  subTitle: {
+    color: Colors.black_12,
+  },
+  line: {
+    height: 2,
+    borderRadius: 1,
+    flex: 1,
+  },
+  icon: {
+    tintColor: Colors.white,
+  },
+  circleText: {
+    color: Colors.white,
+    fontWeight: '600',
+  },
+  stepPart: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    flex: 1,
+  },
+});

package/Step.horizontal.web.js

@@ -0,0 +1,299 @@
+import React from 'react';
+import {StyleSheet, View, Image} from 'react-native';
+import PropTypes from 'prop-types';
+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: 12,
+  lineHeight: 16,
+};
+const SUBTITLE_SIZE = {
+  size: 10,
+  lineHeight: 14,
+};
+const CONTENT_SIZE = {
+  size: 12,
+  lineHeight: 16,
+};
+
+const HorizontalStep = 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 => {
+    let lineColor = index < currentStep ? activeLineColor : inactiveLineColor;
+
+    if (index === -1 || index === steps.length - 1) {
+      lineColor = 'transparent';
+    }
+
+    return <View style={[styles.line, {backgroundColor: lineColor}]} />;
+  };
+
+  const renderStepPart = (item, index) => {
+    const {title, subTitle, content, error} = item;
+    const weight = index === currentStep ? '600' : '400';
+    const disabledColor = Colors.black_09;
+    const errorColor = Colors.error;
+    return (
+      <View key={index.toString()} style={styles.stepPart}>
+        <Text
+          style={[
+            styles.subTitle,
+            {
+              fontSize: SUBTITLE_SIZE.size,
+              lineHeight: SUBTITLE_SIZE.lineHeight,
+              color:
+                index < currentStep && !error ? disabledColor : Colors.black_12,
+            },
+          ]}>
+          {subTitle}
+        </Text>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          {renderLine(index - 1)}
+          {renderCircle(error, index)}
+          {renderLine(index)}
+        </View>
+        <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.contentText,
+            {
+              fontSize: CONTENT_SIZE.size,
+              lineHeight: CONTENT_SIZE.lineHeight,
+              color:
+                index < currentStep && !error ? disabledColor : Colors.black_12,
+            },
+          ]}>
+          {content}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={style}>
+      <View style={styles.container}>
+        {steps.map((item, index) => {
+          return renderStepPart(item, index);
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default HorizontalStep;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  circleContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    height: '100%',
+  },
+  circle: {
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: Spacing.XS,
+  },
+  contentContainer: {
+    marginLeft: Spacing.S,
+    flex: 1,
+  },
+  content: {marginVertical: Spacing.XS},
+  contentText: {
+    color: Colors.black_12,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  subTitle: {
+    color: Colors.black_12,
+  },
+  line: {
+    height: 2,
+    borderRadius: 1,
+    flex: 1,
+  },
+  icon: {
+    tintColor: Colors.white,
+  },
+  circleText: {
+    color: Colors.white,
+    fontWeight: '600',
+  },
+  stepPart: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    flex: 1,
+  },
+});