ActionButton.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. "use client";
  2. import * as React from 'react';
  3. import useState from "rc-util/es/hooks/useState";
  4. import Button from '../button';
  5. import { convertLegacyProps } from '../button/buttonHelpers';
  6. const isThenable = thing => {
  7. return typeof (thing === null || thing === void 0 ? void 0 : thing.then) === 'function';
  8. };
  9. const ActionButton = props => {
  10. const {
  11. type,
  12. children,
  13. prefixCls,
  14. buttonProps,
  15. close,
  16. autoFocus,
  17. emitEvent,
  18. isSilent,
  19. quitOnNullishReturnValue,
  20. actionFn
  21. } = props;
  22. const clickedRef = React.useRef(false);
  23. const buttonRef = React.useRef(null);
  24. const [loading, setLoading] = useState(false);
  25. const onInternalClose = (...args) => {
  26. close === null || close === void 0 ? void 0 : close.apply(void 0, args);
  27. };
  28. React.useEffect(() => {
  29. let timeoutId = null;
  30. if (autoFocus) {
  31. timeoutId = setTimeout(() => {
  32. var _a;
  33. (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus({
  34. preventScroll: true
  35. });
  36. });
  37. }
  38. return () => {
  39. if (timeoutId) {
  40. clearTimeout(timeoutId);
  41. }
  42. };
  43. }, []);
  44. const handlePromiseOnOk = returnValueOfOnOk => {
  45. if (!isThenable(returnValueOfOnOk)) {
  46. return;
  47. }
  48. setLoading(true);
  49. returnValueOfOnOk.then((...args) => {
  50. setLoading(false, true);
  51. onInternalClose.apply(void 0, args);
  52. clickedRef.current = false;
  53. }, e => {
  54. // See: https://github.com/ant-design/ant-design/issues/6183
  55. setLoading(false, true);
  56. clickedRef.current = false;
  57. // Do not throw if is `await` mode
  58. if (isSilent === null || isSilent === void 0 ? void 0 : isSilent()) {
  59. return;
  60. }
  61. return Promise.reject(e);
  62. });
  63. };
  64. const onClick = e => {
  65. if (clickedRef.current) {
  66. return;
  67. }
  68. clickedRef.current = true;
  69. if (!actionFn) {
  70. onInternalClose();
  71. return;
  72. }
  73. let returnValueOfOnOk;
  74. if (emitEvent) {
  75. returnValueOfOnOk = actionFn(e);
  76. if (quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
  77. clickedRef.current = false;
  78. onInternalClose(e);
  79. return;
  80. }
  81. } else if (actionFn.length) {
  82. returnValueOfOnOk = actionFn(close);
  83. // https://github.com/ant-design/ant-design/issues/23358
  84. clickedRef.current = false;
  85. } else {
  86. returnValueOfOnOk = actionFn();
  87. if (!isThenable(returnValueOfOnOk)) {
  88. onInternalClose();
  89. return;
  90. }
  91. }
  92. handlePromiseOnOk(returnValueOfOnOk);
  93. };
  94. return /*#__PURE__*/React.createElement(Button, Object.assign({}, convertLegacyProps(type), {
  95. onClick: onClick,
  96. loading: loading,
  97. prefixCls: prefixCls
  98. }, buttonProps, {
  99. ref: buttonRef
  100. }), children);
  101. };
  102. export default ActionButton;