antd-mobile-taro-ui/es/components/steps/steps.js

以antd-mobile为设计标准，基于taro框架的微信小程序组件库

import React from 'react';
import classNames from 'classnames';
import { Text, View } from '@tarojs/components';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
const classPrefix = `adm-steps`;
const stepClassPrefix = `adm-step`;
const defaultIcon = React.createElement(Text, {
  className: `${stepClassPrefix}-icon-dot`
});
const defaultProps = {
  current: 0,
  direction: 'horizontal'
};
export const Steps = p => {
  const props = mergeProps(defaultProps, p);
  const {
    direction,
    current
  } = props;
  const classString = classNames(classPrefix, `${classPrefix}-${direction}`);
  return withNativeProps(props, React.createElement(View, {
    className: classString
  }, React.Children.map(props.children, (child, index) => {
    var _a;

    if (!React.isValidElement(child)) {
      return child;
    }

    const props = child.props;
    let status = props.status || 'wait';

    if (index < current) {
      status = props.status || 'finish';
    } else if (index === current) {
      status = props.status || 'process';
    }

    const icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
    return React.cloneElement(child, {
      status,
      icon
    });
  })));
};