From df9b20209c24a4142410620bbf4e82ddb784b290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=96=87=E9=89=B4?= Date: Fri, 12 Oct 2018 14:04:26 +0800 Subject: [PATCH] fix: change modal's default prefixCls to ant-modal and ant-modal-confirm (#12548) --- .../locale-provider/__tests__/index.test.js | 2 +- components/modal/__tests__/confirm.test.js | 32 ++++++++++++------- components/modal/confirm.tsx | 20 ++++++------ components/modal/style/confirm.less | 2 +- 4 files changed, 33 insertions(+), 23 deletions(-) diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js index 8485b6d3a8..88653392df 100644 --- a/components/locale-provider/__tests__/index.test.js +++ b/components/locale-provider/__tests__/index.test.js @@ -125,7 +125,7 @@ describe('Locale Provider', () => { ); - const currentConfirmNode = document.querySelectorAll('.ant-confirm')[document.querySelectorAll('.ant-confirm').length - 1]; + const currentConfirmNode = document.querySelectorAll('.ant-modal-confirm')[document.querySelectorAll('.ant-modal-confirm').length - 1]; let cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML; let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML; if (locale.locale === 'zh-cn') { diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js index ec7b7a68a1..b53144e150 100644 --- a/components/modal/__tests__/confirm.test.js +++ b/components/modal/__tests__/confirm.test.js @@ -71,9 +71,9 @@ describe('Modal.confirm triggers callbacks correctly', () => { jest.useFakeTimers(); open(); $$('.ant-btn')[0].click(); - expect($$('.ant-confirm')).toHaveLength(1); + expect($$('.ant-modal-confirm')).toHaveLength(1); jest.runAllTimers(); - expect($$('.ant-confirm')).toHaveLength(0); + expect($$('.ant-modal-confirm')).toHaveLength(0); jest.useRealTimers(); }); } @@ -98,10 +98,10 @@ describe('Modal.confirm triggers callbacks correctly', () => { title: 'title', content: 'content', }); - expect($$(`.ant-confirm-${type}`)).toHaveLength(1); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); $$('.ant-btn')[0].click(); jest.runAllTimers(); - expect($$(`.ant-confirm-${type}`)).toHaveLength(0); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0); }); jest.useRealTimers(); }); @@ -113,16 +113,16 @@ describe('Modal.confirm triggers callbacks correctly', () => { title: 'title', content: 'content', }); - expect($$(`.ant-confirm-${type}`)).toHaveLength(1); - expect($$('.ant-confirm-title')[0].innerHTML).toBe('title'); - expect($$('.ant-confirm-content')[0].innerHTML).toBe('content'); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); + expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title'); + expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content'); instance.update({ title: 'new title', content: 'new content', }); - expect($$(`.ant-confirm-${type}`)).toHaveLength(1); - expect($$('.ant-confirm-title')[0].innerHTML).toBe('new title'); - expect($$('.ant-confirm-content')[0].innerHTML).toBe('new content'); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); + expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title'); + expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content'); instance.destroy(); jest.runAllTimers(); }); @@ -136,11 +136,19 @@ describe('Modal.confirm triggers callbacks correctly', () => { title: 'title', content: 'content', }); - expect($$(`.ant-confirm-${type}`)).toHaveLength(1); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); instance.destroy(); jest.runAllTimers(); - expect($$(`.ant-confirm-${type}`)).toHaveLength(0); + expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0); }); jest.useRealTimers(); }); + + it('prefixCls', () => { + open({ prefixCls: 'custom-modal' }); + expect($$('.custom-modal-mask')).toHaveLength(1); + expect($$('.custom-modal-wrap')).toHaveLength(1); + expect($$('.custom-modal-confirm')).toHaveLength(1); + expect($$('.custom-modal-confirm-body-wrapper')).toHaveLength(1); + }); }); diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index f457cde1ac..8fab01262b 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -18,7 +18,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer, okButtonProps, cancelButtonProps } = props; const iconType = props.iconType || 'question-circle'; const okType = props.okType || 'primary'; - const prefixCls = props.prefixCls || 'ant-confirm'; + const prefixCls = props.prefixCls || 'ant-modal'; + const contentPrefixCls = `${prefixCls}-confirm`; // 默认为 true，保持向下兼容 const okCancel = ('okCancel' in props) ? props.okCancel! : true; const width = props.width || 416; @@ -32,8 +33,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok'; const classString = classNames( - prefixCls, - `${prefixCls}-${props.type}`, + contentPrefixCls, + `${contentPrefixCls}-${props.type}`, props.className, ); @@ -45,8 +46,9 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { return ( { centered={centered} getContainer={getContainer} > -
-
+
+
- {props.title} -
{props.content}
+ {props.title} +
{props.content}
-
+
{cancelButton} {okText} diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index bec6f8f0e7..68ebb7c0e5 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -1,6 +1,6 @@ @import "../../style/mixins/index"; -@confirm-prefix-cls: ~"@{ant-prefix}-confirm"; +@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm"; .@{confirm-prefix-cls} { .@{ant-prefix}-modal-header {