@momo-kits/step 0.73.3-beta.5 → 0.74.2-react-native.1

package/Step.horizontal.js

@@ -1,279 +0,0 @@
-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

@@ -1,299 +0,0 @@
-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,
-  },
-});

package/Step.js

@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import HorizontalStep from './Step.horizontal';
-import VerticalStep from './Step.vertical';
-
-import { Colors } from '@momo-kits/core-v2';
-
-const Step = (props) => {
-    alert("CCCC")
-    const { isVertical } = props;
-    if (isVertical) {
-        return <VerticalStep {...props} />;
-    }
-    return <HorizontalStep {...props} />;
-};
-
-export default Step;
-
-Step.propTypes = {
-    steps: PropTypes.arrayOf({
-        title: PropTypes.string.isRequired,
-        subTitle: PropTypes.string,
-        content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
-        error: PropTypes.bool,
-    }),
-    currentStep: PropTypes.number,
-    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 = {
-    currentStep: 0,
-    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,
-};