feat: refactor switcher component (#380)

* chore: remove old dimension switcher

* refactor: rename icon prefix

* docs: complete switcher api

* refactor: refactor switcher result data structure

* docs: update api docs

* fix: export component

* refactor: refactor switcher

* chore: increase bundle size

packages/s2-core/__tests__/spreadsheet/spread-sheet-with-switcher-spec.tsx → packages/s2-core/__tests__/spreadsheet/switcher-spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { getContainer } from '../util/helpers';
-import { SheetEntry } from '../util/sheet-entry';
+import { getContainer } from 'tests/util/helpers';
 import { Switcher } from '@/components/switcher';
-import { SwitcherItem } from '@/components/switcher/interface';
+import { SwitcherFields, SwitcherItem } from '@/components/switcher/interface';
+import 'antd/dist/antd.min.css';
 
 const mockRows: SwitcherItem[] = [
   { id: 'area', displayName: '区域' },
@@ -43,29 +43,30 @@ const mockValues: SwitcherItem[] = [
 ];
 
 function MainLayout() {
-  const values = ['cost', 'price', 'cost/price'];
-
+  const fields: SwitcherFields = {
+    rows: {
+      items: mockRows,
+    },
+    columns: {
+      items: mockCols,
+    },
+    values: {
+      selectable: true,
+      expandable: true,
+      items: mockValues,
+    },
+  };
   return (
     <div>
       <div style={{ margin: '10px' }}>
         <Switcher
-          rows={mockRows}
-          cols={mockCols}
-          values={mockValues}
+          {...fields}
           onSubmit={(result) => {
             // eslint-disable-next-line no-console
             console.log('result: ', result);
           }}
         />
       </div>
-      <SheetEntry
-        dataCfg={{
-          fields: {
-            values: values,
-          },
-        }}
-        options={{}}
-      />
     </div>
   );
 }

packages/s2-core/__tests__/spreadsheet/table-sheet-spec.tsx

@@ -15,7 +15,7 @@ import {
   TableSheet,
 } from '@/index';
 import { Switcher } from '@/components/switcher';
-import { SwitcherItem } from '@/components/switcher/interface';
+import { SwitcherFields } from '@/components/switcher/interface';
 
 let s2: TableSheet;
 
@@ -159,14 +159,18 @@ function MainLayout({ callback }) {
     };
   }, []);
 
-  const switcherValues: SwitcherItem[] = columns.map((field) => {
-    return {
-      id: field,
-      displayName: find(meta, { field })?.name,
-      checked: true,
-    };
-  });
-
+  const switcherFields: SwitcherFields = {
+    columns: {
+      selectable: true,
+      items: columns.map((field) => {
+        return {
+          id: field,
+          displayName: find(meta, { field })?.name,
+          checked: true,
+        };
+      }),
+    },
+  };
   useEffect(() => {
     callback({
       setShowPagination,
@@ -177,11 +181,11 @@ function MainLayout({ callback }) {
     <Space direction="vertical">
       <Space>
         <Switcher
-          values={switcherValues}
+          {...switcherFields}
           onSubmit={(result) => {
             console.log('result: ', result);
-            const { hiddenValues } = result;
-            setHiddenColumnFields(hiddenValues);
+            const { hideItems } = result.columns;
+            setHiddenColumnFields(hideItems.map((i) => i.id));
           }}
         />
         <Switch