Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: CP support Modal closeIcon #47226

Merged
merged 3 commits into from
Jan 30, 2024
Merged

feat: CP support Modal closeIcon #47226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7cded6c
feat: CP support Modal closeIcon
li-jia-nan Jan 30, 2024
a0785ec
fix: fix
li-jia-nan Jan 30, 2024
0207cb0
Merge branch 'feature' into Modal-closeIcon
li-jia-nan Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 6 additions & 10 deletions components/config-provider/__tests__/style.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,27 +642,23 @@ describe('ConfigProvider support style and className props', () => {
expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
});

it('Should Modal className & style works', () => {
it('Should Modal className & style & closeIcon works', () => {
const { baseElement } = render(
<ConfigProvider
modal={{
className: 'cp-modal',
style: {
background: 'red',
},
style: { background: 'red' },
closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
}}
>
<Modal title="Basic Modal" open>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
<Modal open>test</Modal>
</ConfigProvider>,
);

const selectors = '.ant-modal-content .ant-modal-close .cp-test-closeIcon';
const element = baseElement.querySelector<HTMLDivElement>('.ant-modal');
expect(element).toHaveClass('cp-modal');
expect(element).toHaveStyle({ background: 'red' });
expect(element?.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
});

it('Should Result className & style works', () => {
Expand Down
3 changes: 2 additions & 1 deletion components/config-provider/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export interface TableConfig extends ComponentStyleConfig {

export type TourConfig = Pick<TourProps, 'closeIcon'>;

export type ModalConfig = ComponentStyleConfig & Pick<ModalProps, 'classNames' | 'styles'>;
export type ModalConfig = ComponentStyleConfig &
Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;

export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;

Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const {
| menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| notification | Set Notification common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const {
| menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
6 changes: 1 addition & 5 deletions components/modal/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,11 +252,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
mask={mask}
maskClosable={maskClosable}
style={style}
styles={{
body: bodyStyle,
mask: maskStyle,
...styles,
}}
styles={{ body: bodyStyle, mask: maskStyle, ...styles }}
width={width}
zIndex={mergedZIndex}
afterClose={afterClose}
Expand Down
7 changes: 4 additions & 3 deletions components/modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ import classNames from 'classnames';
import Dialog from 'rc-dialog';

import useClosable from '../_util/hooks/useClosable';
import { useZIndex } from '../_util/hooks/useZIndex';
import { getTransitionName } from '../_util/motion';
import { canUseDocElement } from '../_util/styleChecker';
import { devUseWarning } from '../_util/warning';
import zIndexContext from '../_util/zindexContext';
import { ConfigContext } from '../config-provider';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import { NoFormStyle } from '../form/context';
import { NoCompactStyle } from '../space/Compact';
import { usePanelRef } from '../watermark/context';
import type { ModalProps, MousePosition } from './interface';
import { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
import { useZIndex } from '../_util/hooks/useZIndex';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';

let mousePosition: MousePosition;

Expand Down Expand Up @@ -105,9 +105,10 @@ const Modal: React.FC<ModalProps> = (props) => {
const dialogFooter = footer !== null && (
<Footer {...props} onOk={handleOk} onCancel={handleCancel} />
);

const [mergedClosable, mergedCloseIcon] = useClosable(
closable,
closeIcon,
typeof closeIcon !== 'undefined' ? closeIcon : modal?.closeIcon,
MadCcc marked this conversation as resolved.
Show resolved Hide resolved
(icon) => renderCloseIcon(prefixCls, icon),
<CloseOutlined className={`${prefixCls}-close-icon`} />,
true,
Expand Down