linkmore-design/lib/steps/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcSteps = _interopRequireDefault(require("rc-steps"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
var _progress = _interopRequireDefault(require("../progress"));
var _useLegacyItems = _interopRequireDefault(require("./useLegacyItems"));
const Steps = props => {
  const {
    percent,
    size,
    className,
    direction,
    items,
    responsive = true,
    current = 0,
    children,
    ...restProps
  } = props;
  const {
    xs
  } = (0, _useBreakpoint.default)(responsive);
  const {
    getPrefixCls,
    direction: rtlDirection
  } = React.useContext(_configProvider.ConfigContext);
  const getDirection = React.useCallback(() => responsive && xs ? 'vertical' : direction, [xs, direction]);
  const prefixCls = getPrefixCls('steps', props.prefixCls);
  const iconPrefix = getPrefixCls('', props.iconPrefix);
  const mergedItems = (0, _useLegacyItems.default)(items, children);
  const stepsClassName = (0, _classnames.default)({
    [`${prefixCls}-rtl`]: rtlDirection === 'rtl',
    [`${prefixCls}-with-progress`]: percent !== undefined
  }, className);
  const icons = {
    finish: /*#__PURE__*/React.createElement(_CheckOutlined.default, {
      className: `${prefixCls}-finish-icon`
    }),
    error: /*#__PURE__*/React.createElement(_CloseOutlined.default, {
      className: `${prefixCls}-error-icon`
    })
  };
  const stepIconRender = ({
    node,
    status
  }) => {
    if (status === 'process' && percent !== undefined) {
      // currently it's hard-coded, since we can't easily read the actually width of icon
      const progressWidth = size === 'small' ? 32 : 40;
      // iconWithProgress
      return /*#__PURE__*/React.createElement("div", {
        className: `${prefixCls}-progress-icon`
      }, /*#__PURE__*/React.createElement(_progress.default, {
        type: "circle",
        percent: percent,
        width: progressWidth,
        strokeWidth: 4,
        format: () => null
      }), node);
    }
    return node;
  };
  return /*#__PURE__*/React.createElement(_rcSteps.default, (0, _extends2.default)({
    icons: icons
  }, restProps, {
    current: current,
    size: size,
    items: mergedItems,
    direction: getDirection(),
    stepIcon: stepIconRender,
    prefixCls: prefixCls,
    iconPrefix: iconPrefix,
    className: stepsClassName
  }));
};
Steps.Step = _rcSteps.default.Step;
var _default = Steps;
exports.default = _default;