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

feat(Modal): Modal static function accept 'styles' (#45558)

Browse Source 
* feat(Modal): modal static function should accept 'styles'

* lint

* Update components/modal/interface.ts

Signed-off-by: afc163 <afc163@gmail.com>

* Update components/modal/ConfirmDialog.tsx

Signed-off-by: afc163 <afc163@gmail.com>

* Update components/modal/ConfirmDialog.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: KotoriK <52659125+KotoriK@users.noreply.github.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Signed-off-by: KotoriK <52659125+KotoriK@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
KotoriK 2023-11-02 10:12:41 +08:00 committed by GitHub
parent b14faf04bf
commit d8fbefcd36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/modal/ConfirmDialog.tsx
View File

@ -185,6 +185,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
modalRender,
focusTriggerAfterClose,
onConfirm,
styles,
} = props;
if (process.env.NODE_ENV !== 'production') {
@ -247,6 +248,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
styles={{
body: bodyStyle,
mask: maskStyle,
...styles,
}}
width={width}
zIndex={zIndex}

8
components/modal/__tests__/confirm.test.tsx
View File

@ -663,6 +663,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
spy.mockRestore();
});
it('styles', async () => {
resetWarned();
await open({ styles: { body: { width: 500 } } });
const { width } = $$('.ant-modal-body')[0].style;
expect(width).toBe('500px');
});
describe('the callback close should be a method when onCancel has a close parameter', () => {
(['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => {
it(`click the close icon to trigger ${type} onCancel`, async () => {

8
components/modal/interface.ts
View File

@ -8,7 +8,10 @@ export type ModalFooterRender = (
originNode: React.ReactNode,
extra: { OkBtn: FC; CancelBtn: FC },
) => React.ReactNode;
export interface ModalProps {
interface ModalCommonProps {
styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
}
export interface ModalProps extends ModalCommonProps {
/** Whether the modal dialog is visible or not */
open?: boolean;
/** Whether to apply loading visual effect for OK button or not */
@ -50,7 +53,6 @@ export interface ModalProps {
className?: string;
rootClassName?: string;
classNames?: Omit<NonNullable<DialogProps['classNames']>, 'wrapper'>;
styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
getContainer?: string | HTMLElement | getContainerFunc | false;
zIndex?: number;
/** @deprecated Please use `styles.body` instead */
@ -74,7 +76,7 @@ export interface ModalProps {
type getContainerFunc = () => HTMLElement;
export interface ModalFuncProps {
export interface ModalFuncProps extends ModalCommonProps {
prefixCls?: string;
className?: string;
rootClassName?: string;