ActionButton.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  3. import { shallowRef, onMounted, defineComponent, onBeforeUnmount } from 'vue';
  4. import Button from '../button';
  5. import { convertLegacyProps } from '../button/buttonTypes';
  6. import useDestroyed from './hooks/useDestroyed';
  7. import { objectType } from './type';
  8. import { findDOMNode } from './props-util';
  9. const actionButtonProps = {
  10. type: {
  11. type: String
  12. },
  13. actionFn: Function,
  14. close: Function,
  15. autofocus: Boolean,
  16. prefixCls: String,
  17. buttonProps: objectType(),
  18. emitEvent: Boolean,
  19. quitOnNullishReturnValue: Boolean
  20. };
  21. function isThenable(thing) {
  22. return !!(thing && thing.then);
  23. }
  24. export default defineComponent({
  25. compatConfig: {
  26. MODE: 3
  27. },
  28. name: 'ActionButton',
  29. props: actionButtonProps,
  30. setup(props, _ref) {
  31. let {
  32. slots
  33. } = _ref;
  34. const clickedRef = shallowRef(false);
  35. const buttonRef = shallowRef();
  36. const loading = shallowRef(false);
  37. let timeoutId;
  38. const isDestroyed = useDestroyed();
  39. onMounted(() => {
  40. if (props.autofocus) {
  41. timeoutId = setTimeout(() => {
  42. var _a, _b;
  43. return (_b = (_a = findDOMNode(buttonRef.value)) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
  44. });
  45. }
  46. });
  47. onBeforeUnmount(() => {
  48. clearTimeout(timeoutId);
  49. });
  50. const onInternalClose = function () {
  51. var _a;
  52. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  53. args[_key] = arguments[_key];
  54. }
  55. (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
  56. };
  57. const handlePromiseOnOk = returnValueOfOnOk => {
  58. if (!isThenable(returnValueOfOnOk)) {
  59. return;
  60. }
  61. loading.value = true;
  62. returnValueOfOnOk.then(function () {
  63. if (!isDestroyed.value) {
  64. loading.value = false;
  65. }
  66. onInternalClose(...arguments);
  67. clickedRef.value = false;
  68. }, e => {
  69. // See: https://github.com/ant-design/ant-design/issues/6183
  70. if (!isDestroyed.value) {
  71. loading.value = false;
  72. }
  73. clickedRef.value = false;
  74. return Promise.reject(e);
  75. });
  76. };
  77. const onClick = e => {
  78. const {
  79. actionFn
  80. } = props;
  81. if (clickedRef.value) {
  82. return;
  83. }
  84. clickedRef.value = true;
  85. if (!actionFn) {
  86. onInternalClose();
  87. return;
  88. }
  89. let returnValueOfOnOk;
  90. if (props.emitEvent) {
  91. returnValueOfOnOk = actionFn(e);
  92. if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
  93. clickedRef.value = false;
  94. onInternalClose(e);
  95. return;
  96. }
  97. } else if (actionFn.length) {
  98. returnValueOfOnOk = actionFn(props.close);
  99. // https://github.com/ant-design/ant-design/issues/23358
  100. clickedRef.value = false;
  101. } else {
  102. returnValueOfOnOk = actionFn();
  103. if (!returnValueOfOnOk) {
  104. onInternalClose();
  105. return;
  106. }
  107. }
  108. handlePromiseOnOk(returnValueOfOnOk);
  109. };
  110. return () => {
  111. const {
  112. type,
  113. prefixCls,
  114. buttonProps
  115. } = props;
  116. return _createVNode(Button, _objectSpread(_objectSpread(_objectSpread({}, convertLegacyProps(type)), {}, {
  117. "onClick": onClick,
  118. "loading": loading.value,
  119. "prefixCls": prefixCls
  120. }, buttonProps), {}, {
  121. "ref": buttonRef
  122. }), slots);
  123. };
  124. }
  125. });