Steps.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "stepIcon", "initial", "icons", "onChange", "itemRender", "items"];
  6. /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
  7. import classNames from 'classnames';
  8. import React from 'react';
  9. import Step from "./Step";
  10. function Steps(props) {
  11. var _classNames;
  12. var _props$prefixCls = props.prefixCls,
  13. prefixCls = _props$prefixCls === void 0 ? 'rc-steps' : _props$prefixCls,
  14. _props$style = props.style,
  15. style = _props$style === void 0 ? {} : _props$style,
  16. className = props.className,
  17. children = props.children,
  18. _props$direction = props.direction,
  19. direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
  20. _props$type = props.type,
  21. type = _props$type === void 0 ? 'default' : _props$type,
  22. _props$labelPlacement = props.labelPlacement,
  23. labelPlacement = _props$labelPlacement === void 0 ? 'horizontal' : _props$labelPlacement,
  24. _props$iconPrefix = props.iconPrefix,
  25. iconPrefix = _props$iconPrefix === void 0 ? 'rc' : _props$iconPrefix,
  26. _props$status = props.status,
  27. status = _props$status === void 0 ? 'process' : _props$status,
  28. size = props.size,
  29. _props$current = props.current,
  30. current = _props$current === void 0 ? 0 : _props$current,
  31. _props$progressDot = props.progressDot,
  32. progressDot = _props$progressDot === void 0 ? false : _props$progressDot,
  33. stepIcon = props.stepIcon,
  34. _props$initial = props.initial,
  35. initial = _props$initial === void 0 ? 0 : _props$initial,
  36. icons = props.icons,
  37. onChange = props.onChange,
  38. itemRender = props.itemRender,
  39. _props$items = props.items,
  40. items = _props$items === void 0 ? [] : _props$items,
  41. restProps = _objectWithoutProperties(props, _excluded);
  42. var isNav = type === 'navigation';
  43. var isInline = type === 'inline';
  44. // inline type requires fixed progressDot direction size.
  45. var mergedProgressDot = isInline || progressDot;
  46. var mergedDirection = isInline ? 'horizontal' : direction;
  47. var mergedSize = isInline ? undefined : size;
  48. var adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
  49. var classString = classNames(prefixCls, "".concat(prefixCls, "-").concat(mergedDirection), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(mergedSize), mergedSize), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), mergedDirection === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!mergedProgressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _defineProperty(_classNames, "".concat(prefixCls, "-inline"), isInline), _classNames));
  50. var onStepClick = function onStepClick(next) {
  51. if (onChange && current !== next) {
  52. onChange(next);
  53. }
  54. };
  55. var renderStep = function renderStep(item, index) {
  56. var mergedItem = _objectSpread({}, item);
  57. var stepNumber = initial + index;
  58. // fix tail color
  59. if (status === 'error' && index === current - 1) {
  60. mergedItem.className = "".concat(prefixCls, "-next-error");
  61. }
  62. if (!mergedItem.status) {
  63. if (stepNumber === current) {
  64. mergedItem.status = status;
  65. } else if (stepNumber < current) {
  66. mergedItem.status = 'finish';
  67. } else {
  68. mergedItem.status = 'wait';
  69. }
  70. }
  71. if (isInline) {
  72. mergedItem.icon = undefined;
  73. mergedItem.subTitle = undefined;
  74. }
  75. if (!mergedItem.render && itemRender) {
  76. mergedItem.render = function (stepItem) {
  77. return itemRender(mergedItem, stepItem);
  78. };
  79. }
  80. return /*#__PURE__*/React.createElement(Step, _extends({}, mergedItem, {
  81. active: stepNumber === current,
  82. stepNumber: stepNumber + 1,
  83. stepIndex: stepNumber,
  84. key: stepNumber,
  85. prefixCls: prefixCls,
  86. iconPrefix: iconPrefix,
  87. wrapperStyle: style,
  88. progressDot: mergedProgressDot,
  89. stepIcon: stepIcon,
  90. icons: icons,
  91. onStepClick: onChange && onStepClick
  92. }));
  93. };
  94. return /*#__PURE__*/React.createElement("div", _extends({
  95. className: classString,
  96. style: style
  97. }, restProps), items.filter(function (item) {
  98. return item;
  99. }).map(renderStep));
  100. }
  101. Steps.Step = Step;
  102. export default Steps;