DefaultLoadingIcon.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var _react = _interopRequireWildcard(require("react"));
  10. var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcMotion = _interopRequireDefault(require("rc-motion"));
  13. var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
  14. const InnerLoadingIcon = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  15. const {
  16. prefixCls,
  17. className,
  18. style,
  19. iconClassName
  20. } = props;
  21. const mergedIconCls = (0, _classnames.default)(`${prefixCls}-loading-icon`, className);
  22. return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
  23. prefixCls: prefixCls,
  24. className: mergedIconCls,
  25. style: style,
  26. ref: ref
  27. }, /*#__PURE__*/_react.default.createElement(_LoadingOutlined.default, {
  28. className: iconClassName
  29. }));
  30. });
  31. const getCollapsedWidth = () => ({
  32. width: 0,
  33. opacity: 0,
  34. transform: 'scale(0)'
  35. });
  36. const getRealWidth = node => ({
  37. width: node.scrollWidth,
  38. opacity: 1,
  39. transform: 'scale(1)'
  40. });
  41. const DefaultLoadingIcon = props => {
  42. const {
  43. prefixCls,
  44. loading,
  45. existIcon,
  46. className,
  47. style,
  48. mount
  49. } = props;
  50. const visible = !!loading;
  51. if (existIcon) {
  52. return /*#__PURE__*/_react.default.createElement(InnerLoadingIcon, {
  53. prefixCls: prefixCls,
  54. className: className,
  55. style: style
  56. });
  57. }
  58. return /*#__PURE__*/_react.default.createElement(_rcMotion.default, {
  59. visible: visible,
  60. // Used for minus flex gap style only
  61. motionName: `${prefixCls}-loading-icon-motion`,
  62. motionAppear: !mount,
  63. motionEnter: !mount,
  64. motionLeave: !mount,
  65. removeOnLeave: true,
  66. onAppearStart: getCollapsedWidth,
  67. onAppearActive: getRealWidth,
  68. onEnterStart: getCollapsedWidth,
  69. onEnterActive: getRealWidth,
  70. onLeaveStart: getRealWidth,
  71. onLeaveActive: getCollapsedWidth
  72. }, ({
  73. className: motionCls,
  74. style: motionStyle
  75. }, ref) => {
  76. const mergedStyle = Object.assign(Object.assign({}, style), motionStyle);
  77. return /*#__PURE__*/_react.default.createElement(InnerLoadingIcon, {
  78. prefixCls: prefixCls,
  79. className: (0, _classnames.default)(className, motionCls),
  80. style: mergedStyle,
  81. ref: ref
  82. });
  83. });
  84. };
  85. var _default = exports.default = DefaultLoadingIcon;