From 0b54a18afe3e1550971e12560d6f6da6bc35fbb9 Mon Sep 17 00:00:00 2001 From: Yuki Zhang Date: Tue, 22 Nov 2022 22:52:40 +0800 Subject: [PATCH] fix: context issues for Space.Compact (#38870) * fix: context issues for Space.Compact * test: update snapshots --- components/drawer/index.tsx | 41 +-- components/dropdown/dropdown.tsx | 3 +- components/input-number/index.tsx | 18 +- components/modal/Modal.tsx | 55 +-- .../__snapshots__/demo-extend.test.ts.snap | 322 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 186 ++++++++++ components/space/demo/compact-debug.tsx | 169 ++++++--- 7 files changed, 693 insertions(+), 101 deletions(-) diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 117e201e43..910649dd8e 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -13,6 +13,7 @@ import type { DrawerPanelProps } from './DrawerPanel'; // CSSINJS import useStyle from './style'; +import { NoCompactStyle } from '../space/Compact'; const SizeTypes = tuple('default', 'large'); type sizeType = typeof SizeTypes[number]; @@ -120,25 +121,27 @@ function Drawer(props: DrawerProps) { // =========================== Render =========================== return wrapSSR( - - - - - , + + + + + + + , ); } diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 117c78af78..2607cef590 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -13,6 +13,7 @@ import getPlacements from '../_util/placements'; import { cloneElement } from '../_util/reactNode'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; +import { NoCompactStyle } from '../space/Compact'; import DropdownButton from './dropdown-button'; import useStyle from './style'; @@ -264,7 +265,7 @@ const Dropdown: DropdownInterface = (props) => { ); }} > - {overlayNode} + {overlayNode} ); }; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index f13edfe731..3279d98435 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'; @@ -188,15 +188,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 cb6586ec6b..e0962de51c 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -5,6 +5,7 @@ import type { ButtonProps, LegacyButtonType } from '../button/button'; import type { DirectionType } from '../config-provider'; import { ConfigContext } from '../config-provider'; import { NoFormStyle } from '../form/context'; +import { NoCompactStyle } from '../space/Compact'; import { getTransitionName } from '../_util/motion'; import { canUseDocElement } from '../_util/styleChecker'; import warning from '../_util/warning'; @@ -195,31 +196,35 @@ const Modal: React.FC = (props) => { } return wrapSSR( - - - , + + + + + , ); }; diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index abfaf9ab71..3c3bb7c827 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -10255,6 +10255,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ $ +
+
+
+
+
`; diff --git a/components/space/__tests__/__snapshots__/demo.test.ts.snap b/components/space/__tests__/__snapshots__/demo.test.ts.snap index 9a9507cf14..d75ecb7d99 100644 --- a/components/space/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo.test.ts.snap @@ -2713,6 +2713,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ $ +
+
+
+
+
`; diff --git a/components/space/demo/compact-debug.tsx b/components/space/demo/compact-debug.tsx index f80ab982b4..f95403d0e9 100644 --- a/components/space/demo/compact-debug.tsx +++ b/components/space/demo/compact-debug.tsx @@ -1,6 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import { SettingOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons'; -import { Cascader, Input, Select, Space, Button, Tooltip } from 'antd'; +import { + Cascader, + Input, + Select, + Space, + Button, + Tooltip, + Modal, + Dropdown, + Drawer, + InputNumber, +} from 'antd'; const { Option } = Select; @@ -19,52 +30,112 @@ 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" + /> + + +
+ + + setShowModal(false)}> + + +
+
+ +
+
+ + + + + + + + menu button, + }, + { + key: '2', + label: 'normal menu item', + }, + ], + }} + > + debug Dropdown.Button context + + + + + setShowDrawer(false)} + open={showDrawer} + > + + +
+
+ + + + + + + + + + + ); +}; export default App;