From ebd60df124bf1a6d05f76bcdb15aedeaf8b5b993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 6 Apr 2021 11:38:36 +0800 Subject: [PATCH] fix: Use flex gap of space (#30023) * fix: use flex gap when supported * test: update snapshot * refactor: Use single hooks --- .../hooks/useFlexGapSupport.ts} | 2 +- components/grid/row.tsx | 2 +- components/space/Item.tsx | 22 +++++--- .../__tests__/__snapshots__/demo.test.js.snap | 55 +++++++++++++++++++ components/space/demo/gap-in-line.md | 48 ++++++++++++++++ components/space/index.tsx | 29 +++++++--- 6 files changed, 140 insertions(+), 18 deletions(-) rename components/{grid/hooks/useFlexGapSupport.tsx => _util/hooks/useFlexGapSupport.ts} (76%) create mode 100644 components/space/demo/gap-in-line.md diff --git a/components/grid/hooks/useFlexGapSupport.tsx b/components/_util/hooks/useFlexGapSupport.ts similarity index 76% rename from components/grid/hooks/useFlexGapSupport.tsx rename to components/_util/hooks/useFlexGapSupport.ts index 4d1fe9abbe..b0640f0f07 100644 --- a/components/grid/hooks/useFlexGapSupport.tsx +++ b/components/_util/hooks/useFlexGapSupport.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { detectFlexGapSupported } from '../../_util/styleChecker'; +import { detectFlexGapSupported } from '../styleChecker'; export default () => { const [flexible, setFlexible] = React.useState(false); diff --git a/components/grid/row.tsx b/components/grid/row.tsx index ca3c720a0b..28f22bba4e 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -8,7 +8,7 @@ import ResponsiveObserve, { ScreenMap, responsiveArray, } from '../_util/responsiveObserve'; -import useFlexGapSupport from './hooks/useFlexGapSupport'; +import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; const RowAligns = tuple('top', 'middle', 'bottom', 'stretch'); const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between'); diff --git a/components/space/Item.tsx b/components/space/Item.tsx index bb944efd1e..a74aeeec45 100644 --- a/components/space/Item.tsx +++ b/components/space/Item.tsx @@ -20,19 +20,23 @@ export default function Item({ split, wrap, }: ItemProps) { - const { horizontalSize, verticalSize, latestIndex } = React.useContext(SpaceContext); + const { horizontalSize, verticalSize, latestIndex, supportFlexGap } = React.useContext( + SpaceContext, + ); let style: React.CSSProperties = {}; - if (direction === 'vertical') { - if (index < latestIndex) { - style = { marginBottom: horizontalSize / (split ? 2 : 1) }; + if (!supportFlexGap) { + if (direction === 'vertical') { + if (index < latestIndex) { + style = { marginBottom: horizontalSize / (split ? 2 : 1) }; + } + } else { + style = { + ...(index < latestIndex && { [marginDirection]: horizontalSize / (split ? 2 : 1) }), + ...(wrap && { paddingBottom: verticalSize }), + }; } - } else { - style = { - ...(index < latestIndex && { [marginDirection]: horizontalSize / (split ? 2 : 1) }), - ...(wrap && { paddingBottom: verticalSize }), - }; } if (children === null || children === undefined) { diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap index 7eb5974539..64562232e5 100644 --- a/components/space/__tests__/__snapshots__/demo.test.js.snap +++ b/components/space/__tests__/__snapshots__/demo.test.js.snap @@ -408,6 +408,61 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = ` `; +exports[`renders ./components/space/demo/gap-in-line.md correctly 1`] = ` +Array [ + , +
+
+
+
+
+
+
+
+
+
+
+
+
+
, +] +`; + exports[`renders ./components/space/demo/size.md correctly 1`] = ` Array [
{ + const [singleCol, setSingleCol] = React.useState(false); + + return ( + <> + { + setSingleCol(!singleCol); + }} + /> + +
+
+
+
+ + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/space/index.tsx b/components/space/index.tsx index 0bbb714246..6bebb9fff2 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -4,11 +4,13 @@ import toArray from 'rc-util/lib/Children/toArray'; import { ConfigContext } from '../config-provider'; import { SizeType } from '../config-provider/SizeContext'; import Item from './Item'; +import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; export const SpaceContext = React.createContext({ latestIndex: 0, horizontalSize: 0, verticalSize: 0, + supportFlexGap: false, }); export type SpaceSize = SizeType | number; @@ -51,6 +53,8 @@ const Space: React.FC = props => { ...otherProps } = props; + const supportFlexGap = useFlexGapSupport(); + const [horizontalSize, verticalSize] = React.useMemo( () => ((Array.isArray(size) ? size : [size, size]) as [SpaceSize, SpaceSize]).map(item => @@ -61,10 +65,6 @@ const Space: React.FC = props => { const childNodes = toArray(children, { keepEmpty: true }); - if (childNodes.length === 0) { - return null; - } - const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; const prefixCls = getPrefixCls('space', customizePrefixCls); const cn = classNames( @@ -105,18 +105,33 @@ const Space: React.FC = props => { /* eslint-enable */ }); + const spaceContext = React.useMemo( + () => ({ horizontalSize, verticalSize, latestIndex, supportFlexGap }), + [horizontalSize, verticalSize, latestIndex, supportFlexGap], + ); + + // =========================== Render =========================== + if (childNodes.length === 0) { + return null; + } + + const gapStyle: React.CSSProperties = {}; + if (supportFlexGap) { + gapStyle.columnGap = horizontalSize; + gapStyle.rowGap = verticalSize; + } + return (
- - {nodes} - + {nodes}
); };