zarm-web/es/steps/StepsItem.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Icon from '../icon';
export default class Step extends PureComponent {
  constructor(...args) {
    super(...args);

    this.renderIconNode = () => {
      const {
        current,
        stepIndex,
        status
      } = this.props;
      let iconNode = stepIndex + 1;

      if (current > stepIndex || status === 'finish') {
        iconNode = React.createElement(Icon, {
          type: "right",
          theme: "success",
          size: "sm"
        });
      }

      if (status === 'error') {
        iconNode = React.createElement(Icon, {
          type: "wrong",
          theme: "danger",
          size: "sm"
        });
      }

      return iconNode;
    };

    this.handleClickItem = () => {
      const {
        onClick,
        stepIndex
      } = this.props;
      onClick && onClick(stepIndex);
    };
  }

  render() {
    const {
      className,
      style,
      title,
      description,
      disabled,
      prefixCls,
      current,
      stepIndex,
      status,
      isLastStep,
      stepClick
    } = this.props;
    const classStr = classnames(className, `${prefixCls}-item`, {
      [`${prefixCls}-item--finish`]: current > stepIndex && status !== 'error',
      [`${prefixCls}-item--active`]: current === stepIndex,
      [`${prefixCls}-item--${status || 'process'}`]: status,
      [`${prefixCls}-item--wait`]: current < stepIndex,
      [`${prefixCls}-item--disabled`]: disabled
    });
    const stepItemProps = {};

    if (stepClick) {
      stepItemProps.role = 'button';

      if (!disabled) {
        stepItemProps.onClick = this.handleClickItem;
      }
    }

    return React.createElement("div", _extends({
      className: classStr,
      style: style
    }, stepItemProps), React.createElement("div", {
      className: `${prefixCls}-item__icon`
    }, this.renderIconNode()), !isLastStep && React.createElement("div", {
      className: `${prefixCls}-item__tail`
    }), React.createElement("div", {
      className: `${prefixCls}-item__content`
    }, React.createElement("div", {
      className: `${prefixCls}-item__title`
    }, title), description && React.createElement("div", {
      className: `${prefixCls}-item__desc`
    }, description)), disabled);
  }

}