@td-design/react-native/lib/module/flow/step.js

react-native UI组件库

import React, { cloneElement, isValidElement, memo, useMemo } from 'react';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import SvgIcon from '../svg-icon';
import Text from '../text';
const {
  px
} = helpers;
const iconType = {
  wait: 'ellipsis',
  error: 'close',
  finish: 'check',
  process: 'reload'
};
const Step = _ref => {
  let {
    title,
    description,
    size = px(36),
    active = false,
    isCurrent = false,
    isLast = false,
    status = active ? 'finish' : 'wait',
    icon,
    stepRender,
    iconSize = px(16),
    label
  } = _ref;
  const theme = useTheme();
  /** icon的颜色 */
  const iconColor = {
    wait: theme.colors.primary200,
    error: theme.colors.func600,
    finish: theme.colors.primary200,
    process: theme.colors.primary200
  };
  /** 活动状态的颜色 */
  const iconActiveColor = iconColor[status];
  /**
   * icon的render
   * 1 判断有没有自定义组件，使用自定义组件
   * 2 判断是否使用自定义的icon
   * 3 更具当前的状态进行选择使用的icon
   * 4 可以使用label
   */
  const IconRender = useMemo(() => {
    if (!!stepRender && /*#__PURE__*/isValidElement(stepRender)) {
      return /*#__PURE__*/cloneElement(stepRender, {});
    }
    if (!!icon && /*#__PURE__*/isValidElement(icon)) {
      return /*#__PURE__*/cloneElement(icon, {
        size: iconSize,
        color: theme.colors.white
      });
    }
    if (label) {
      return /*#__PURE__*/React.createElement(Text, {
        variant: "p1",
        color: "text"
      }, label);
    }
    return /*#__PURE__*/React.createElement(SvgIcon, {
      name: iconType[status],
      size: iconSize,
      color: theme.colors.white
    });
  }, [icon, iconSize, label, stepRender, status, theme.colors.white]);

  /**
   * 尾巴的样式
   */
  const TailRender = useMemo(() => {
    if (isLast) return null;
    if (!active || isCurrent) return /*#__PURE__*/React.createElement(Box, {
      borderColor: "gray200",
      borderWidth: 1,
      flex: 1,
      borderStyle: "dashed",
      style: {
        marginTop: size / 2
      }
    });
    return /*#__PURE__*/React.createElement(Box, {
      height: 1,
      flex: 1,
      style: {
        backgroundColor: iconActiveColor,
        marginTop: size / 2
      }
    });
  }, [active, iconActiveColor, isCurrent, isLast, size]);
  return /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "flex-start",
    alignItems: "flex-start",
    flex: 1
  }, /*#__PURE__*/React.createElement(Box, {
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Box, {
    width: size,
    height: size,
    borderRadius: "x2",
    alignItems: "center",
    overflow: "hidden"
  }, stepRender ? IconRender : /*#__PURE__*/React.createElement(Box, {
    width: size,
    height: size,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    opacity: active ? 1 : 0.6,
    backgroundColor: status === 'error' ? 'func600' : 'primary200',
    style: {
      borderRadius: size / 2
    }
  }, IconRender)), /*#__PURE__*/React.createElement(Box, {
    marginTop: "x1",
    alignItems: "center"
  }, !!title && /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "text",
    numberOfLines: 1
  }, title), !!description && /*#__PURE__*/React.createElement(Text, {
    variant: "p2",
    color: "text",
    numberOfLines: 1,
    ellipsizeMode: "clip"
  }, description))), TailRender);
};
export default /*#__PURE__*/memo(Step);
//# sourceMappingURL=step.js.map