index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined";
  12. import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
  13. import classNames from 'classnames';
  14. import RcSteps from 'rc-steps';
  15. import { useComponentConfig } from '../config-provider/context';
  16. import useSize from '../config-provider/hooks/useSize';
  17. import useBreakpoint from '../grid/hooks/useBreakpoint';
  18. import Progress from '../progress';
  19. import Tooltip from '../tooltip';
  20. import useStyle from './style';
  21. import useLegacyItems from './useLegacyItems';
  22. const Steps = props => {
  23. const {
  24. percent,
  25. size: customizeSize,
  26. className,
  27. rootClassName,
  28. direction,
  29. items,
  30. responsive = true,
  31. current = 0,
  32. children,
  33. style
  34. } = props,
  35. restProps = __rest(props, ["percent", "size", "className", "rootClassName", "direction", "items", "responsive", "current", "children", "style"]);
  36. const {
  37. xs
  38. } = useBreakpoint(responsive);
  39. const {
  40. getPrefixCls,
  41. direction: rtlDirection,
  42. className: contextClassName,
  43. style: contextStyle
  44. } = useComponentConfig('steps');
  45. const realDirectionValue = React.useMemo(() => responsive && xs ? 'vertical' : direction, [xs, direction]);
  46. const size = useSize(customizeSize);
  47. const prefixCls = getPrefixCls('steps', props.prefixCls);
  48. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  49. const isInline = props.type === 'inline';
  50. const iconPrefix = getPrefixCls('', props.iconPrefix);
  51. const mergedItems = useLegacyItems(items, children);
  52. const mergedPercent = isInline ? undefined : percent;
  53. const mergedStyle = Object.assign(Object.assign({}, contextStyle), style);
  54. const stepsClassName = classNames(contextClassName, {
  55. [`${prefixCls}-rtl`]: rtlDirection === 'rtl',
  56. [`${prefixCls}-with-progress`]: mergedPercent !== undefined
  57. }, className, rootClassName, hashId, cssVarCls);
  58. const icons = {
  59. finish: /*#__PURE__*/React.createElement(CheckOutlined, {
  60. className: `${prefixCls}-finish-icon`
  61. }),
  62. error: /*#__PURE__*/React.createElement(CloseOutlined, {
  63. className: `${prefixCls}-error-icon`
  64. })
  65. };
  66. const stepIconRender = ({
  67. node,
  68. status
  69. }) => {
  70. if (status === 'process' && mergedPercent !== undefined) {
  71. // currently it's hard-coded, since we can't easily read the actually width of icon
  72. const progressWidth = size === 'small' ? 32 : 40;
  73. // iconWithProgress
  74. return /*#__PURE__*/React.createElement("div", {
  75. className: `${prefixCls}-progress-icon`
  76. }, /*#__PURE__*/React.createElement(Progress, {
  77. type: "circle",
  78. percent: mergedPercent,
  79. size: progressWidth,
  80. strokeWidth: 4,
  81. format: () => null
  82. }), node);
  83. }
  84. return node;
  85. };
  86. const itemRender = (item, stepItem) => item.description ? /*#__PURE__*/React.createElement(Tooltip, {
  87. title: item.description
  88. }, stepItem) : stepItem;
  89. return wrapCSSVar(/*#__PURE__*/React.createElement(RcSteps, Object.assign({
  90. icons: icons
  91. }, restProps, {
  92. style: mergedStyle,
  93. current: current,
  94. size: size,
  95. items: mergedItems,
  96. itemRender: isInline ? itemRender : undefined,
  97. stepIcon: stepIconRender,
  98. direction: realDirectionValue,
  99. prefixCls: prefixCls,
  100. iconPrefix: iconPrefix,
  101. className: stepsClassName
  102. })));
  103. };
  104. Steps.Step = RcSteps.Step;
  105. if (process.env.NODE_ENV !== 'production') {
  106. Steps.displayName = 'Steps';
  107. }
  108. export default Steps;