mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

type: fix Modal styles typing (#49055)

Browse Source
This commit is contained in:
afc163 2024-05-24 13:49:45 +08:00 committed by GitHub
parent 86abdb9918
commit 9db0fc7440
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/modal/__tests__/type.test.tsx
View File

@ -4,8 +4,28 @@ import Modal from '..';
describe('Modal.typescript', () => { describe('Modal.typescript', () => {
it('Modal.okType', () => { it('Modal.okType', () => {
const form = <Modal okType="danger" />; const modal = <Modal okType="danger" />;
expect(form).toBeTruthy(); expect(modal).toBeTruthy();
});
it('Modal.styles', () => {
const style: React.CSSProperties = {
position: 'absolute',
};
const modal = (
<Modal
styles={{
header: style,
body: style,
footer: style,
mask: style,
wrapper: style,
content: style,
}}
/>
);
expect(modal).toBeTruthy();
}); });
}); });

18
components/modal/demo/_semantic.tsx
View File

@ -32,16 +32,14 @@ const BlockModal = (props: ModalProps) => {
<Modal <Modal
getContainer={() => divRef.current!} getContainer={() => divRef.current!}
{...props} {...props}
styles={ styles={{
{ mask: {
mask: { position: 'absolute',
position: 'absolute', },
}, wrapper: {
wrapper: { position: 'absolute',
position: 'absolute', },
}, }}
} as any
}
style={{ style={{
top: '50%', top: '50%',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',

13
components/modal/interface.ts
View File

@ -5,13 +5,12 @@ import type { ClosableType } from '../_util/hooks/useClosable';
import type { ButtonProps, LegacyButtonType } from '../button/button'; import type { ButtonProps, LegacyButtonType } from '../button/button';
import type { DirectionType } from '../config-provider'; import type { DirectionType } from '../config-provider';
export type ModalFooterRender = ( interface ModalCommonProps extends Omit<DialogProps, 'footer'> {
originNode: React.ReactNode, footer?:
extra: { OkBtn: FC; CancelBtn: FC }, | React.ReactNode
) => React.ReactNode; | ((originNode: React.ReactNode, extra: { OkBtn: FC; CancelBtn: FC }) => React.ReactNode);
interface ModalCommonProps {
styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
} }
export interface ModalProps extends ModalCommonProps { export interface ModalProps extends ModalCommonProps {
/** Whether the modal dialog is visible or not */ /** Whether the modal dialog is visible or not */
open?: boolean; open?: boolean;
@ -32,8 +31,6 @@ export interface ModalProps extends ModalCommonProps {
centered?: boolean; centered?: boolean;
/** Width of the modal dialog */ /** Width of the modal dialog */
width?: string | number; width?: string | number;
/** Footer content */
footer?: ModalFooterRender | React.ReactNode;
/** Text of the OK button */ /** Text of the OK button */
okText?: React.ReactNode; okText?: React.ReactNode;
/** Button `type` of the OK button */ /** Button `type` of the OK button */