DefaultLoadingIcon.js 2.1 KB

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