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: Modal.config rootPrefixCls #25613

Merged
merged 2 commits into from
Jul 14, 2020
Merged

feat: Modal.config rootPrefixCls #25613

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fcd68c
feat: Modal.config rootPrefixCls
afc163 Jul 14, 2020
043e12a
fix tsd
afc163 Jul 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion components/modal/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface ActionButtonProps {
actionFn?: (...args: any[]) => any | PromiseLike<any>;
closeModal: Function;
autoFocus?: boolean;
prefixCls?: string;
Copy link
Contributor

@07akioni 07akioni Jul 14, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

从改动部分看起来这个是一定要有的

buttonProps?: ButtonProps;
}

Expand Down Expand Up @@ -76,12 +77,13 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
handlePromiseOnOk(returnValueOfOnOk);
};

const { type, children, buttonProps } = props;
const { type, children, prefixCls, buttonProps } = props;
return (
<Button
{...convertLegacyProps(type)}
onClick={onClick}
loading={loading}
prefixCls={prefixCls}
{...buttonProps}
ref={ref}
>
Expand Down
4 changes: 4 additions & 0 deletions components/modal/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void;
close: (...args: any[]) => void;
autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls?: string;
}

const ConfirmDialog = (props: ConfirmDialogProps) => {
Expand All @@ -29,6 +30,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
cancelButtonProps,
direction,
prefixCls,
rootPrefixCls,
} = props;

devWarning(
Expand Down Expand Up @@ -64,6 +66,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
closeModal={close}
autoFocus={autoFocusButton === 'cancel'}
buttonProps={cancelButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{cancelText}
</ActionButton>
Expand Down Expand Up @@ -107,6 +110,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
closeModal={close}
autoFocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{okText}
</ActionButton>
Expand Down
20 changes: 12 additions & 8 deletions components/modal/__tests__/confirm.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,28 +295,32 @@ describe('Modal.confirm triggers callbacks correctly', () => {
expect(onOk).toHaveBeenCalledTimes(3);
});

it('should be able to config prefixCls', () => {
it('should be able to config rootPrefixCls', () => {
jest.useFakeTimers();
Modal.config({
prefixCls: 'prefix-test',
rootPrefixCls: 'my',
});
confirm({
title: 'title',
});
jest.runAllTimers();
expect(document.querySelectorAll('.ant-modal-confirm').length).toBe(0);
expect(document.querySelectorAll('.prefix-test-confirm').length).toBe(1);
expect(document.querySelectorAll('.ant-btn').length).toBe(0);
expect(document.querySelectorAll('.my-btn').length).toBe(2);
expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
Modal.config({
prefixCls: 'prefix2',
rootPrefixCls: 'your',
});
confirm({
title: 'title',
});
jest.runAllTimers();
expect(document.querySelectorAll('.ant-modal-confirm').length).toBe(0);
expect(document.querySelectorAll('.prefix2-confirm').length).toBe(1);
expect(document.querySelectorAll('.ant-btn').length).toBe(0);
expect(document.querySelectorAll('.my-btn').length).toBe(2);
expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
expect(document.querySelectorAll('.your-btn').length).toBe(2);
expect(document.querySelectorAll('.your-modal-confirm').length).toBe(1);
Modal.config({
prefixCls: 'ant-modal',
rootPrefixCls: 'ant',
});
jest.useRealTimers();
});
Expand Down
18 changes: 8 additions & 10 deletions components/modal/confirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,10 @@ import { getConfirmLocale } from './locale';
import { ModalFuncProps, destroyFns } from './Modal';
import ConfirmDialog from './ConfirmDialog';

let defaultPrefixCls = 'ant-modal';
let defaultRootPrefixCls = 'ant';

function getPrefixCls(prefixCls: string) {
if (prefixCls) {
return prefixCls;
}
return defaultPrefixCls;
function getRootPrefixCls() {
return defaultRootPrefixCls;
}

export type ModalFunc = (
Expand Down Expand Up @@ -68,7 +65,8 @@ export default function confirm(config: ModalFuncProps) {
ReactDOM.render(
<ConfirmDialog
{...props}
prefixCls={getPrefixCls(prefixCls)}
prefixCls={prefixCls || `${getRootPrefixCls()}-modal`}
rootPrefixCls={getRootPrefixCls()}
okText={okText || (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText)}
cancelText={cancelText || runtimeLocale.cancelText}
/>,
Expand Down Expand Up @@ -149,8 +147,8 @@ export function withConfirm(props: ModalFuncProps): ModalFuncProps {
};
}

export function globalConfig({ prefixCls }: { prefixCls?: string }) {
if (prefixCls) {
defaultPrefixCls = prefixCls;
export function globalConfig({ rootPrefixCls }: { rootPrefixCls?: string }) {
if (rootPrefixCls) {
defaultRootPrefixCls = rootPrefixCls;
}
}
2 changes: 1 addition & 1 deletion components/modal/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Like `message.config()`, `Modal.config()` could set `Modal.confirm` props global

```jsx
Modal.config({
prefixCls: 'my-modal',
rootPrefixCls: 'ant',
});
```

Expand Down
2 changes: 1 addition & 1 deletion components/modal/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ return <div>{contextHolder}</div>;

```jsx
Modal.config({
prefixCls: 'my-modal',
rootPrefixCls: 'ant',
});
```

Expand Down
6 changes: 3 additions & 3 deletions docs/react/faq.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,13 @@ Static methods like message/notification/Modal.confirm are not using the same re

```js
message.config({
prefixCls: 'my-message',
prefixCls: 'ant-message',
});
notification.config({
prefixCls: 'my-notification',
prefixCls: 'ant-notification',
});
Modal.config({
prefixCls: 'my-modal',
rootPrefixCls: 'ant',
});
```

Expand Down
8 changes: 4 additions & 4 deletions docs/react/faq.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,19 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，

message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式：

1. 使用官方提供的 [message.useMessage]([message.useMessage](https://ant.design/components/message-cn/#components-message-demo-hooks))、[notification.useNotification](https://ant.design/components/notification-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%9F) 和 [Modal.useModal](https://ant.design/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%9F) 来调用这些方法。
1. 使用官方提供的 [message.useMessage](<[message.useMessage](https://ant.design/components/message-cn/#components-message-demo-hooks)>)、[notification.useNotification](https://ant.design/components/notification-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%9F) 和 [Modal.useModal](https://ant.design/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%9F) 来调用这些方法。

2. 使用 `message.config`、`notification.config` 和 `Modal.config` 方法全局设置 `prefixCls`。

```js
message.config({
prefixCls: 'my-message',
prefixCls: 'ant-message',
});
notification.config({
prefixCls: 'my-notification',
prefixCls: 'ant-notification',
});
Modal.config({
prefixCls: 'my-modal',
rootPrefixCls: 'ant', // 因为 Modal.confirm 里有 button，所以 `prefixCls: 'ant-modal'` 不够用。
});
```

Expand Down