diff --git a/src/_common b/src/_common index b62cac6f5d..cf6a31cff9 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit b62cac6f5d75b1af5b527a2849bedee42e906d6d +Subproject commit cf6a31cff985d5fc242e7970910e3ca6220754dc diff --git a/src/space/Space.tsx b/src/space/Space.tsx index ad8e491dbd..0c04ffa325 100644 --- a/src/space/Space.tsx +++ b/src/space/Space.tsx @@ -5,12 +5,15 @@ 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[] => { @@ -34,9 +37,11 @@ const toArray = (children: React.ReactNode): React.ReactElement[] => { }; const Space = forwardRef((props: SpaceProps, ref: React.Ref) => { - const { className, style, align, direction, size, breakLine, separator } = props; + const { className, style, align, direction = 'horizontal', size, breakLine, separator } = props; const { classPrefix } = useConfig(); + const needPolyfill = props.forceFlexGapPolyfill || defaultNeedPolyfill; + const renderStyle = useMemo(() => { let renderGap = ''; if (Array.isArray(size)) { @@ -53,12 +58,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 fullStyle: { [key: string]: string | number } = { ...style }; + if (needPolyfill) { + const [columnGap, rowGap] = renderGap.split(' '); + fullStyle['--column-gap'] = columnGap; + fullStyle['--row-gap'] = rowGap || columnGap; + } else { + fullStyle.gap = renderGap; + } + return fullStyle; + }, [style, size, needPolyfill]) as React.CSSProperties; function renderChildren() { const children = toArray(props.children); @@ -82,6 +91,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__/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 diff --git a/src/table/FilterController.tsx b/src/table/FilterController.tsx index c452ddc6b3..76bc8f02bd 100644 --- a/src/table/FilterController.tsx +++ b/src/table/FilterController.tsx @@ -73,6 +73,9 @@ export default function TableFilterController(props: TableFilterControllerProps) ...(column.filter?.props || {}), onChange: (val: any) => { props.onInnerFilterChange?.(val, column); + if (column.filter?.confirmEvents?.includes('onChange')) { + setFilterPopupVisible(false); + } }, }; if (column.colKey && innerFilterValue && column.colKey in innerFilterValue) { @@ -81,6 +84,7 @@ export default function TableFilterController(props: TableFilterControllerProps) // 允许自定义触发确认搜索的事件 if (column.filter?.confirmEvents) { column.filter.confirmEvents.forEach((event) => { + if (event === 'onChange') return; filterComponentProps[event] = () => { setFilterPopupVisible(false); props.onConfirm?.(column); diff --git a/src/table/_example/filter-controlled.jsx b/src/table/_example/filter-controlled.jsx index 843710b0cf..fddb312641 100644 --- a/src/table/_example/filter-controlled.jsx +++ b/src/table/_example/filter-controlled.jsx @@ -22,6 +22,8 @@ const columns = [ { label: '已过期', value: 1 }, { label: '审批失败', value: 2 }, ], + // confirm to search and hide filter popup + confirmEvents: ['onChange'], // 透传浮层全部属性,示例代码 // popupProps: { // placement: 'right',