qt-public-ui/es/StepBar/index.js

新设计规范下业务组件库

import React, { useState, useEffect } from 'react';
import { Tooltip } from 'antd';
import { IconSlim as Icon } from '..';
import classnames from 'classnames';
import './style';
var isActive = function isActive(type, currentIndex, activeIndex) {
  if (type === 'step') return currentIndex <= activeIndex;else return currentIndex === activeIndex;
};
var StepBar = function StepBar(props) {
  var content = props.content,
    onClick = props.onClick,
    value = props.value,
    defaultValue = props.defaultValue,
    _props$type = props.type,
    type = _props$type === void 0 ? 'default' : _props$type;
  var isControlled = ('value' in props);
  var _useState = useState(isControlled ? value : defaultValue),
    active = _useState[0],
    setActive = _useState[1];
  useEffect(function () {
    isControlled && setActive(props.value);
  }, [isControlled, props.value]);
  var handleClick = function handleClick(key, disabled) {
    if (disabled) return;
    !isControlled && setActive(key);
    onClick && onClick(key);
  };
  if (!props.content || !props.content.length) return null;
  var activeIndex = content.findIndex(function (item) {
    return active === item.key;
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "umui-step-bar",
    style: props.style
  }, content.map(function (item, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: item.key
    }, index > 0 && /*#__PURE__*/React.createElement("img", {
      className: "umui-step-bar-arrow",
      src: "//img.alicdn.com/tfs/TB1ex8lsxz1gK0jSZSgXXavwpXa-100-14.png"
    }), /*#__PURE__*/React.createElement("div", {
      className: classnames('umui-step-bar-item', {
        'umui-step-bar-disabled': item.disabled,
        'umui-step-bar-active': isActive(type, index, activeIndex),
        'umui-step-clickable': !!props.onClick
      })
    }, item.tips ? /*#__PURE__*/React.createElement(Tooltip, {
      title: item.tips
    }, /*#__PURE__*/React.createElement("span", {
      onClick: handleClick.bind(null, item.key, !!item.disabled)
    }, /*#__PURE__*/React.createElement(Icon, {
      type: item.icon,
      className: "umui-step-bar-icon"
    }), item.title && /*#__PURE__*/React.createElement("span", null, item.title))) : /*#__PURE__*/React.createElement("span", {
      onClick: handleClick.bind(null, item.key, !!item.disabled)
    }, /*#__PURE__*/React.createElement(Icon, {
      type: item.icon,
      className: "umui-step-bar-icon"
    }), item.title && /*#__PURE__*/React.createElement("span", null, item.title))));
  }));
};
StepBar.displayName = 'StepBar';
export default StepBar;