ant-design/components/modal/useModal/HookModal.tsx

74 lines
2.0 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { ConfigContext } from '../../config-provider';
import defaultLocale from '../../locale/en_US';
import useLocale from '../../locale/useLocale';
2022-06-22 14:57:09 +08:00
import ConfirmDialog from '../ConfirmDialog';
import type { ModalFuncProps } from '../interface';
export interface HookModalProps {
afterClose: () => void;
config: ModalFuncProps;
}
export interface HookModalRef {
destroy: () => void;
update: (config: ModalFuncProps) => void;
}
const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> = (
{ afterClose: hookAfterClose, config },
ref,
) => {
const [open, setOpen] = React.useState(true);
const [innerConfig, setInnerConfig] = React.useState(config);
const { direction, getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('modal');
const rootPrefixCls = getPrefixCls();
const afterClose = () => {
hookAfterClose();
innerConfig.afterClose?.();
};
const close = (...args: any[]) => {
setOpen(false);
const triggerCancel = args.some((param) => param && param.triggerCancel);
if (innerConfig.onCancel && triggerCancel) {
innerConfig.onCancel(() => {}, ...args.slice(1));
}
};
React.useImperativeHandle(ref, () => ({
destroy: close,
update: (newConfig: ModalFuncProps) => {
setInnerConfig((originConfig) => ({
...originConfig,
...newConfig,
}));
},
}));
2022-12-29 17:05:50 +08:00
const mergedOkCancel = innerConfig.okCancel ?? innerConfig.type === 'confirm';
const [contextLocale] = useLocale('Modal', defaultLocale.Modal);
return (
<ConfirmDialog
prefixCls={prefixCls}
rootPrefixCls={rootPrefixCls}
{...innerConfig}
close={close}
open={open}
afterClose={afterClose}
okText={
innerConfig.okText || (mergedOkCancel ? contextLocale?.okText : contextLocale?.justOkText)
}
direction={innerConfig.direction || direction}
cancelText={innerConfig.cancelText || contextLocale?.cancelText}
/>
);
};
export default React.forwardRef(HookModal);