101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
|
"use client";
|
||
|
|
|
||
|
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||
|
|
import * as React from 'react';
|
||
|
|
import usePatchElement from '../../_util/hooks/usePatchElement';
|
||
|
|
import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../confirm';
|
||
|
|
import destroyFns from '../destroyFns';
|
||
|
|
import HookModal from './HookModal';
|
||
|
|
let uuid = 0;
|
||
|
|
const ElementsHolder = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_props, ref) => {
|
||
|
|
const [elements, patchElement] = usePatchElement();
|
||
|
|
React.useImperativeHandle(ref, () => ({
|
||
|
|
patchElement
|
||
|
|
}), []);
|
||
|
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
||
|
|
return /*#__PURE__*/React.createElement(React.Fragment, null, elements);
|
||
|
|
}));
|
||
|
|
function useModal() {
|
||
|
|
const holderRef = React.useRef(null);
|
||
|
|
// ========================== Effect ==========================
|
||
|
|
const [actionQueue, setActionQueue] = React.useState([]);
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (actionQueue.length) {
|
||
|
|
const cloneQueue = _toConsumableArray(actionQueue);
|
||
|
|
cloneQueue.forEach(action => {
|
||
|
|
action();
|
||
|
|
});
|
||
|
|
setActionQueue([]);
|
||
|
|
}
|
||
|
|
}, [actionQueue]);
|
||
|
|
// =========================== Hook ===========================
|
||
|
|
const getConfirmFunc = React.useCallback(withFunc => function hookConfirm(config) {
|
||
|
|
var _a;
|
||
|
|
uuid += 1;
|
||
|
|
const modalRef = /*#__PURE__*/React.createRef();
|
||
|
|
// Proxy to promise with `onClose`
|
||
|
|
let resolvePromise;
|
||
|
|
const promise = new Promise(resolve => {
|
||
|
|
resolvePromise = resolve;
|
||
|
|
});
|
||
|
|
let silent = false;
|
||
|
|
let closeFunc;
|
||
|
|
const modal = /*#__PURE__*/React.createElement(HookModal, {
|
||
|
|
key: `modal-${uuid}`,
|
||
|
|
config: withFunc(config),
|
||
|
|
ref: modalRef,
|
||
|
|
afterClose: () => {
|
||
|
|
closeFunc === null || closeFunc === void 0 ? void 0 : closeFunc();
|
||
|
|
},
|
||
|
|
isSilent: () => silent,
|
||
|
|
onConfirm: confirmed => {
|
||
|
|
resolvePromise(confirmed);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
closeFunc = (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.patchElement(modal);
|
||
|
|
if (closeFunc) {
|
||
|
|
destroyFns.push(closeFunc);
|
||
|
|
}
|
||
|
|
const instance = {
|
||
|
|
destroy: () => {
|
||
|
|
function destroyAction() {
|
||
|
|
var _a;
|
||
|
|
(_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||
|
|
}
|
||
|
|
if (modalRef.current) {
|
||
|
|
destroyAction();
|
||
|
|
} else {
|
||
|
|
setActionQueue(prev => [].concat(_toConsumableArray(prev), [destroyAction]));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
update: newConfig => {
|
||
|
|
function updateAction() {
|
||
|
|
var _a;
|
||
|
|
(_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.update(newConfig);
|
||
|
|
}
|
||
|
|
if (modalRef.current) {
|
||
|
|
updateAction();
|
||
|
|
} else {
|
||
|
|
setActionQueue(prev => [].concat(_toConsumableArray(prev), [updateAction]));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
then: resolve => {
|
||
|
|
silent = true;
|
||
|
|
return promise.then(resolve);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return instance;
|
||
|
|
}, []);
|
||
|
|
const fns = React.useMemo(() => ({
|
||
|
|
info: getConfirmFunc(withInfo),
|
||
|
|
success: getConfirmFunc(withSuccess),
|
||
|
|
error: getConfirmFunc(withError),
|
||
|
|
warning: getConfirmFunc(withWarn),
|
||
|
|
confirm: getConfirmFunc(withConfirm)
|
||
|
|
}), []);
|
||
|
|
return [fns, /*#__PURE__*/React.createElement(ElementsHolder, {
|
||
|
|
key: "modal-holder",
|
||
|
|
ref: holderRef
|
||
|
|
})];
|
||
|
|
}
|
||
|
|
export default useModal;
|