Skip to content

Commit

Permalink
refactor: ConfirmModal layout to fix batch of bug (ant-design#44557)
Browse files Browse the repository at this point in the history 
* refactor: Modal confirm style

* test: fix test case

* chore: merge wireframe

* chore: modify limit

* test: update snapshot
  • Loading branch information
@zombieJ
zombieJ authored Aug 31, 2023
1 parent cbfb126 commit d3c2f75
Show file tree
Hide file tree
Showing 10 changed files with 327 additions and 209 deletions.
23 changes: 18 additions & 5 deletions components/modal/ConfirmDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ import type { ModalContextProps } from './context';
import { ModalContextProvider } from './context';
import type { ModalFuncProps, ModalLocale } from './interface';
import Dialog from './Modal';
import ConfirmCmp from './style/confirmCmp';

export interface ConfirmDialogProps extends ModalFuncProps {
prefixCls: string;
afterClose?: () => void;
close?: (...args: any[]) => void;
/**
Expand Down Expand Up @@ -46,6 +48,7 @@ export function ConfirmContent(
},
) {
const {
prefixCls,
icon,
okText,
cancelText,
Expand Down Expand Up @@ -118,14 +121,22 @@ export function ConfirmContent(
</>
);

const hasTitle = props.title !== undefined && props.title !== null;

const bodyCls = `${confirmPrefixCls}-body`;

return (
<div className={`${confirmPrefixCls}-body-wrapper`}>
<div className={`${confirmPrefixCls}-body`}>
<div
className={classNames(bodyCls, {
[`${bodyCls}-has-title`]: hasTitle,
})}
>
{mergedIcon}
{props.title === undefined ? null : (
<span className={`${confirmPrefixCls}-title`}>{props.title}</span>
)}
<div className={`${confirmPrefixCls}-content`}>{props.content}</div>
<div className={`${confirmPrefixCls}-paragraph`}>
{hasTitle && <span className={`${confirmPrefixCls}-title`}>{props.title}</span>}
<div className={`${confirmPrefixCls}-content`}>{props.content}</div>
</div>
</div>

{footer === undefined || typeof footer === 'function' ? (
Expand All @@ -142,6 +153,8 @@ export function ConfirmContent(
) : (
footer
)}

<ConfirmCmp prefixCls={prefixCls} />
</div>
);
}
Expand Down
6 changes: 4 additions & 2 deletions components/modal/PurePanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
/* eslint-disable react/jsx-no-useless-fragment */

import * as React from 'react';
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 { withPureRenderTheme } from '../_util/PurePanel';
import { ConfigContext } from '../config-provider';
import { ConfirmContent } from './ConfirmDialog';
import type { ModalFuncProps } from './interface';
import { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
import { withPureRenderTheme } from '../_util/PurePanel';

export interface PurePanelProps
extends Omit<PanelProps, 'prefixCls'>,
Expand Down Expand Up @@ -48,6 +49,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
children: (
<ConfirmContent
{...props}
prefixCls={prefixCls}
confirmPrefixCls={confirmPrefixCls}
rootPrefixCls={rootPrefixCls}
content={children}
Expand Down
8 changes: 6 additions & 2 deletions components/modal/__tests__/__snapshots__/confirm.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,13 @@ exports[`Modal.confirm triggers callbacks correctly footer confirm should render
</svg>
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
hai
<div
class="ant-modal-confirm-content"
>
hai
</div>
</div>
</div>
hai
Expand Down
84 changes: 54 additions & 30 deletions components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,9 +256,13 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
</svg>
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
A good news!
<div
class="ant-modal-confirm-content"
>
A good news!
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -303,7 +307,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
class="ant-modal-confirm-body-wrapper"
>
<div
class="ant-modal-confirm-body"
class="ant-modal-confirm-body ant-modal-confirm-body-has-title"
>
<span
aria-label="exclamation-circle"
Expand All @@ -324,15 +328,19 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
/>
</svg>
</span>
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
Some descriptions.
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
>
Some descriptions.
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -794,9 +802,13 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
</svg>
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
A good news!
<div
class="ant-modal-confirm-content"
>
A good news!
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -841,7 +853,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
class="ant-modal-confirm-body-wrapper"
>
<div
class="ant-modal-confirm-body"
class="ant-modal-confirm-body ant-modal-confirm-body-has-title"
>
<span
aria-label="exclamation-circle"
Expand All @@ -862,15 +874,19 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
/>
</svg>
</span>
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
Some descriptions.
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
>
Some descriptions.
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -1114,9 +1130,13 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
</svg>
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
A good news!
<div
class="ant-modal-confirm-content"
>
A good news!
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -1161,7 +1181,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
class="ant-modal-confirm-body-wrapper"
>
<div
class="ant-modal-confirm-body"
class="ant-modal-confirm-body ant-modal-confirm-body-has-title"
>
<span
aria-label="exclamation-circle"
Expand All @@ -1182,15 +1202,19 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
/>
</svg>
</span>
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
class="ant-modal-confirm-paragraph"
>
Some descriptions.
<span
class="ant-modal-confirm-title"
>
Confirm This?
</span>
<div
class="ant-modal-confirm-content"
>
Some descriptions.
</div>
</div>
</div>
<div
Expand Down
Loading

0 comments on commit d3c2f75

Please sign in to comment.