diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index 127a71f15a..17968cbf8b 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -10,8 +10,8 @@ import warning from '../_util/warning'; import type { ThemeConfig } from '../config-provider'; import ConfigProvider from '../config-provider'; import { useLocale } from '../locale'; -import type { ModalFuncProps, ModalLocale } from './Modal'; import Dialog from './Modal'; +import type { ModalFuncProps, ModalLocale } from './interface'; interface ConfirmDialogProps extends ModalFuncProps { afterClose?: () => void; diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 4bf98b2f8a..d1a0c39422 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -1,19 +1,16 @@ import classNames from 'classnames'; import Dialog from 'rc-dialog'; import * as React from 'react'; -import type { ButtonProps, LegacyButtonType } from '../button/button'; -import type { DirectionType } from '../config-provider'; -import { ConfigContext } from '../config-provider'; -import { NoFormStyle } from '../form/context'; -import { NoCompactStyle } from '../space/Compact'; import { getTransitionName } from '../_util/motion'; import { canUseDocElement } from '../_util/styleChecker'; import warning from '../_util/warning'; +import { ConfigContext } from '../config-provider'; +import { NoFormStyle } from '../form/context'; +import { NoCompactStyle } from '../space/Compact'; import { Footer, renderCloseIcon } from './PurePanel'; +import type { ModalProps, MousePosition } from './interface'; import useStyle from './style'; -type MousePosition = { x: number; y: number } | null; - let mousePosition: MousePosition; // ref: https://github.com/ant-design/ant-design/issues/15795 @@ -35,117 +32,6 @@ if (canUseDocElement()) { document.documentElement.addEventListener('click', getClickPosition, true); } -export interface ModalProps { - /** Whether the modal dialog is visible or not */ - open?: boolean; - /** Whether to apply loading visual effect for OK button or not */ - confirmLoading?: boolean; - /** The modal dialog's title */ - title?: React.ReactNode; - /** Whether a close (x) button is visible on top right of the modal dialog or not */ - closable?: boolean; - /** Specify a function that will be called when a user clicks the OK button */ - onOk?: (e: React.MouseEvent) => void; - /** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */ - onCancel?: (e: React.MouseEvent) => void; - afterClose?: () => void; - /** Callback when the animation ends when Modal is turned on and off */ - afterOpenChange?: (open: boolean) => void; - /** Centered Modal */ - centered?: boolean; - /** Width of the modal dialog */ - width?: string | number; - /** Footer content */ - footer?: React.ReactNode; - /** Text of the OK button */ - okText?: React.ReactNode; - /** Button `type` of the OK button */ - okType?: LegacyButtonType; - /** Text of the Cancel button */ - cancelText?: React.ReactNode; - /** Whether to close the modal dialog when the mask (area outside the modal) is clicked */ - maskClosable?: boolean; - /** Force render Modal */ - forceRender?: boolean; - okButtonProps?: ButtonProps; - cancelButtonProps?: ButtonProps; - destroyOnClose?: boolean; - style?: React.CSSProperties; - wrapClassName?: string; - maskTransitionName?: string; - transitionName?: string; - className?: string; - rootClassName?: string; - getContainer?: string | HTMLElement | getContainerFunc | false; - zIndex?: number; - bodyStyle?: React.CSSProperties; - maskStyle?: React.CSSProperties; - mask?: boolean; - keyboard?: boolean; - wrapProps?: any; - prefixCls?: string; - closeIcon?: React.ReactNode; - modalRender?: (node: React.ReactNode) => React.ReactNode; - focusTriggerAfterClose?: boolean; - children?: React.ReactNode; - mousePosition?: MousePosition; - - // Legacy - /** @deprecated Please use `open` instead. */ - visible?: boolean; -} - -type getContainerFunc = () => HTMLElement; - -export interface ModalFuncProps { - prefixCls?: string; - className?: string; - rootClassName?: string; - open?: boolean; - /** @deprecated Please use `open` instead. */ - visible?: boolean; - title?: React.ReactNode; - closable?: boolean; - content?: React.ReactNode; - // TODO: find out exact types - onOk?: (...args: any[]) => any; - onCancel?: (...args: any[]) => any; - afterClose?: () => void; - okButtonProps?: ButtonProps; - cancelButtonProps?: ButtonProps; - centered?: boolean; - width?: string | number; - okText?: React.ReactNode; - okType?: LegacyButtonType; - cancelText?: React.ReactNode; - icon?: React.ReactNode; - mask?: boolean; - maskClosable?: boolean; - zIndex?: number; - okCancel?: boolean; - style?: React.CSSProperties; - wrapClassName?: string; - maskStyle?: React.CSSProperties; - type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm'; - keyboard?: boolean; - getContainer?: string | HTMLElement | getContainerFunc | false; - autoFocusButton?: null | 'ok' | 'cancel'; - transitionName?: string; - maskTransitionName?: string; - direction?: DirectionType; - bodyStyle?: React.CSSProperties; - closeIcon?: React.ReactNode; - footer?: React.ReactNode; - modalRender?: (node: React.ReactNode) => React.ReactNode; - focusTriggerAfterClose?: boolean; -} - -export interface ModalLocale { - okText: string; - cancelText: string; - justOkText: string; -} - const Modal: React.FC = (props) => { const { getPopupContainer: getContextPopupContainer, diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx index fe8c085e5d..3fc2f66120 100644 --- a/components/modal/PurePanel.tsx +++ b/components/modal/PurePanel.tsx @@ -9,8 +9,8 @@ import { convertLegacyProps } from '../button/button'; import { ConfigContext } from '../config-provider'; import { useLocale } from '../locale'; import { ConfirmContent } from './ConfirmDialog'; +import type { ModalFuncProps, ModalProps } from './interface'; import { getConfirmLocale } from './locale'; -import type { ModalFuncProps, ModalProps } from './Modal'; import useStyle from './style'; export interface PurePanelProps diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index c0a391b152..5dc126aaae 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import warning from '../_util/warning'; import { globalConfig, warnContext } from '../config-provider'; import ConfirmDialog from './ConfirmDialog'; -import type { ModalFuncProps } from './Modal'; import destroyFns from './destroyFns'; +import type { ModalFuncProps } from './interface'; import { getConfirmLocale } from './locale'; let defaultRootPrefixCls = ''; diff --git a/components/modal/index.tsx b/components/modal/index.tsx index 8dc9971cd7..e28acd1138 100644 --- a/components/modal/index.tsx +++ b/components/modal/index.tsx @@ -8,12 +8,12 @@ import confirm, { withWarn, } from './confirm'; import destroyFns from './destroyFns'; -import type { ModalFuncProps } from './Modal'; +import type { ModalFuncProps } from './interface'; import OriginModal from './Modal'; import PurePanel from './PurePanel'; import useModal from './useModal'; -export type { ModalFuncProps, ModalProps } from './Modal'; +export type { ModalFuncProps, ModalLocale, ModalProps } from './interface'; function modalWarn(props: ModalFuncProps) { return confirm(withWarn(props)); diff --git a/components/modal/interface.ts b/components/modal/interface.ts new file mode 100644 index 0000000000..4702119c03 --- /dev/null +++ b/components/modal/interface.ts @@ -0,0 +1,115 @@ +import type { ButtonProps, LegacyButtonType } from '../button/button'; +import type { DirectionType } from '../config-provider'; + +export interface ModalProps { + /** Whether the modal dialog is visible or not */ + open?: boolean; + /** Whether to apply loading visual effect for OK button or not */ + confirmLoading?: boolean; + /** The modal dialog's title */ + title?: React.ReactNode; + /** Whether a close (x) button is visible on top right of the modal dialog or not */ + closable?: boolean; + /** Specify a function that will be called when a user clicks the OK button */ + onOk?: (e: React.MouseEvent) => void; + /** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */ + onCancel?: (e: React.MouseEvent) => void; + afterClose?: () => void; + /** Callback when the animation ends when Modal is turned on and off */ + afterOpenChange?: (open: boolean) => void; + /** Centered Modal */ + centered?: boolean; + /** Width of the modal dialog */ + width?: string | number; + /** Footer content */ + footer?: React.ReactNode; + /** Text of the OK button */ + okText?: React.ReactNode; + /** Button `type` of the OK button */ + okType?: LegacyButtonType; + /** Text of the Cancel button */ + cancelText?: React.ReactNode; + /** Whether to close the modal dialog when the mask (area outside the modal) is clicked */ + maskClosable?: boolean; + /** Force render Modal */ + forceRender?: boolean; + okButtonProps?: ButtonProps; + cancelButtonProps?: ButtonProps; + destroyOnClose?: boolean; + style?: React.CSSProperties; + wrapClassName?: string; + maskTransitionName?: string; + transitionName?: string; + className?: string; + rootClassName?: string; + getContainer?: string | HTMLElement | getContainerFunc | false; + zIndex?: number; + bodyStyle?: React.CSSProperties; + maskStyle?: React.CSSProperties; + mask?: boolean; + keyboard?: boolean; + wrapProps?: any; + prefixCls?: string; + closeIcon?: React.ReactNode; + modalRender?: (node: React.ReactNode) => React.ReactNode; + focusTriggerAfterClose?: boolean; + children?: React.ReactNode; + mousePosition?: MousePosition; + + // Legacy + /** @deprecated Please use `open` instead. */ + visible?: boolean; +} + +type getContainerFunc = () => HTMLElement; + +export interface ModalFuncProps { + prefixCls?: string; + className?: string; + rootClassName?: string; + open?: boolean; + /** @deprecated Please use `open` instead. */ + visible?: boolean; + title?: React.ReactNode; + closable?: boolean; + content?: React.ReactNode; + // TODO: find out exact types + onOk?: (...args: any[]) => any; + onCancel?: (...args: any[]) => any; + afterClose?: () => void; + okButtonProps?: ButtonProps; + cancelButtonProps?: ButtonProps; + centered?: boolean; + width?: string | number; + okText?: React.ReactNode; + okType?: LegacyButtonType; + cancelText?: React.ReactNode; + icon?: React.ReactNode; + mask?: boolean; + maskClosable?: boolean; + zIndex?: number; + okCancel?: boolean; + style?: React.CSSProperties; + wrapClassName?: string; + maskStyle?: React.CSSProperties; + type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm'; + keyboard?: boolean; + getContainer?: string | HTMLElement | getContainerFunc | false; + autoFocusButton?: null | 'ok' | 'cancel'; + transitionName?: string; + maskTransitionName?: string; + direction?: DirectionType; + bodyStyle?: React.CSSProperties; + closeIcon?: React.ReactNode; + footer?: React.ReactNode; + modalRender?: (node: React.ReactNode) => React.ReactNode; + focusTriggerAfterClose?: boolean; +} + +export interface ModalLocale { + okText: string; + cancelText: string; + justOkText: string; +} + +export type MousePosition = { x: number; y: number } | null; diff --git a/components/modal/useModal/HookModal.tsx b/components/modal/useModal/HookModal.tsx index d1e699fdc5..f6f54e4c29 100644 --- a/components/modal/useModal/HookModal.tsx +++ b/components/modal/useModal/HookModal.tsx @@ -3,7 +3,7 @@ import { ConfigContext } from '../../config-provider'; import defaultLocale from '../../locale/en_US'; import useLocale from '../../locale/useLocale'; import ConfirmDialog from '../ConfirmDialog'; -import type { ModalFuncProps } from '../Modal'; +import type { ModalFuncProps } from '../interface'; export interface HookModalProps { afterClose: () => void; diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx index ce4b1e55a8..e8658e2eb8 100644 --- a/components/modal/useModal/index.tsx +++ b/components/modal/useModal/index.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import usePatchElement from '../../_util/hooks/usePatchElement'; import type { ModalStaticFunctions } from '../confirm'; import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../confirm'; -import type { ModalFuncProps } from '../Modal'; +import destroyFns from '../destroyFns'; +import type { ModalFuncProps } from '../interface'; import type { HookModalRef } from './HookModal'; import HookModal from './HookModal'; -import destroyFns from '../destroyFns'; let uuid = 0;