feat(space): compatibility

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<HTMLDivElement>) => {
-  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<HTMLDivElement>) =>
       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<HTMLDivElement>) =>
       className={classNames(`${classPrefix}-space`, className, {
         [`${classPrefix}-space-align-${align}`]: align,
         [`${classPrefix}-space-${direction}`]: direction,
+        [`${classPrefix}-space--break-line`]: breakLine,
+        [`${classPrefix}-space--polyfill`]: needPolyfill,
       })}
     >
       {renderChildren()}

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) => {

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

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);

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',