From 4ed25b9ceb200cbd37ab72121ddc840833f780ca Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Thu, 16 Nov 2023 15:57:42 +0800 Subject: [PATCH] feat(space): support lower browser --- package.json | 3 +++ src/_common | 2 +- src/space/Space.tsx | 26 +++++++++++++++++------ src/space/__tests__/space.test.tsx | 2 +- src/space/__tests__/vitest-space.test.jsx | 14 ++++++++---- src/space/space.en-US.md | 4 ++-- 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index f517dc50c1..5c78e4bcd6 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "typings": "es/index.d.ts", "unpkg": "dist/tdesign.min.js", "jsdelivr": "dist/tdesign.min.js", + "engines": { + "node": ">=18" + }, "files": [ "esm", "es", diff --git a/src/_common b/src/_common index 16229778d5..8d6eae0bc9 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 16229778d5c97e66d81b4107171a2af00a7b262d +Subproject commit 8d6eae0bc94f8d0baf823b8c7178b563106877b8 diff --git a/src/space/Space.tsx b/src/space/Space.tsx index ad8e491dbd..105cf3ac7c 100644 --- a/src/space/Space.tsx +++ b/src/space/Space.tsx @@ -1,16 +1,20 @@ -import React, { forwardRef, useMemo } from 'react'; +import React, { CSSProperties, forwardRef, useMemo } from 'react'; import classNames from 'classnames'; import { isFragment } from 'react-is'; import useConfig from '../hooks/useConfig'; import { TdSpaceProps } from './type'; import { StyledProps } from '../common'; import { spaceDefaultProps } from './defaultProps'; +import { getFlexGapPolyFill } from '../_common/js/utils/helper'; // export for test export const SizeMap = { small: '8px', medium: '16px', large: '24px' }; +const defaultNeedPolyfill = getFlexGapPolyFill(); export interface SpaceProps extends TdSpaceProps, StyledProps { children?: React.ReactNode; + /** 强制使用 margin 间距代替 gap 属性间距（某些浏览器不支持 gap 属性） */ + forceFlexGapPolyfill?: boolean; } const toArray = (children: React.ReactNode): React.ReactElement[] => { @@ -37,6 +41,8 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref) => const { className, style, align, direction, size, breakLine, separator } = props; const { classPrefix } = useConfig(); + const needPolyfill = Boolean(props.forceFlexGapPolyfill || defaultNeedPolyfill); + const renderStyle = useMemo(() => { let renderGap = ''; if (Array.isArray(size)) { @@ -53,12 +59,16 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref) => renderGap = `${size}px`; } - return { - gap: renderGap, - ...(breakLine ? { flexWrap: 'wrap' } : {}), - ...style, - }; - }, [style, size, breakLine]) as React.CSSProperties; + const tStyle: CSSProperties = { ...style }; + if (needPolyfill) { + const [columnGap, rowGap] = renderGap.split(' '); + tStyle['--td-space-column-gap'] = columnGap; + tStyle['--td-space-row-gap'] = rowGap || columnGap; + } else { + tStyle.gap = renderGap; + } + return tStyle; + }, [style, size, needPolyfill]) as React.CSSProperties; function renderChildren() { const children = toArray(props.children); @@ -82,6 +92,8 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref) => className={classNames(`${classPrefix}-space`, className, { [`${classPrefix}-space-align-${align}`]: align, [`${classPrefix}-space-${direction}`]: direction, + [`${classPrefix}-space--break-line`]: breakLine, + [`${classPrefix}-space--polyfill`]: needPolyfill, })} > {renderChildren()} diff --git a/src/space/__tests__/space.test.tsx b/src/space/__tests__/space.test.tsx index d07ad7cc3f..4ceb65a38e 100644 --- a/src/space/__tests__/space.test.tsx +++ b/src/space/__tests__/space.test.tsx @@ -49,7 +49,7 @@ describe('Space 组件测试', () => {
, ); - expect((container.firstChild as HTMLDivElement).style.flexWrap).toBe('wrap'); + expect((container.firstChild as HTMLDivElement).classList.contains('t-space--break-line')).toBeTruthy(); }); test('separator', async () => { diff --git a/src/space/__tests__/vitest-space.test.jsx b/src/space/__tests__/vitest-space.test.jsx index 426b867f5c..eed437f43c 100644 --- a/src/space/__tests__/vitest-space.test.jsx +++ b/src/space/__tests__/vitest-space.test.jsx @@ -16,10 +16,16 @@ describe('Space Component', () => { }); }); - it(`props.breakLine is equal to true`, () => { - const { container } = getSpaceDefaultMount(Space, { breakLine: true }); - const domWrapper = container.firstChild; - expect(domWrapper.style.flexWrap).toBe('wrap'); + it('props.breakLine works fine', () => { + // breakLine default value is false + const { container: container1 } = getSpaceDefaultMount(Space); + expect(container1.querySelector(`.${'t-space--break-line'}`)).toBeFalsy(); + // breakLine = true + const { container: container2 } = getSpaceDefaultMount(Space, { breakLine: true }); + expect(container2.firstChild).toHaveClass('t-space--break-line'); + // breakLine = false + const { container: container3 } = getSpaceDefaultMount(Space, { breakLine: false }); + expect(container3.querySelector(`.${'t-space--break-line'}`)).toBeFalsy(); }); ['vertical', 'horizontal'].forEach((item) => { diff --git a/src/space/space.en-US.md b/src/space/space.en-US.md index 3968fa95f2..9d1b5222d4 100644 --- a/src/space/space.en-US.md +++ b/src/space/space.en-US.md @@ -7,8 +7,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N -align | String | - | alignment。options：start/end/center/baseline | N +align | String | - | alignment。options: start/end/center/baseline | N breakLine | Boolean | false | Whether to wrap, valid only in horizontal | N -direction | String | horizontal | Spacing direction。options：vertical/horizontal | N +direction | String | horizontal | Spacing direction。options: vertical/horizontal | N separator | TNode | - | separator。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N size | String / Number / Array | 'medium' | Spacing。Typescript：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/space/type.ts) | N