mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
20d5502193
* chore(deps-dev): bump eslint-config-airbnb from 18.2.1 to 19.0.0 Bumps [eslint-config-airbnb](https://github.com/airbnb/javascript) from 18.2.1 to 19.0.0. - [Release notes](https://github.com/airbnb/javascript/releases) - [Commits](https://github.com/airbnb/javascript/compare/eslint-config-airbnb-v18.2.1...eslint-config-airbnb-v19.0.0) --- updated-dependencies: - dependency-name: eslint-config-airbnb dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * chore: code style * memoize-one * add comment * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * improve useMemo deps Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: afc163 <afc163@gmail.com>
116 lines
2.9 KiB
TypeScript
116 lines
2.9 KiB
TypeScript
import * as React from 'react';
|
|
import { ModalFuncProps } from '../Modal';
|
|
import usePatchElement from '../../_util/hooks/usePatchElement';
|
|
import HookModal, { HookModalRef } from './HookModal';
|
|
import {
|
|
withConfirm,
|
|
ModalStaticFunctions,
|
|
withInfo,
|
|
withSuccess,
|
|
withError,
|
|
withWarn,
|
|
} from '../confirm';
|
|
|
|
let uuid = 0;
|
|
|
|
interface ElementsHolderRef {
|
|
patchElement: ReturnType<typeof usePatchElement>[1];
|
|
}
|
|
|
|
const ElementsHolder = React.memo(
|
|
React.forwardRef<ElementsHolderRef>((_props, ref) => {
|
|
const [elements, patchElement] = usePatchElement();
|
|
React.useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
patchElement,
|
|
}),
|
|
[],
|
|
);
|
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
return <>{elements}</>;
|
|
}),
|
|
);
|
|
|
|
export default function useModal(): [Omit<ModalStaticFunctions, 'warn'>, React.ReactElement] {
|
|
const holderRef = React.useRef<ElementsHolderRef>(null as any);
|
|
|
|
// ========================== Effect ==========================
|
|
const [actionQueue, setActionQueue] = React.useState<(() => void)[]>([]);
|
|
|
|
React.useEffect(() => {
|
|
if (actionQueue.length) {
|
|
const cloneQueue = [...actionQueue];
|
|
cloneQueue.forEach(action => {
|
|
action();
|
|
});
|
|
|
|
setActionQueue([]);
|
|
}
|
|
}, [actionQueue]);
|
|
|
|
// =========================== Hook ===========================
|
|
const getConfirmFunc = React.useCallback(
|
|
(withFunc: (config: ModalFuncProps) => ModalFuncProps) =>
|
|
function hookConfirm(config: ModalFuncProps) {
|
|
uuid += 1;
|
|
|
|
const modalRef = React.createRef<HookModalRef>();
|
|
|
|
let closeFunc: Function;
|
|
const modal = (
|
|
<HookModal
|
|
key={`modal-${uuid}`}
|
|
config={withFunc(config)}
|
|
ref={modalRef}
|
|
afterClose={() => {
|
|
closeFunc();
|
|
}}
|
|
/>
|
|
);
|
|
|
|
closeFunc = holderRef.current?.patchElement(modal);
|
|
|
|
return {
|
|
destroy: () => {
|
|
function destroyAction() {
|
|
modalRef.current?.destroy();
|
|
}
|
|
|
|
if (modalRef.current) {
|
|
destroyAction();
|
|
} else {
|
|
setActionQueue(prev => [...prev, destroyAction]);
|
|
}
|
|
},
|
|
update: (newConfig: ModalFuncProps) => {
|
|
function updateAction() {
|
|
modalRef.current?.update(newConfig);
|
|
}
|
|
|
|
if (modalRef.current) {
|
|
updateAction();
|
|
} else {
|
|
setActionQueue(prev => [...prev, updateAction]);
|
|
}
|
|
},
|
|
};
|
|
},
|
|
[],
|
|
);
|
|
|
|
const fns = React.useMemo(
|
|
() => ({
|
|
info: getConfirmFunc(withInfo),
|
|
success: getConfirmFunc(withSuccess),
|
|
error: getConfirmFunc(withError),
|
|
warning: getConfirmFunc(withWarn),
|
|
confirm: getConfirmFunc(withConfirm),
|
|
}),
|
|
[],
|
|
);
|
|
|
|
// eslint-disable-next-line react/jsx-key
|
|
return [fns, <ElementsHolder ref={holderRef} />];
|
|
}
|