feat: s2-react 移除 antd 的依赖, 相关分析组件迁移到 s2-react-components

中只保留 drill-down, pagination, tooltip 三个基础能力组件 BREAKING CHANGE: 移除 header props 参数 (不再内置行列切换, 导出, 高级排序), 移除 antd ConfigProvider 包裹
antvis · Sep 4, 2024 · 11c08ef · 11c08ef
1 parent 7f13ab1
commit 11c08ef
Show file tree

Hide file tree

Showing 45 changed files with 17,518 additions and 12,674 deletions.
diff --git a/packages/s2-react-components/package.json b/packages/s2-react-components/package.json
@@ -62,12 +62,11 @@
     "tsc": "tsc --noEmit",
     "watch": "rimraf esm && pnpm build:esm -w"
   },
-  "release": {
-    "skip": true
-  },
   "dependencies": {
+    "ahooks": "^3.8.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
+    "react-beautiful-dnd": "^13.1.1",
     "tinycolor2": "^1.6.0",
     "tinygradient": "^1.1.5"
   },

diff --git a/...s2-react/src/components/header/index.less → ...t-components/playground/Header/index.less b/...s2-react/src/components/header/index.less → ...t-components/playground/Header/index.less
@@ -1,6 +1,6 @@
 @import '@antv/s2-shared/src/styles/variables.less';
 
-.@{header-cls-prefix} {
+.sheet-header {
   padding: 0;
   margin: 0;
   margin-bottom: 16px;

diff --git a/packages/s2-react-components/playground/Header/index.tsx b/packages/s2-react-components/playground/Header/index.tsx
@@ -0,0 +1,103 @@
+/* eslint-disable no-console */
+import { ExportOutlined } from '@ant-design/icons';
+import { getLang, type SpreadSheet } from '@antv/s2';
+import reactPkg from '@antv/s2-react/package.json';
+import corePkg from '@antv/s2/package.json';
+import { version as AntdVersion, App, Button, Space, Tag } from 'antd';
+import cx from 'classnames';
+import React from 'react';
+import pkg from '../../package.json';
+import { AdvancedSort, Export, Switcher, type SwitcherProps } from '../../src';
+import './index.less';
+
+export interface HeaderProps {
+  sheetInstance: SpreadSheet;
+}
+
+const switcherFields: SwitcherProps = {
+  rows: {
+    items: [{ id: 'province' }, { id: 'city' }],
+    allowEmpty: false,
+  },
+  columns: {
+    items: [{ id: 'type', displayName: '类型 (type)' }],
+  },
+  values: {
+    selectable: true,
+    items: [
+      { id: 'price', checked: true },
+      { id: 'cost', checked: false },
+    ],
+  },
+  title: '行列切换',
+  onSubmit(result) {
+    console.log('result:', result);
+  },
+};
+
+export const SheetHeader: React.FC<HeaderProps> = React.memo((props) => {
+  const { sheetInstance } = props;
+  const PRE_CLASS = `sheet-header`;
+
+  const renderExtra = () => (
+    <Space align="center">
+      <Switcher {...switcherFields} />
+      <AdvancedSort
+        sheetInstance={sheetInstance}
+        onSortConfirm={(ruleValues, sortParams) => {
+          console.log('AdvancedSort:', ruleValues, sortParams);
+        }}
+      />
+      <Export sheetInstance={sheetInstance}>
+        <Button type="text" icon={<ExportOutlined />}>
+          导出数据
+        </Button>
+      </Export>
+      <Export sheetInstance={sheetInstance} />
+    </Space>
+  );
+
+  return (
+    <App>
+      <div
+        className={cx(PRE_CLASS)}
+        style={{
+          width: sheetInstance?.options.width,
+        }}
+      >
+        <div className={`${PRE_CLASS}-heading`}>
+          <div className={`${PRE_CLASS}-heading-left`}>
+            <div className={`${PRE_CLASS}-heading-title`}>
+              <a href="https://github.com/antvis/S2">{pkg.name} playground</a>
+            </div>
+          </div>
+          <div className={`${PRE_CLASS}-heading-extra`}>{renderExtra()}</div>
+        </div>
+        <div className={`${PRE_CLASS}-content`}>
+          <Space>
+            <span>
+              {pkg.name}: <Tag>{pkg.version}</Tag>
+            </span>
+            <span>
+              {corePkg.name}: <Tag>{corePkg.version}</Tag>
+            </span>
+            <span>
+              {reactPkg.name}: <Tag>{reactPkg.version}</Tag>
+            </span>
+            <span>
+              antd: <Tag>{AntdVersion}</Tag>
+            </span>
+            <span>
+              react: <Tag>{React.version}</Tag>
+            </span>
+            <span>
+              lang: <Tag>{getLang()}</Tag>
+            </span>
+          </Space>
+        </div>
+      </div>
+    </App>
+  );
+});
+
+SheetHeader.displayName = 'SheetHeader';
diff --git a/packages/s2-react-components/playground/index.less b/packages/s2-react-components/playground/index.less
@@ -6,5 +6,6 @@
   .config {
     display: flex;
     align-items: flex-start;
+    margin-bottom: 20px;
   }
 }
diff --git a/packages/s2-react-components/playground/index.tsx b/packages/s2-react-components/playground/index.tsx
@@ -1,24 +1,16 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable no-console */
-import {
-  getLang,
-  type SpreadSheet,
-  type ThemeCfg,
-  type ThemeName,
-} from '@antv/s2';
+import { type SpreadSheet, type ThemeCfg, type ThemeName } from '@antv/s2';
 // @ts-ignore
 import { SheetComponent } from '@antv/s2-react';
-import reactPkg from '@antv/s2-react/package.json';
-import corePkg from '@antv/s2/package.json';
-import { version as AntdVersion, Space, Tag } from 'antd';
+import '@antv/s2-react/dist/style.min.css';
+import { Space } from 'antd';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import pkg from '../package.json';
 import { FrozenPanel, TextAlignPanel, ThemePanel } from '../src';
+import { SheetHeader } from './Header';
 import { s2DataConfig, s2Options } from './config';
-
-import '@antv/s2-react/dist/style.min.css';
 import './index.less';
 import { onSheetMounted } from './utils';
 
@@ -31,6 +23,7 @@ function MainLayout() {
   return (
     <div className="playground">
       <React.StrictMode>
+        <SheetHeader sheetInstance={s2Ref.current!} />
         <Space className="config">
           <>
             <ThemePanel
@@ -105,35 +98,6 @@ function MainLayout() {
           sheetType="pivot"
           themeCfg={themeCfg}
           onMounted={onSheetMounted}
-          header={{
-            title: (
-              <a href="https://github.com/antvis/S2">{pkg.name} playground</a>
-            ),
-            description: (
-              <Space>
-                <span>
-                  {reactPkg.name}: <Tag>{reactPkg.version}</Tag>
-                </span>
-                <span>
-                  {corePkg.name}: <Tag>{corePkg.version}</Tag>
-                </span>
-                <span>
-                  antd: <Tag>{AntdVersion}</Tag>
-                </span>
-                <span>
-                  react: <Tag>{React.version}</Tag>
-                </span>
-                <span>
-                  lang: <Tag>{getLang()}</Tag>
-                </span>
-              </Space>
-            ),
-            switcher: { open: true },
-            export: { open: true },
-            advancedSort: {
-              open: true,
-            },
-          }}
         />
       </React.StrictMode>
     </div>

diff --git a/...ct/src/components/advanced-sort/index.tsx → .../analysis/advanced-sort/advanced-sort.tsx b/...ct/src/components/advanced-sort/index.tsx → .../analysis/advanced-sort/advanced-sort.tsx
@@ -1,12 +1,5 @@
-import { DeleteOutlined } from '@ant-design/icons';
-import {
-  EXTRA_FIELD,
-  SpreadSheet,
-  TOTAL_VALUE,
-  i18n,
-  type SortMethod,
-  type SortParam,
-} from '@antv/s2';
+import { DeleteOutlined, OrderedListOutlined } from '@ant-design/icons';
+import { EXTRA_FIELD, TOTAL_VALUE, i18n, type SortParam } from '@antv/s2';
 import {
   ADVANCED_SORT_PRE_CLS,
   getSortMethod,
@@ -26,54 +19,20 @@ import {
   uniq,
 } from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { SortIcon } from '../icons';
 import { CustomSort } from './custom-sort';
 import './index.less';
+import type {
+  AdvancedSortProps,
+  Dimension,
+  RuleItem,
+  RuleValue,
+} from './interface';
 
 const { Sider, Content } = Layout;
 
-export interface Dimension {
-  field: string;
-  name: string;
-  list: string[];
-}
-
-export interface RuleOption {
-  label: string;
-  value: 'sortMethod' | 'sortBy' | 'sortByMeasure';
-  children?: RuleOption[];
-}
-
-export interface RuleValue {
-  field: string;
-  name: string;
-  sortMethod?: SortMethod;
-  sortBy?: string[];
-  sortByMeasure?: string;
-}
-
-export interface AdvancedSortBaseProps {
-  open?: boolean;
-  className?: string;
-  icon?: React.ReactNode;
-  text?: React.ReactNode;
-  ruleText?: React.ReactNode;
-  dimensions?: Dimension[];
-  ruleOptions?: RuleOption[];
-  sortParams?: SortParam[];
-  onSortOpen?: () => void;
-  onSortConfirm?: (ruleValues: RuleValue[], sortParams: SortParam[]) => void;
-}
-
-export interface AdvancedSortProps extends AdvancedSortBaseProps {
-  sheet: SpreadSheet;
-}
-
-export type RuleItem = RuleValue & { rule: string[] };
-
 export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
   ({
-    sheet,
+    sheetInstance,
     className,
     icon,
     text,
@@ -175,7 +134,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
 
     const onFinish = () => {
       const ruleValue = form.getFieldsValue();
-      const { values = [] } = sheet.dataCfg.fields;
+      const { values = [] } = sheetInstance.dataCfg.fields;
       const ruleValues: RuleValue[] = [];
       const currentSortParams: SortParam[] = [];
 
@@ -230,16 +189,16 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
         return dimensions;
       }
 
-      const { fields = {} } = sheet.dataCfg || {};
+      const { fields = {} } = sheetInstance.dataCfg || {};
       const { rows = [], columns = [] } = fields;
 
       return map([...rows, ...columns], (item) => {
         const name = typeof item === 'string' ? item : item.field;
 
         return {
           field: item,
-          name: sheet.dataSet.getFieldName(name),
-          list: sheet.dataSet.getDimensionValues(name),
+          name: sheetInstance.dataSet.getFieldName(name),
+          list: sheetInstance.dataSet.getDimensionValues(name),
         };
       }) as unknown as Dimension[];
     };
@@ -251,12 +210,12 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
 
       return map(SORT_RULE_OPTIONS, (item) => {
         if (item.value === 'sortByMeasure') {
-          const { values = [] } = sheet.dataCfg.fields || {};
+          const { values = [] } = sheetInstance.dataCfg.fields || {};
 
           // @ts-ignore
           item.children = map(values, (field) => {
             return {
-              label: sheet.dataSet.getFieldName(field),
+              label: sheetInstance.dataSet.getFieldName(field),
               value: field,
             };
           });
@@ -286,7 +245,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
 
         return {
           field: sortFieldId,
-          name: sheet.dataSet.getFieldName(sortFieldId),
+          name: sheetInstance.dataSet.getFieldName(sortFieldId),
           rule,
           sortMethod,
           sortBy: currentSortBy,
@@ -432,7 +391,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = React.memo(
       <div className={cx(ADVANCED_SORT_PRE_CLS, className)}>
         <Button
           onClick={sortClick}
-          icon={icon || <SortIcon />}
+          icon={icon || <OrderedListOutlined />}
           size="small"
           className={`${ADVANCED_SORT_PRE_CLS}-btn`}
         >

diff --git a/.../components/advanced-sort/custom-sort.tsx → ...ts/analysis/advanced-sort/custom-sort.tsx b/.../components/advanced-sort/custom-sort.tsx → ...ts/analysis/advanced-sort/custom-sort.tsx
@@ -1,7 +1,11 @@
+import {
+  DownOutlined,
+  UpOutlined,
+  VerticalAlignTopOutlined,
+} from '@ant-design/icons';
 import { ADVANCED_SORT_PRE_CLS } from '@antv/s2-shared';
 import { Card } from 'antd';
 import React from 'react';
-import { HtmlIcon } from '../../common/icons';
 
 export interface CustomSortProps {
   splitOrders: string[];
@@ -48,23 +52,23 @@ export const CustomSort: React.FC<CustomSortProps> = (props) => {
           upHandler(value);
         }}
       >
-        <HtmlIcon name="groupAsc" />
+        <VerticalAlignTopOutlined />
       </span>
       <span
         className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
         onClick={() => {
           downHandler(value);
         }}
       >
-        <HtmlIcon name="groupDesc" />
+        <DownOutlined />
       </span>
       <span
         className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
         onClick={() => {
           toTopHandler(value);
         }}
       >
-        <HtmlIcon name="globalAsc" />
+        <UpOutlined />
       </span>
     </>
   );

diff --git a/...t/src/components/advanced-sort/index.less → ...ponents/analysis/advanced-sort/index.less b/...t/src/components/advanced-sort/index.less → ...ponents/analysis/advanced-sort/index.less
diff --git a/packages/s2-react-components/src/components/analysis/advanced-sort/index.ts b/packages/s2-react-components/src/components/analysis/advanced-sort/index.ts
@@ -0,0 +1,3 @@
+export { AdvancedSort } from './advanced-sort';
+
+export * from './interface';