chore: 更新 react-componnents 依赖配置和说明文档 (#2790)

antvis · Jul 1, 2024 · 9fb266c · 9fb266c
1 parent 106bb4b
commit 9fb266c
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 73 deletions.
diff --git a/packages/s2-react-components/README.md b/packages/s2-react-components/README.md
@@ -2,7 +2,7 @@
 
 <div align="center">
 
-TODO:
+S2 多维分析表格配置套的 React 分析/配置组件库。
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2-react-components" title="npm">
@@ -31,4 +31,97 @@ $ pnpm add @antv/s2-react-components
 
 ## 🔨 使用
 
-TODO:
+```tsx
+import React from 'React'
+import { ThemePanel, TextAlignPanel, FrozenPanel } from '@antv/s2-react-components'
+import '@antv/s2-components/dist/s2-react-components.min.css'
+
+const App = () => {
+  return (
+    <>
+      <ThemePanel
+        title="主题配置"
+        disableCustomPrimaryColorPicker={false}
+        defaultCollapsed={false}
+        onChange={(options, theme) => {
+          console.log('onChange:', options, theme);
+        }}
+        onReset={(options, prevOptions, theme) => {
+          console.log('onReset:', options, prevOptions, theme);
+        }}
+      />
+      <TextAlignPanel
+        title="文字对齐"
+        defaultCollapsed={false}
+        onChange={(options, theme) => {
+          console.log('onChange:', options, theme);
+        }}
+        onReset={(options, prevOptions, theme) => {
+          console.log('onReset:', options, prevOptions, theme);
+        }}
+      />
+      <FrozenPanel
+        title="冻结行列头"
+        defaultCollapsed={false}
+        onChange={(options) => {
+          console.log('onChange:', options);
+        }}
+        onReset={(options, prevOptions) => {
+          console.log('onReset:', options, prevOptions);
+        }}
+      />
+    </>
+  )
+}
+```
+
+### 结果
+
+![result](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YomqTrWu7y0AAAAAAAAAAAAADmJ7AQ/original)
+
+### 结合表格使用
+
+```tsx
+import React from 'React'
+import { ThemePanel } from '@antv/s2-react-components'
+import '@antv/s2-components/dist/s2-react-components.min.css'
+
+const App = () => {
+  const s2Ref = React.useRef<SpreadSheet>();
+  const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
+    name: 'default',
+  });
+
+  return (
+    <>
+      <ThemePanel
+        title="主题配置"
+        disableCustomPrimaryColorPicker={false}
+        defaultCollapsed={false}
+        onChange={(options, theme) => {
+          setThemeCfg({
+            name: options.themeType as ThemeName,
+            theme,
+          });
+          s2Ref.current?.setOptions({
+            hierarchyType: options.hierarchyType,
+          });
+          s2Ref.current?.render(false);
+          console.log('onChange:', options, theme);
+        }}
+        onReset={(options, prevOptions, theme) => {
+          console.log('onReset:', options, prevOptions, theme);
+        }}
+      />
+      <SheetComponent
+        ref={s2Ref}
+        dataCfg={s2DataConfig}
+        options={s2Options}
+        sheetType="pivot"
+        themeCfg={themeCfg}
+      />
+    </>
+  )
+```
+
+![result](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RsLDQIXlyMgAAAAAAAAAAAAADmJ7AQ/original)
diff --git a/packages/s2-react-components/package.json b/packages/s2-react-components/package.json
@@ -98,8 +98,8 @@
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
-    "@antv/s2": "^2.0.0-next.1",
-    "antd": "^5.0.0",
+    "@antv/s2": "^1.0.0",
+    "antd": ">=4.16.13",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },

diff --git a/packages/s2-react-components/playground/config.tsx b/packages/s2-react-components/playground/config.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable no-console */
-import { type S2DataConfig } from '@antv/s2';
-import type { SheetComponentOptions } from '@antv/s2-react';
+import { type S2DataConfig, type S2Options } from '@antv/s2';
 import {
   data,
   fields,
@@ -16,7 +15,7 @@ export const s2DataConfig: S2DataConfig = {
   fields,
 };
 
-export const s2Options: SheetComponentOptions = {
+export const s2Options: S2Options = {
   debug: false,
   width: 800,
   height: 600,

diff --git a/packages/s2-react-components/playground/index.tsx b/packages/s2-react-components/playground/index.tsx
@@ -7,6 +7,7 @@ import {
   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';
@@ -31,69 +32,71 @@ function MainLayout() {
     <div className="playground">
       <React.StrictMode>
         <Space className="config">
-          <ThemePanel
-            title="主题配置"
-            disableCustomPrimaryColorPicker={false}
-            defaultCollapsed={false}
-            onChange={(options, theme) => {
-              setThemeCfg({
-                name: options.themeType as ThemeName,
-                theme,
-              });
-              s2Ref.current?.setOptions({
-                hierarchyType: options.hierarchyType,
-              });
-              s2Ref.current?.render(false);
-              console.log('onChange:', options, theme);
-            }}
-            onReset={(options, prevOptions, theme) => {
-              console.log('onReset:', options, prevOptions, theme);
-            }}
-          />
-          <TextAlignPanel
-            title="文字对齐"
-            defaultCollapsed={false}
-            onChange={(options, theme) => {
-              setThemeCfg({
-                theme,
-              });
-              s2Ref.current?.render(false);
-              console.log('onChange:', options, theme);
-            }}
-            onReset={(options, prevOptions, theme) => {
-              console.log('onReset:', options, prevOptions, theme);
-            }}
-          />
-          <FrozenPanel
-            title="冻结行列头"
-            defaultCollapsed={false}
-            inputNumberProps={{
-              size: 'small',
-              step: 1,
-            }}
-            defaultOptions={{
-              frozenRow: [1, 2],
-            }}
-            onChange={(options) => {
-              const [rowCount = 0, trailingRowCount = 0] = options.frozenRow;
-              const [colCount = 0, trailingColCount = 0] = options.frozenCol;
+          <>
+            <ThemePanel
+              title="主题配置"
+              disableCustomPrimaryColorPicker={false}
+              defaultCollapsed={false}
+              onChange={(options, theme) => {
+                setThemeCfg({
+                  name: options.themeType as ThemeName,
+                  theme,
+                });
+                s2Ref.current?.setOptions({
+                  hierarchyType: options.hierarchyType,
+                });
+                s2Ref.current?.render(false);
+                console.log('onChange:', options, theme);
+              }}
+              onReset={(options, prevOptions, theme) => {
+                console.log('onReset:', options, prevOptions, theme);
+              }}
+            />
+            <TextAlignPanel
+              title="文字对齐"
+              defaultCollapsed={false}
+              onChange={(options, theme) => {
+                setThemeCfg({
+                  theme,
+                });
+                s2Ref.current?.render(false);
+                console.log('onChange:', options, theme);
+              }}
+              onReset={(options, prevOptions, theme) => {
+                console.log('onReset:', options, prevOptions, theme);
+              }}
+            />
+            <FrozenPanel
+              title="冻结行列头"
+              defaultCollapsed={false}
+              inputNumberProps={{
+                size: 'small',
+                step: 1,
+              }}
+              defaultOptions={{
+                frozenRow: [1, 2],
+              }}
+              onChange={(options) => {
+                const [rowCount = 0, trailingRowCount = 0] = options.frozenRow;
+                const [colCount = 0, trailingColCount = 0] = options.frozenCol;
 
-              s2Ref.current?.setOptions({
-                frozen: {
-                  rowHeader: options.frozenRowHeader,
-                  rowCount,
-                  colCount,
-                  trailingRowCount,
-                  trailingColCount,
-                },
-              });
-              s2Ref.current?.render(false);
-              console.log('onChange:', options);
-            }}
-            onReset={(options, prevOptions) => {
-              console.log('onReset:', options, prevOptions);
-            }}
-          />
+                s2Ref.current?.setOptions({
+                  frozen: {
+                    rowHeader: options.frozenRowHeader,
+                    rowCount,
+                    colCount,
+                    trailingRowCount,
+                    trailingColCount,
+                  },
+                });
+                s2Ref.current?.render(false);
+                console.log('onChange:', options);
+              }}
+              onReset={(options, prevOptions) => {
+                console.log('onReset:', options, prevOptions);
+              }}
+            />
+          </>
         </Space>
         <SheetComponent
           ref={s2Ref}

diff --git a/packages/s2-react-components/src/components/config/theme-panel/interface.ts b/packages/s2-react-components/src/components/config/theme-panel/interface.ts
@@ -1,10 +1,9 @@
-import type { S2Theme } from '@antv/s2';
-import type { SheetComponentOptions } from '@antv/s2-react';
+import type { S2Options, S2Theme } from '@antv/s2';
 import type { SheetThemeColorType, SheetThemeType } from '../../../common';
 import type { BaseComponentProps } from '../../../common/interface/components';
 
 export interface ThemePanelOptions {
-  hierarchyType: SheetComponentOptions['hierarchyType'];
+  hierarchyType: S2Options['hierarchyType'];
   themeType: (typeof SheetThemeType)[keyof typeof SheetThemeType];
   colorType: (typeof SheetThemeColorType)[keyof typeof SheetThemeColorType];
 }

diff --git a/packages/s2-react-components/tsconfig.json b/packages/s2-react-components/tsconfig.json
@@ -5,7 +5,6 @@
     "jsx": "react",
     "paths": {
       "@antv/s2":["s2-core/src/index.ts"],
-      "@antv/s2-react":["s2-react/src/index.ts"],
       "@antv/s2-shared":["s2-shared/src/index.ts"],
       "@/*":["s2-react-components/src/*"],
       "tests/*":["s2-react-components/__tests__/*"]