taro-material/h5/components/steps/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AtComponent from "../../common/component";

export default class AtSteps extends AtComponent {
  handleClick() {
    this.props.onChange(...arguments);
  }

  render() {
    const {
      customStyle,
      className,
      items,
      current
    } = this.props;

    return <View className={classNames('at-steps', className)} style={customStyle}>
        {items.map((item, i) => <View key={item.title} className={classNames({
        'at-steps__item': true,
        'at-steps__item--active': i === current,
        'at-steps__item--inactive': i !== current
      })} onClick={this.handleClick.bind(this, i)}>
              <View className="at-steps__circular-wrap">
                {i !== 0 && <View className="at-steps__left-line"></View>}
                {item.status ? <View className={classNames({
            'at-icon': true,
            'at-icon-check-circle': item.status === 'success',
            'at-icon-close-circle': item.status === 'error',
            'at-steps__single-icon': true,
            'at-steps__single-icon--success': item.status === 'success',
            'at-steps__single-icon--error': item.status === 'error'
          })}></View> : <View className="at-steps__circular">
                      {item.icon ? <Text className={classNames('at-icon', {
              [`at-icon-${item.icon.value}`]: item.icon.value,
              'at-steps__circle-icon': true
            })}></Text> : <Text className="at-steps__num">{i + 1}</Text>}
                    </View>}
                {i !== items.length - 1 && <View className="at-steps__right-line"></View>}
              </View>
              <View className="at-steps__title">
                {item.title}
              </View>
              <View className="at-steps__desc">
                {item.desc}
              </View>
            </View>)}
      </View>;
  }
}

AtSteps.defaultProps = {
  customStyle: '',
  className: '',
  current: 0,
  items: [],
  onChange: () => {}
};

AtSteps.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  current: PropTypes.number,
  items: PropTypes.array,
  onChange: PropTypes.func
};