index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. "use client";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import * as React from 'react';
  4. import usePatchElement from '../../_util/hooks/usePatchElement';
  5. import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../confirm';
  6. import destroyFns from '../destroyFns';
  7. import HookModal from './HookModal';
  8. let uuid = 0;
  9. const ElementsHolder = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((_props, ref) => {
  10. const [elements, patchElement] = usePatchElement();
  11. React.useImperativeHandle(ref, () => ({
  12. patchElement
  13. }), []);
  14. return /*#__PURE__*/React.createElement(React.Fragment, null, elements);
  15. }));
  16. function useModal() {
  17. const holderRef = React.useRef(null);
  18. // ========================== Effect ==========================
  19. const [actionQueue, setActionQueue] = React.useState([]);
  20. React.useEffect(() => {
  21. if (actionQueue.length) {
  22. const cloneQueue = _toConsumableArray(actionQueue);
  23. cloneQueue.forEach(action => {
  24. action();
  25. });
  26. setActionQueue([]);
  27. }
  28. }, [actionQueue]);
  29. // =========================== Hook ===========================
  30. const getConfirmFunc = React.useCallback(withFunc => function hookConfirm(config) {
  31. var _a;
  32. uuid += 1;
  33. const modalRef = /*#__PURE__*/React.createRef();
  34. // Proxy to promise with `onClose`
  35. let resolvePromise;
  36. const promise = new Promise(resolve => {
  37. resolvePromise = resolve;
  38. });
  39. let silent = false;
  40. let closeFunc;
  41. const modal = /*#__PURE__*/React.createElement(HookModal, {
  42. key: `modal-${uuid}`,
  43. config: withFunc(config),
  44. ref: modalRef,
  45. afterClose: () => {
  46. closeFunc === null || closeFunc === void 0 ? void 0 : closeFunc();
  47. },
  48. isSilent: () => silent,
  49. onConfirm: confirmed => {
  50. resolvePromise(confirmed);
  51. }
  52. });
  53. closeFunc = (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.patchElement(modal);
  54. if (closeFunc) {
  55. destroyFns.push(closeFunc);
  56. }
  57. const instance = {
  58. destroy: () => {
  59. function destroyAction() {
  60. var _a;
  61. (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
  62. }
  63. if (modalRef.current) {
  64. destroyAction();
  65. } else {
  66. setActionQueue(prev => [].concat(_toConsumableArray(prev), [destroyAction]));
  67. }
  68. },
  69. update: newConfig => {
  70. function updateAction() {
  71. var _a;
  72. (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.update(newConfig);
  73. }
  74. if (modalRef.current) {
  75. updateAction();
  76. } else {
  77. setActionQueue(prev => [].concat(_toConsumableArray(prev), [updateAction]));
  78. }
  79. },
  80. then: resolve => {
  81. silent = true;
  82. return promise.then(resolve);
  83. }
  84. };
  85. return instance;
  86. }, []);
  87. const fns = React.useMemo(() => ({
  88. info: getConfirmFunc(withInfo),
  89. success: getConfirmFunc(withSuccess),
  90. error: getConfirmFunc(withError),
  91. warning: getConfirmFunc(withWarn),
  92. confirm: getConfirmFunc(withConfirm)
  93. }), []);
  94. return [fns, /*#__PURE__*/React.createElement(ElementsHolder, {
  95. key: "modal-holder",
  96. ref: holderRef
  97. })];
  98. }
  99. export default useModal;