test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

refactor: solve modal circular dependency issue (#42841)

Browse Source
This commit is contained in:
kiner-tang(文辉) 2023-06-06 09:54:14 +08:00 committed by GitHub
parent 596104cc68
commit fca21af950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/modal/Modal.tsx
View File

@ -7,8 +7,8 @@ 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 { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
let mousePosition: MousePosition;

65
components/modal/PurePanel.tsx
View File

@ -1,16 +1,13 @@
/* eslint-disable react/jsx-no-useless-fragment */
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import { Panel } from 'rc-dialog';
import type { PanelProps } from 'rc-dialog/lib/Dialog/Content/Panel';
import * as React from 'react';
import Button from '../button';
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 } from './interface';
import { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
export interface PurePanelProps
@ -20,62 +17,6 @@ export interface PurePanelProps
style?: React.CSSProperties;
}
export function renderCloseIcon(prefixCls: string, closeIcon?: React.ReactNode) {
return (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
}
interface FooterProps {
onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
}
export const Footer: React.FC<
FooterProps &
Pick<
ModalProps,
| 'footer'
| 'okText'
| 'okType'
| 'cancelText'
| 'confirmLoading'
| 'okButtonProps'
| 'cancelButtonProps'
>
> = (props) => {
const {
okText,
okType = 'primary',
cancelText,
confirmLoading,
onOk,
onCancel,
okButtonProps,
cancelButtonProps,
} = props;
const [locale] = useLocale('Modal', getConfirmLocale());
return (
<>
<Button onClick={onCancel} {...cancelButtonProps}>
{cancelText || locale?.cancelText}
</Button>
<Button
{...convertLegacyProps(okType)}
loading={confirmLoading}
onClick={onOk}
{...okButtonProps}
>
{okText || locale?.okText}
</Button>
</>
);
};
const PurePanel: React.FC<PurePanelProps> = (props) => {
const {
prefixCls: customizePrefixCls,

63
components/modal/shared.tsx Normal file
View File

@ -0,0 +1,63 @@
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import React from 'react';
import Button from '../button';
import { convertLegacyProps } from '../button/button';
import { useLocale } from '../locale';
import type { ModalProps } from './interface';
import { getConfirmLocale } from './locale';
export function renderCloseIcon(prefixCls: string, closeIcon?: React.ReactNode) {
return (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
}
interface FooterProps {
onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
}
export const Footer: React.FC<
FooterProps &
Pick<
ModalProps,
| 'footer'
| 'okText'
| 'okType'
| 'cancelText'
| 'confirmLoading'
| 'okButtonProps'
| 'cancelButtonProps'
>
> = (props) => {
const {
okText,
okType = 'primary',
cancelText,
confirmLoading,
onOk,
onCancel,
okButtonProps,
cancelButtonProps,
} = props;
const [locale] = useLocale('Modal', getConfirmLocale());
return (
<>
<Button onClick={onCancel} {...cancelButtonProps}>
{cancelText || locale?.cancelText}
</Button>
<Button
{...convertLegacyProps(okType)}
loading={confirmLoading}
onClick={onOk}
{...okButtonProps}
>
{okText || locale?.okText}
</Button>
</>
);
};