feat: 支持 antd V5

移除废弃组件 api, 适配新版 tooltip 样式 BREAKING CHANGE: antd v5, 组件层级样式升级
antvis · Nov 14, 2023 · d6f11cb · d6f11cb
1 parent dbba47c
commit d6f11cb
Show file tree

Hide file tree

Showing 25 changed files with 173 additions and 137 deletions.
diff --git a/packages/s2-core/src/ui/tooltip/index.less b/packages/s2-core/src/ui/tooltip/index.less
@@ -14,7 +14,7 @@
       ~'@{css-var-prefix}-tooltip-background',
       rgba(255, 255, 255, 0.95)
     );
-    border-radius: 2px;
+    border-radius: 4px;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
     font-size: 12px;
     font-family: Roboto, 'PingFang SC', 'Chinese Quote', BlinkMacSystemFont,

diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-one-measure-spec.tsx
@@ -8,7 +8,9 @@ import {
   type S2MountContainer,
   type S2Options,
 } from '@antv/s2';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import React from 'react';
 import {
   data1,
@@ -93,6 +95,7 @@ const getDataCfg = (index: number) =>
       values: ['price'],
       valueInCols: true,
     },
+
     meta: [
       {
         field: 'price',
@@ -105,6 +108,7 @@ const getDataCfg = (index: number) =>
         formatter: (v: string) => `${v}个`,
       },
     ],
+
     data: getData(index),
     totalData: getData(index, true),
     sortParams: [],

diff --git a/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx b/packages/s2-react/__tests__/spreadsheet/data-accuracy-two-measures-spec.tsx
@@ -8,7 +8,9 @@ import {
   type S2MountContainer,
   type S2Options,
 } from '@antv/s2';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import React from 'react';
 import {
   data10,
@@ -83,6 +85,7 @@ const getDataCfg = (index: number) =>
       values: ['price', 'account'],
       valueInCols: true,
     },
+
     meta: [
       {
         field: 'price',
@@ -95,6 +98,7 @@ const getDataCfg = (index: number) =>
         formatter: (v: number) => auto(v),
       },
     ],
+
     data: getData(index),
     totalData: getData(index, true),
     sortParams: [],

diff --git a/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/filter-sheet-spec.tsx
@@ -18,7 +18,7 @@ import {
   type SheetComponentsProps,
 } from '@/components';
 
-import 'antd/dist/antd.min.css';
+// import 'antd/dist/antd.min.css';
 
 const data = getMockData('../data/tableau-supermarket.csv');
 

diff --git a/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx b/packages/s2-react/__tests__/spreadsheet/multiple-values-cell-spec.tsx
@@ -7,7 +7,9 @@ import {
   type S2Options,
 } from '@antv/s2';
 import { Radio, Switch } from 'antd';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import { cloneDeep, merge } from 'lodash';
 import React from 'react';
 import {

diff --git a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx
@@ -1,6 +1,8 @@
 import { SpreadSheet, setLang, type LangType, type Pagination } from '@antv/s2';
 import { waitFor } from '@testing-library/react';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import React from 'react';
 import type { Root } from 'react-dom/client';
 import { SheetComponent, type SheetComponentsProps } from '../../src';

diff --git a/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pressure-test-spec.tsx
@@ -6,7 +6,9 @@ import {
   type S2MountContainer,
   type S2Options,
 } from '@antv/s2';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import React from 'react';
 import { renderComponent } from '../util/helpers';
 import { type SheetComponentsProps, SheetComponent } from '../../src';

diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx
@@ -13,7 +13,9 @@ import {
 } from '@antv/s2';
 import { waitFor } from '@testing-library/react';
 import { Space, Switch, message } from 'antd';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import { find } from 'lodash';
 import React, { useEffect } from 'react';
 import { act } from 'react-dom/test-utils';

diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import {
   CellType,
   ResizeType,
@@ -255,21 +256,19 @@ export const s2Options: SheetComponentOptions = {
       hiddenColumns: true,
       menus: [
         {
-          key: 'trend-2',
-          label: '趋势',
-          icon: 'Trend',
+          key: 'a-1',
+          label: '操作-1',
+          icon: 'Plus',
           onClick: (cell) => {
-            // eslint-disable-next-line no-console
-            console.log('趋势图 icon 点击: 2222', cell);
+            console.log('操作-1', cell);
           },
           children: [
             {
-              key: 'trend-3',
-              label: '趋势-3',
-              icon: 'Trend',
+              key: 'a-2',
+              label: '操作-2',
+              icon: 'Minus',
               onClick: (cell) => {
-                // eslint-disable-next-line no-console
-                console.log('趋势图 icon 点击:3333 ', cell);
+                console.log('操作-2', cell);
               },
             },
           ],
@@ -280,7 +279,6 @@ export const s2Options: SheetComponentOptions = {
           icon: 'Trend',
           visible: (cell) => cell.cellType === CellType.DATA_CELL,
           onClick: (cell) => {
-            // eslint-disable-next-line no-console
             console.log('趋势图 icon 点击: ', cell);
           },
         },

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -40,7 +40,9 @@ import {
   version as AntdVersion,
   Divider,
 } from 'antd';
-import 'antd/dist/antd.min.css';
+
+// import 'antd/dist/antd.min.css';
+
 import { debounce, isEmpty, isBoolean } from 'lodash';
 import React from 'react';
 import { ChromePicker } from 'react-color';

diff --git a/packages/s2-react/src/components/advanced-sort/index.less b/packages/s2-react/src/components/advanced-sort/index.less
@@ -21,24 +21,26 @@
     background-color: var(~'@{css-var-prefix}-container-background', #fff);
   }
   .@{advanced-sort-cls-prefix}-sider-layout.ant-layout-sider {
-    border-right: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9);
+    border-right: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0);
     background: var(~'@{css-var-prefix}-container-background', #fff);
   }
 
   .@{advanced-sort-cls-prefix}-sider-layout {
     .@{advanced-sort-cls-prefix}-title {
       font-size: 12px;
-      padding: 8px 16px;
-      border-bottom: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9);
+      padding: 8px 16px 8px 0;
+      border-bottom: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0);
     }
     .@{advanced-sort-cls-prefix}-dimension-item {
       height: 32px;
-      padding: 8px 5px;
+      padding: 8px 6px 8px 0;
       cursor: pointer;
       align-items: center;
       color: var(~'@{css-var-prefix}-font-65', rgba(0, 0, 0, 0.65));
       font-size: 12px;
-      margin-left: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -48,7 +50,7 @@
     .@{advanced-sort-cls-prefix}-title {
       font-size: 12px;
       padding: 8px 16px;
-      border-bottom: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9);
+      border-bottom: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0);
     }
 
     .@{advanced-sort-cls-prefix}-custom-form.ant-form {
@@ -105,12 +107,16 @@
       font-size: 12px;
       text-align: center;
       background-color: var(~'@{css-var-prefix}-block-background', #fafafa);
-      border: 1px solid var(~'@{css-var-prefix}-border', #d9d9d9);
-      border-radius: 2px 0 0 2px;
+      border: 1px solid var(~'@{css-var-prefix}-border', #f0f0f0);
+      border-radius: 4px 0 0 4px;
       height: 24px;
       display: inline-block;
       line-height: 21px;
       margin-left: 8px;
+
+      & + .ant-select .ant-select-selector {
+        border-radius: 0 4px 4px 0;
+      }
     }
   }
 

diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -20,7 +20,6 @@ import {
   uniq,
 } from 'lodash';
 import React, { useEffect, useState } from 'react';
-
 import {
   ADVANCED_SORT_PRE_CLS,
   getSortRuleOptions,
@@ -297,6 +296,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
           <div
             className={`${ADVANCED_SORT_PRE_CLS}-dimension-item`}
             key={item.field}
+            title={item.name}
             onClick={() => {
               handleDimension(item);
             }}

diff --git a/packages/s2-react/src/components/config-provider/index.tsx b/packages/s2-react/src/components/config-provider/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { ConfigProvider as AntdConfigProvider } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
+import enUS from 'antd/es/locale/en_US';
+import { getLang } from '@antv/s2';
+
+export const ConfigProvider: React.FC<{ children: React.ReactNode }> = (
+  props,
+) => {
+  const { children } = props;
+  const locale = getLang() === 'zh_CN' ? zhCN : enUS;
+
+  return <AntdConfigProvider locale={locale}>{children}</AntdConfigProvider>;
+};
diff --git a/packages/s2-react/src/components/drill-down/index.tsx b/packages/s2-react/src/components/drill-down/index.tsx
@@ -1,12 +1,5 @@
 import React, { type ReactNode, useEffect, useState } from 'react';
-import {
-  Button,
-  ConfigProvider,
-  Empty,
-  Input,
-  Menu,
-  type MenuProps,
-} from 'antd';
+import { Button, Empty, Input, Menu, type MenuProps } from 'antd';
 import cx from 'classnames';
 import { isEmpty } from 'lodash';
 import type { BaseDataSet, BaseDrillDownComponentProps } from '@antv/s2-shared';
@@ -18,6 +11,7 @@ import {
   SearchIcon,
   TextIcon,
 } from '../icons/index';
+import { ConfigProvider } from '../config-provider';
 
 import '@antv/s2-shared/src/styles/drill-down.less';
 
@@ -109,7 +103,7 @@ export const DrillDown: React.FC<DrillDownProps> = ({
   });
 
   return (
-    <ConfigProvider locale={{ locale: 'zh_CN' }}>
+    <ConfigProvider>
       <div className={cx(DRILL_DOWN_PRE_CLASS, className)} {...restProps}>
         <header className={`${DRILL_DOWN_PRE_CLASS}-header`}>
           <div>{titleText}</div>

diff --git a/packages/s2-react/src/components/export/index.tsx b/packages/s2-react/src/components/export/index.tsx
@@ -9,7 +9,7 @@ import {
   copyData as getSheetData,
   i18n,
 } from '@antv/s2';
-import { Dropdown, message, type DropDownProps } from 'antd';
+import { Dropdown, message, type DropDownProps, Button } from 'antd';
 import cx from 'classnames';
 import React from 'react';
 import { DotIcon } from '../icons';
@@ -55,8 +55,7 @@ export const Export: React.FC<ExportProps> = React.memo((props) => {
 
   const PRE_CLASS = `${S2_PREFIX_CLS}-export`;
 
-  const isAsyncRequest =
-    true || sheet?.dataCfg?.data?.length >= AsyncRequestThreshold;
+  const isAsyncRequest = sheet?.dataCfg?.data?.length >= AsyncRequestThreshold;
 
   const copyData = async (isFormat: boolean) => {
     const data = isAsyncRequest
@@ -136,13 +135,7 @@ export const Export: React.FC<ExportProps> = React.memo((props) => {
       {...restProps}
       {...dropdown}
     >
-      <a
-        className="ant-dropdown-link"
-        key="export"
-        onClick={(e) => e.preventDefault()}
-      >
-        {icon || <DotIcon />}
-      </a>
+      <Button type="text">{icon || <DotIcon />}</Button>
     </Dropdown>
   );
 });

diff --git a/packages/s2-react/src/components/sheets/index.tsx b/packages/s2-react/src/components/sheets/index.tsx
@@ -1,10 +1,7 @@
 import type { SpreadSheet } from '@antv/s2';
 import React from 'react';
-import zhCN from 'antd/es/locale/zh_CN';
-import enUS from 'antd/es/locale/en_US';
-import { getLang } from '@antv/s2';
-import { ConfigProvider } from 'antd';
 import { SpreadSheetContext } from '../../context/SpreadSheetContext';
+import { ConfigProvider } from '../config-provider';
 import { EditableSheet } from './editable-sheet';
 import { GridAnalysisSheet } from './grid-analysis-sheet';
 import type { SheetComponentsProps } from './interface';
@@ -51,11 +48,9 @@ const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
       }
     }, [sheetType, sheetProps]);
 
-    const locale = getLang() === 'zh_CN' ? zhCN : enUS;
-
     return (
       <SpreadSheetContext.Provider value={s2Instance!}>
-        <ConfigProvider locale={locale}>{CurrentSheet}</ConfigProvider>
+        <ConfigProvider>{CurrentSheet}</ConfigProvider>
       </SpreadSheetContext.Provider>
     );
   },

diff --git a/packages/s2-react/src/components/switcher/content/index.less b/packages/s2-react/src/components/switcher/content/index.less
@@ -25,19 +25,20 @@
   }
 
   &-three-dimensions {
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(2, 160px);
+    grid-template-columns: repeat(2, minmax(180px, 1fr));
   }
 
   &-one-dimension {
-    grid-template-rows: 1fr;
+    grid-template-rows: 160px;
     grid-template-columns: 1fr;
   }
 
   &-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 0 10px;
 
     &-reset-button {
       &.ant-btn {