From 9fb266c1977f011152fac4b15372312fdb631502 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Mon, 1 Jul 2024 10:44:54 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20react-componnents?= =?UTF-8?q?=20=E4=BE=9D=E8=B5=96=E9=85=8D=E7=BD=AE=E5=92=8C=E8=AF=B4?= =?UTF-8?q?=E6=98=8E=E6=96=87=E6=A1=A3=20(#2790)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-react-components/README.md | 97 ++++++++++++- packages/s2-react-components/package.json | 4 +- .../s2-react-components/playground/config.tsx | 5 +- .../s2-react-components/playground/index.tsx | 127 +++++++++--------- .../config/theme-panel/interface.ts | 5 +- packages/s2-react-components/tsconfig.json | 1 - 6 files changed, 166 insertions(+), 73 deletions(-) diff --git a/packages/s2-react-components/README.md b/packages/s2-react-components/README.md index 141029469f..ead1e8dba7 100644 --- a/packages/s2-react-components/README.md +++ b/packages/s2-react-components/README.md @@ -2,7 +2,7 @@
-TODO: +S2 多维分析表格配置套的 React 分析/配置组件库。

@@ -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 ( + <> + { + console.log('onChange:', options, theme); + }} + onReset={(options, prevOptions, theme) => { + console.log('onReset:', options, prevOptions, theme); + }} + /> + { + console.log('onChange:', options, theme); + }} + onReset={(options, prevOptions, theme) => { + console.log('onReset:', options, prevOptions, theme); + }} + /> + { + 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(); + const [themeCfg, setThemeCfg] = React.useState({ + name: 'default', + }); + + return ( + <> + { + 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); + }} + /> + + + ) +``` + +![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 index 094ae153c6..7473f617b9 100644 --- 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 index 8afe9ef91b..2f8d44864b 100644 --- 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 index 51af4cd2d8..a846bc9d05 100644 --- 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() {

- { - 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); - }} - /> - { - setThemeCfg({ - theme, - }); - s2Ref.current?.render(false); - console.log('onChange:', options, theme); - }} - onReset={(options, prevOptions, theme) => { - console.log('onReset:', options, prevOptions, theme); - }} - /> - { - const [rowCount = 0, trailingRowCount = 0] = options.frozenRow; - const [colCount = 0, trailingColCount = 0] = options.frozenCol; + <> + { + 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); + }} + /> + { + setThemeCfg({ + theme, + }); + s2Ref.current?.render(false); + console.log('onChange:', options, theme); + }} + onReset={(options, prevOptions, theme) => { + console.log('onReset:', options, prevOptions, theme); + }} + /> + { + 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); + }} + /> +