feat: Modal.config rootPrefixCls

ant-design · Jul 14, 2020 · 1fcd68c · 1fcd68c
1 parent 3da8849
commit 1fcd68c
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 28 deletions.
diff --git a/components/modal/ActionButton.tsx b/components/modal/ActionButton.tsx
@@ -7,6 +7,7 @@ export interface ActionButtonProps {
   actionFn?: (...args: any[]) => any | PromiseLike<any>;
   closeModal: Function;
   autoFocus?: boolean;
+  prefixCls?: string;
   buttonProps?: ButtonProps;
 }
 
@@ -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}
     >

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -8,6 +8,7 @@ interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
   close: (...args: any[]) => void;
   autoFocusButton?: null | 'ok' | 'cancel';
+  rootPrefixCls?: string;
 }
 
 const ConfirmDialog = (props: ConfirmDialogProps) => {
@@ -29,6 +30,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     cancelButtonProps,
     direction,
     prefixCls,
+    rootPrefixCls,
   } = props;
 
   devWarning(
@@ -64,6 +66,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
       closeModal={close}
       autoFocus={autoFocusButton === 'cancel'}
       buttonProps={cancelButtonProps}
+      prefixCls={`${rootPrefixCls}-btn`}
     >
       {cancelText}
     </ActionButton>
@@ -107,6 +110,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
             closeModal={close}
             autoFocus={autoFocusButton === 'ok'}
             buttonProps={okButtonProps}
+            prefixCls={`${rootPrefixCls}-btn`}
           >
             {okText}
           </ActionButton>

diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
@@ -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();
   });

diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
@@ -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 = (
@@ -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}
         />,
@@ -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;
   }
 }
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -129,7 +129,7 @@ Like `message.config()`, `Modal.config()` could set `Modal.confirm` props global
 
 ```jsx
 Modal.config({
-  prefixCls: 'my-modal',
+  rootPrefixCls: 'ant',
 });
 ```
 

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -133,7 +133,7 @@ return <div>{contextHolder}</div>;
 
 ```jsx
 Modal.config({
-  prefixCls: 'my-modal',
+  rootPrefixCls: 'ant',
 });
 ```
 

diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
@@ -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',
 });
 ```
 

diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
@@ -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'` 不够用。
 });
 ```