From 3af410ab3fa89aff6f827bff806da0379a6df0d2 Mon Sep 17 00:00:00 2001 From: Yuki Zhang Date: Wed, 23 Nov 2022 22:30:26 +0800 Subject: [PATCH] fix: context issues for Space.Compact (#38887) --- components/drawer/index.tsx | 61 ++-- components/drawer/style/index.tsx | 2 +- components/dropdown/dropdown.tsx | 5 +- components/input-number/index.tsx | 18 +- components/modal/Modal.tsx | 47 +-- components/modal/style/index.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 322 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 186 ++++++++++ .../space/__tests__/space-compact.test.tsx | 68 +++- components/space/demo/compact-debug.md | 173 +++++++--- 10 files changed, 773 insertions(+), 111 deletions(-) diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index d25511bf3d..9936f36a4a 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -9,6 +9,7 @@ import { NoFormStyle } from '../form/context'; import { getTransitionName } from '../_util/motion'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; +import { NoCompactStyle } from '../space/Compact'; const SizeTypes = tuple('default', 'large'); type sizeType = typeof SizeTypes[number]; @@ -163,7 +164,7 @@ function Drawer(props: DrawerProps) { motionDeadline: 500, }; - const panelMotion: RcDrawerProps['motion'] = motionPlacement => ({ + const panelMotion: RcDrawerProps['motion'] = (motionPlacement) => ({ motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`), motionAppear: true, motionEnter: true, @@ -173,35 +174,37 @@ function Drawer(props: DrawerProps) { // =========================== Render =========================== return ( - - { - afterOpenChange?.(isOpen); - afterVisibleChange?.(isOpen); - }} - maskMotion={maskMotion} - motion={panelMotion} - rootStyle={style} - > -
- {renderHeader()} -
- {children} + + + { + afterOpenChange?.(isOpen); + afterVisibleChange?.(isOpen); + }} + maskMotion={maskMotion} + motion={panelMotion} + rootStyle={style} + > +
+ {renderHeader()} +
+ {children} +
+ {renderFooter()}
- {renderFooter()} -
- - + + + ); } diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 55b7015a34..6cccded6d2 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -1,3 +1,3 @@ -// deps-lint-skip: empty, form +// deps-lint-skip: empty, form, space import '../../style/index.less'; import './index.less'; diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index f3f02f7d7d..8dd5b0c504 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -13,6 +13,7 @@ import { cloneElement } from '../_util/reactNode'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; import DropdownButton from './dropdown-button'; +import { NoCompactStyle } from '../space/Compact'; const Placements = tuple( 'topLeft', @@ -83,7 +84,7 @@ interface DropdownInterface extends React.FC { Button: typeof DropdownButton; } -const Dropdown: DropdownInterface = props => { +const Dropdown: DropdownInterface = (props) => { const { getPopupContainer: getContextPopupContainer, getPrefixCls, @@ -244,7 +245,7 @@ const Dropdown: DropdownInterface = props => { ); }} > - {overlayNode} + {overlayNode} ); }; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 82fac23602..d7d5b64899 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -11,7 +11,7 @@ import DisabledContext from '../config-provider/DisabledContext'; import type { SizeType } from '../config-provider/SizeContext'; import SizeContext from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStyle } from '../form/context'; -import { useCompactItemContext } from '../space/Compact'; +import { NoCompactStyle, useCompactItemContext } from '../space/Compact'; import { cloneElement } from '../_util/reactNode'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; @@ -180,15 +180,19 @@ const InputNumber = React.forwardRef((props,
{addonBeforeNode && ( - - {addonBeforeNode} - + + + {addonBeforeNode} + + )} {cloneElement(element, { style: null, disabled: mergedDisabled })} {addonAfterNode && ( - - {addonAfterNode} - + + + {addonAfterNode} + + )}
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 8ad9308d89..781ce17fdc 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -10,6 +10,7 @@ import type { DirectionType } from '../config-provider'; import { ConfigContext } from '../config-provider'; import { NoFormStyle } from '../form/context'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import { NoCompactStyle } from '../space/Compact'; import { getTransitionName } from '../_util/motion'; import { canUseDocElement } from '../_util/styleChecker'; import warning from '../_util/warning'; @@ -148,7 +149,7 @@ export interface ModalLocale { justOkText: string; } -const Modal: React.FC = props => { +const Modal: React.FC = (props) => { const { getPopupContainer: getContextPopupContainer, getPrefixCls, @@ -190,7 +191,7 @@ const Modal: React.FC = props => { const defaultFooter = ( - {contextLocale => { + {(contextLocale) => { const { okText, okType = 'primary', cancelText, confirmLoading = false } = props; return ( @@ -223,25 +224,29 @@ const Modal: React.FC = props => { [`${prefixCls}-wrap-rtl`]: direction === 'rtl', }); return ( - - - + + + + + ); }; diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 40150302b3..5c849c03a4 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -1,6 +1,6 @@ import '../../style/index.less'; import './index.less'; -// deps-lint-skip: form +// deps-lint-skip: form, space // style dependencies import '../../button/style'; diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 6512d4ecfa..a072fc1ef7 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -10227,6 +10227,7 @@ exports[`renders ./components/space/demo/compact-debug.md extend context correct
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ $ +
+
+
+
+
`; diff --git a/components/space/__tests__/__snapshots__/demo.test.ts.snap b/components/space/__tests__/__snapshots__/demo.test.ts.snap index 1438529776..55708922b5 100644 --- a/components/space/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo.test.ts.snap @@ -2711,6 +2711,7 @@ exports[`renders ./components/space/demo/compact-debug.md correctly 1`] = `
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ $ +
+
+
+
+
`; diff --git a/components/space/__tests__/space-compact.test.tsx b/components/space/__tests__/space-compact.test.tsx index 3287b0ad13..68b188c3db 100644 --- a/components/space/__tests__/space-compact.test.tsx +++ b/components/space/__tests__/space-compact.test.tsx @@ -12,6 +12,9 @@ import DatePicker from '../../date-picker'; import Select from '../../select'; import TimePicker from '../../time-picker'; import TreeSelect from '../../tree-select'; +import Modal from '../../modal'; +import Dropdown from '../../dropdown'; +import Drawer from '../../drawer'; describe('Space.Compact', () => { mountTest(Space.Compact); @@ -131,7 +134,7 @@ describe('Space.Compact', () => { {React.createElement(component as any)}, ); expect(container.querySelectorAll(`.${targetCls}`).length).toBe(1); - ['compact-item', 'compact-first-item', 'compact-last-item'].forEach(suffix => { + ['compact-item', 'compact-first-item', 'compact-last-item'].forEach((suffix) => { expect( container .querySelector(`.${targetCls}`) @@ -182,4 +185,67 @@ describe('Space.Compact', () => { ?.classList.contains('ant-btn-compact-vertical-last-item'), ).toBe(true); }); + + it('context for Modal', () => { + render( + + + + + + , + ); + expect( + document.body + .querySelectorAll('.ant-modal')[0] + .querySelector('.ant-btn') + ?.classList.contains('ant-btn-compact-item'), + ).toBe(false); + expect( + document.body + .querySelectorAll('.ant-modal')[0] + .querySelector('.ant-input') + ?.classList.contains('ant-input-compact-item'), + ).toBe(false); + }); + it('context for Dropdown', () => { + render( + + menu button, + }, + ], + }} + > + debug Dropdown.Button context + + , + ); + expect( + document.body + .querySelector('.ant-dropdown') + ?.querySelector('.ant-btn') + ?.classList.contains('ant-btn-compact-item'), + ).toBe(false); + }); + it('context for Drawer', () => { + render( + + + + + , + ); + expect( + document.body + .querySelector('.ant-drawer') + ?.querySelector('.ant-btn') + ?.classList.contains('ant-btn-compact-item'), + ).toBe(false); + }); }); diff --git a/components/space/demo/compact-debug.md b/components/space/demo/compact-debug.md index 9f2e1099e7..0f5c3a6829 100644 --- a/components/space/demo/compact-debug.md +++ b/components/space/demo/compact-debug.md @@ -17,8 +17,19 @@ Input addon debug. ```tsx import { SettingOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons'; -import { Cascader, Input, Select, Space, Button, Tooltip } from 'antd'; -import React from 'react'; +import { + Cascader, + Input, + Select, + Space, + Button, + Tooltip, + Modal, + Dropdown, + Drawer, + InputNumber, +} from 'antd'; +import React, { useState } from 'react'; const { Option } = Select; @@ -37,53 +48,117 @@ const selectAfter = ( ); -const App: React.FC = () => ( - - - - - - - - - - - - - - - - - } /> - - - - - - - - } - defaultValue="mysite" - /> - - - -); +const App: React.FC = () => { + const [showModal, setShowModal] = useState(false); + const [showDrawer, setShowDrawer] = useState(false); + return ( + + + + + + + + + + + + + + + + + } /> + + + + + + + + } + defaultValue="mysite" + /> + + +
+ + + {showModal && ( + setShowModal(false)}> + + +
+
+ +
+
+ + + + + + )} + + + menu button, + }, + { + key: '2', + label: 'normal menu item', + }, + ], + }} + > + debug Dropdown.Button context + + + + + {showDrawer && ( + setShowDrawer(false)} + open={showDrawer} + > + + +
+
+ + + + + + )} + + + + + + ); +}; export default App; ```