From 185b59cc4642412d972e0c353299bdfb31915e22 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Tue, 14 May 2024 11:51:26 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E5=8D=87=E7=BA=A7=20?= =?UTF-8?q?G=206.0=20=E5=BC=95=E8=B5=B7=E7=9A=84=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E9=94=99=E8=AF=AF=20(#2725)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-react/CHANGELOG.md | 22 +----- packages/s2-react/playground/index.tsx | 2 +- pnpm-lock.yaml | 4 +- s2-site/docs/common/packages.zh.md | 2 +- .../docs/manual/advanced/chart-in-cell.zh.md | 2 +- .../manual/advanced/custom/custom-order.zh.md | 79 +++++++++---------- .../docs/manual/basic/multi-line-text.zh.md | 2 +- s2-site/docs/manual/migration-v2.zh.md | 38 +++++++-- .../case/art/demo/time-spend-abstract.tsx | 27 +++---- .../custom/custom-cell/demo/col-cell.ts | 2 +- .../custom/custom-cell/demo/corner-cell.ts | 2 +- .../custom/custom-cell/demo/corner-header.ts | 2 +- .../custom/custom-cell/demo/data-cell.ts | 2 +- .../custom/custom-cell/demo/row-cell.ts | 2 +- .../custom/custom-order/demo/custom-order.tsx | 62 +++++++++------ .../custom/custom-plugins/demo/a11y.ts | 2 + .../custom/custom-plugins/demo/meta.json | 4 +- .../custom/custom-plugins/demo/rough.ts | 3 +- .../custom/custom-plugins/index.en.md | 2 +- .../custom/custom-plugins/index.zh.md | 2 +- .../demo/custom-g-shape.ts | 2 +- s2-site/package.json | 4 +- 22 files changed, 143 insertions(+), 126 deletions(-) diff --git a/packages/s2-react/CHANGELOG.md b/packages/s2-react/CHANGELOG.md index 2acb6ad651..a96ab604f1 100644 --- a/packages/s2-react/CHANGELOG.md +++ b/packages/s2-react/CHANGELOG.md @@ -1,19 +1,16 @@ # [@antv/s2-react-v2.0.0-next.19](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.18...@antv/s2-react-v2.0.0-next.19) (2024-05-11) - ### Bug Fixes * 修复 React 18 环境下 Tooltip 卸载后无法再次渲染 & 排序菜单选中效果丢失的问题 ([#2698](https://github.com/antvis/S2/issues/2698)) ([0af329d](https://github.com/antvis/S2/commit/0af329da596733eee8013a7a1f04676a720767d3)) * 修复导出 CSV 时分隔符错误导致的展示格式错误 close [#2701](https://github.com/antvis/S2/issues/2701) ([#2703](https://github.com/antvis/S2/issues/2703)) ([98c051a](https://github.com/antvis/S2/commit/98c051a58c1d8b7c7831343ba909238e514615ae)) -* 修复配置了多行文本但实际渲染的文本未换行时, 单元格高度也会自适应调整的问题 ([#2705](https://github.com/antvis/S2/issues/2705)) ([5d19e62](https://github.com/antvis/S2/commit/5d19e623c8f726d4f417ea2cb55cc489ef09f1b2)) - +* 修复配置了多行文本但实际渲染的文本未换行时，单元格高度也会自适应调整的问题 ([#2705](https://github.com/antvis/S2/issues/2705)) ([5d19e62](https://github.com/antvis/S2/commit/5d19e623c8f726d4f417ea2cb55cc489ef09f1b2)) ### Features * **options:** customSVGIcons API 变更 ([#2700](https://github.com/antvis/S2/issues/2700)) ([fde8e8f](https://github.com/antvis/S2/commit/fde8e8f57d176057d052cbf0dd401211e2839a0e)) * 更新 g 到最新版 ([#2631](https://github.com/antvis/S2/issues/2631)) ([7647605](https://github.com/antvis/S2/commit/7647605dcd60e1e34f2014aafb180ac931bf0725)), closes [#2629](https://github.com/antvis/S2/issues/2629) - ### BREAKING CHANGES * Export 组件 和 asyncGetAllPlainData, copyToClipboard @@ -34,31 +31,26 @@ # [@antv/s2-react-v2.0.0-next.18](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.17...@antv/s2-react-v2.0.0-next.18) (2024-04-30) - ### Bug Fixes * 修复表格右键事件无法触发 close [#2687](https://github.com/antvis/S2/issues/2687) ([#2690](https://github.com/antvis/S2/issues/2690)) ([8b4f3e3](https://github.com/antvis/S2/commit/8b4f3e3dab83e6ae38b1d3362049af8352a7a4a9)) - ### Features * canvas 支持挂载 s2 实例 ([#2645](https://github.com/antvis/S2/issues/2645)) ([ed21dcb](https://github.com/antvis/S2/commit/ed21dcb82ea4cb434587a4ffa4819f2a619ca1aa)) - ### Performance Improvements * 优化 getDimensionValues 在大量 flatten 情况下的性能 ([#2640](https://github.com/antvis/S2/issues/2640)) ([41980c5](https://github.com/antvis/S2/commit/41980c5a092e24214d21f41cfa288d5350f99c16)) # [@antv/s2-react-v2.0.0-next.17](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.16...@antv/s2-react-v2.0.0-next.17) (2024-04-26) - ### Bug Fixes * 修复明细表自定义多级列头导出格式错误 close [#2664](https://github.com/antvis/S2/issues/2664) ([#2674](https://github.com/antvis/S2/issues/2674)) ([ae9add9](https://github.com/antvis/S2/commit/ae9add9c722877aced481340f798408a09ad98fb)) # [@antv/s2-react-v2.0.0-next.16](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.15...@antv/s2-react-v2.0.0-next.16) (2024-03-29) - ### Bug Fixes * 修复紧凑模式下数值单元格错误的展示了省略号 ([#2632](https://github.com/antvis/S2/issues/2632)) ([2822471](https://github.com/antvis/S2/commit/2822471e9f73ba7b19292dc88a93b96d38afa471)) @@ -66,7 +58,6 @@ # [@antv/s2-react-v2.0.0-next.15](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.14...@antv/s2-react-v2.0.0-next.15) (2024-03-22) - ### Bug Fixes * **g:** 修复表格初次渲染时部分 icon 不展示 close [#2014](https://github.com/antvis/S2/issues/2014) ([#2606](https://github.com/antvis/S2/issues/2606)) ([3f9a176](https://github.com/antvis/S2/commit/3f9a176f75c46fa58e50d0fd70a652242f7b6df3)) @@ -74,14 +65,12 @@ # [@antv/s2-react-v2.0.0-next.14](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.13...@antv/s2-react-v2.0.0-next.14) (2024-03-15) - ### Bug Fixes * 修复文本行数不一致时自动换行高度自适应失效 close [#2594](https://github.com/antvis/S2/issues/2594) ([#2598](https://github.com/antvis/S2/issues/2598)) ([fae5496](https://github.com/antvis/S2/commit/fae5496e503205f319e7bdc79240d31dacd4e850)) # [@antv/s2-react-v2.0.0-next.13](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.12...@antv/s2-react-v2.0.0-next.13) (2024-03-11) - ### Features * **interaction:** 支持批量调整行高列宽 close [#2574](https://github.com/antvis/S2/issues/2574) ([#2580](https://github.com/antvis/S2/issues/2580)) ([7d1be20](https://github.com/antvis/S2/commit/7d1be206442396371ab08a8224b2685aea2c025d)) @@ -89,7 +78,6 @@ # [@antv/s2-react-v2.0.0-next.12](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.11...@antv/s2-react-v2.0.0-next.12) (2024-03-04) - ### Bug Fixes * 修复树状模式选中非叶子节点时不展示汇总信息的问题 ([48b7073](https://github.com/antvis/S2/commit/48b70737f32d58d75c356a4d37afeb74a917cf23)) @@ -98,29 +86,25 @@ * 修复编辑表的输入框未回填格式化后的数据 close [#2528](https://github.com/antvis/S2/issues/2528) ([#2549](https://github.com/antvis/S2/issues/2549)) ([95d67ca](https://github.com/antvis/S2/commit/95d67ca02b774aed426a179a16aa27f0c172356e)) * 修复自定义目录树同名节点展示异常 & 导出缺失角头 close [#2455](https://github.com/antvis/S2/issues/2455) ([#2551](https://github.com/antvis/S2/issues/2551)) ([6d315bf](https://github.com/antvis/S2/commit/6d315bff20e74f0ce5f1d286105eeba749ebabaf)) * 修复行列头数值复制时未使用格式化的值 & 优化单测 ([989366f](https://github.com/antvis/S2/commit/989366fc740b7c1367c4cf246a6e3eb80e4f3338)) -* 修复表格排序后, 编辑单元格后数据更新错误 close [#2573](https://github.com/antvis/S2/issues/2573) ([#2544](https://github.com/antvis/S2/issues/2544)) ([c4ff49a](https://github.com/antvis/S2/commit/c4ff49a47c5ef6155a623edaf72e65ab3dccbc68)) +* 修复表格排序后，编辑单元格后数据更新错误 close [#2573](https://github.com/antvis/S2/issues/2573) ([#2544](https://github.com/antvis/S2/issues/2544)) ([c4ff49a](https://github.com/antvis/S2/commit/c4ff49a47c5ef6155a623edaf72e65ab3dccbc68)) * 修复趋势分析表复制错误 ([2e24418](https://github.com/antvis/S2/commit/2e24418cabebdbe1cd306cdf931c0c8fa7bae050)) - ### Features * 移除已废弃的方法和逻辑 & 优化文档 ([#2566](https://github.com/antvis/S2/issues/2566)) ([de7c97b](https://github.com/antvis/S2/commit/de7c97b862e5b467fd335dd65f9dac5a95e4b621)) # [@antv/s2-react-v2.0.0-next.11](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.10...@antv/s2-react-v2.0.0-next.11) (2024-02-07) - ### Bug Fixes -* 修复表格排序后, 编辑单元格后数据更新错误 ([e841d3d](https://github.com/antvis/S2/commit/e841d3db020afb418f0b2f9223271c329390b192)) +* 修复表格排序后，编辑单元格后数据更新错误 ([e841d3d](https://github.com/antvis/S2/commit/e841d3db020afb418f0b2f9223271c329390b192)) # [@antv/s2-react-v2.0.0-next.10](https://github.com/antvis/S2/compare/@antv/s2-react-v2.0.0-next.9...@antv/s2-react-v2.0.0-next.10) (2024-02-05) - ### Features * 合并 master 到 next ([#2493](https://github.com/antvis/S2/issues/2493)) ([6da530d](https://github.com/antvis/S2/commit/6da530d0c5f53d283ddfaa4b3e510ca11c9bf83e)), closes [#2186](https://github.com/antvis/S2/issues/2186) [#2204](https://github.com/antvis/S2/issues/2204) [#2191](https://github.com/antvis/S2/issues/2191) - ### Performance Improvements * 优化多行文本渲染性能 ([#2478](https://github.com/antvis/S2/issues/2478)) ([adc5ef3](https://github.com/antvis/S2/commit/adc5ef32056ca0427942f5a118af938124821bcc)) diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx index 001b259981..6b97397dbb 100644 --- a/packages/s2-react/playground/index.tsx +++ b/packages/s2-react/playground/index.tsx @@ -1643,7 +1643,7 @@ function MainLayout() { }, { key: 'plugins', - label: 'G 5.0 插件系统', + label: 'AntV/G 插件系统', children: , }, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2587ed9571..ac614f5623 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,10 +475,10 @@ importers: specifier: ^5.1.19 version: 5.1.19 '@antv/s2': - specifier: next + specifier: ^2.0.0-next version: link:../packages/s2-core '@antv/s2-react': - specifier: next + specifier: ^2.0.0-next version: link:../packages/s2-react antd: specifier: ^5.17.0 diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md index 9e798b12e9..98030a5c2d 100644 --- a/s2-site/docs/common/packages.zh.md +++ b/s2-site/docs/common/packages.zh.md @@ -7,7 +7,7 @@ order: 5 创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本： -- `@antv/s2`: 基于 `Canvas` 和 [AntV/G 5.0](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。 +- `@antv/s2`: 基于 `Canvas` 和 [AntV/G 6.0](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力。 - `@antv/s2-react`: 基于 `React 18`, `@antv/s2`, `antd` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher). - `@antv/s2-vue`: 基于 `Vue3`, `@antv/s2` , `ant-design-vue` 封装，提供配套的分析组件。 diff --git a/s2-site/docs/manual/advanced/chart-in-cell.zh.md b/s2-site/docs/manual/advanced/chart-in-cell.zh.md index d494e7fc5f..c465c27e89 100644 --- a/s2-site/docs/manual/advanced/chart-in-cell.zh.md +++ b/s2-site/docs/manual/advanced/chart-in-cell.zh.md @@ -444,7 +444,7 @@ class CustomCornerCell extends CornerCell { new GImage({ style: { ...this.getBBoxByType(), - img, + src: img, }, }), ); diff --git a/s2-site/docs/manual/advanced/custom/custom-order.zh.md b/s2-site/docs/manual/advanced/custom/custom-order.zh.md index 228b841220..3809d75e65 100644 --- a/s2-site/docs/manual/advanced/custom/custom-order.zh.md +++ b/s2-site/docs/manual/advanced/custom/custom-order.zh.md @@ -3,12 +3,15 @@ title: 自定义排序操作 order: 6 --- -虽然，`S2` 表格有默认的 [排序操作](/examples/analysis/sort#group-sort) 和 `React Header` -组件中的 [高级排序排序](/examples/analysis/sort#advanced) 功能。 +:::warning{title="注意"} +阅读本章前，请确保已经阅读过 [基础排序](/manual/basic/sort/basic)，[组内排序](/manual/basic/sort/group)，[Tooltip 注意事项](/manual/basic/tooltip#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9) 等章节。 +::: -但在某些业务场景下，我们仍需要自定义排序，我们将它分为**自定义排序 `icon`**，**自定义排序 `tooltip`**，**自定义排序操作**三个部分。接下来，我将带大家实现如👇 动图中的自定义排序功能。 +`S2` 提供默认的基础 [排序操作](/examples/analysis/sort#group-sort) 和 React 版本的 [高级排序](/examples/analysis/sort#advanced) 组件。 -![自定义排序](https://gw.alipayobjects.com/zos/antfincdn/oOiZ02mZJ/zidingyipaixu.gif) +但在某些业务场景下，我们仍需要自定义排序，我们将它分为**自定义排序 `icon`**，**自定义排序 `tooltip`**，**自定义排序操作**三个部分。 + +preview ## 自定义排序 icon @@ -16,21 +19,19 @@ order: 6 ### 配置 -- 关闭默认 icon +- 关闭表头默认 [排序操作 icon](/manual/basic/sort/group). ```jsx const s2Options = { - // 关闭默认 icon showDefaultHeaderActionIcon: false, ... } ``` -- 配置自定义 icon +- 配置 [自定义 icon](/manual/advanced/custom/custom-icon) ```jsx const s2Options = { - // 自定义 icon customSVGIcons: [ { name: 'customKingIcon', @@ -41,18 +42,18 @@ const s2Options = { } ``` -- 配置 icon 展示位置 +- 配置 icon [展示位置](/manual/advanced/custom/custom-icon#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%8C%E5%88%97%E5%A4%B4-icon) ```jsx const s2Options = { - // 配置 icon 展示位置 headerActionIcons: [ { // 选择 icon, 可以是 S2 自带的，也可以是自定义的 icon - icons: [ 'customKingIcon' ], + icons: ['customKingIcon'], // 通过 belongsCell + displayCondition 设置 icon 的展示位置 belongsCell: 'colCell', displayCondition: (meta) => meta.level === 2, + defaultHide: false, ... }], ... @@ -61,13 +62,11 @@ const s2Options = { ### 效果展示 -| before | after | -|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| -| before | after | +preview ## 自定义 tooltip -相关章节：[headerActionIcons 配置说明](/docs/api/general/S2Options#headeractionicon) +相关章节：[headerActionIcons 配置说明](/api/general/S2Options#headeractionicon) ### 配置 @@ -86,10 +85,10 @@ const s2Options = { ```jsx const items = [ - { key: SortMethodType.none, label: '不排序' }, - { key: SortMethodType.asc, label: '升序', icon: 'GroupAsc' }, - { key: SortMethodType.desc, label: '降序', icon: 'GroupDesc' }, - { key: SortMethodType.custom, label: '自定义排序', icon: 'Trend' }, + { key: 'NONE', label: '不排序' }, + { key: 'ASC', label: '升序', icon: 'GroupAsc' }, + { key: 'DESC', label: '降序', icon: 'GroupDesc' }, + { key: 'CUSTOM', label: '自定义排序', icon: 'Trend' }, ]; const s2Options = { @@ -100,9 +99,12 @@ const s2Options = { icons: ['customKingIcon'], // 通过 belongsCell + displayCondition 设置 icon 的展示位置 belongsCell: 'colCell', + // 展示条件 displayCondition: (meta) => meta.level === 2, + // 默认是否隐藏，hover 后再展示 + defaultHide: false, // icon 点击之后的执行函数 - onClick: (props) => { + onClick: (options) => { const { meta, event } = props; // https://s2.antv.antgroup.com/manual/basic/tooltip const operator = { @@ -118,57 +120,54 @@ const s2Options = { onlyShowOperator: true, }); }, + onHover: (options) => {} }, ], ... } ``` -### 展示效果 +### 预览 -| before | after | -|----------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| -| ![before](https://gw.alipayobjects.com/zos/antfincdn/ho4NpbgQC/926fb382-d71e-429e-8a22-290c16ffb6c0.png) | ![after](https://gw.alipayobjects.com/zos/antfincdn/jTQbHqPuB/4917862a-e60c-4889-824f-f4d11f192f86.png) | +preview ## 自定义排序操作 -相关章节：[自定义排序](/docs/manual/basic/sort/custom#2-%E7%BB%B4%E5%BA%A6%E5%80%BC%E5%88%97%E8%A1%A8sortby) +相关章节：[自定义排序](/manual/basic/sort/basic) ### 配置 ```jsx // 执行自定义排序回调 const handleSortCallback = (meta, key) => { - if (key === SortMethodType.custom) { + if (key === 'CUSTOM') { const sortParams = [ { sortFieldId: 'type', sortBy: [ '办公用品', '家具' ] }, { sortFieldId: 'city', sortMethod: 'ASC' }, ]; - setSortParams(sortParams) console.log('可以在这里实现你手动排序的交互和逻辑哟', sortParams) } else { // 使用 S2 提供的组内排序方式 meta.spreadsheet.groupSortByMethod(key, meta) - ; } } const s2Options = { - // 设置自定义 `icon` 的展示条件 headerActionIcons: [ { onClick: (props) => { - const { meta, event } = props; + const { meta, event } = props const operator = { - onClick: ({ key }) => { - // 执行自定义排序回调 - handleSortCallback(meta, key); - meta.spreadsheet.hideTooltip(); - }, menu: { + onClick: ({ key }) => { + // 执行自定义排序回调 + handleSortCallback(meta, key) + meta.spreadsheet.hideTooltip() + }, items }, - }; + } + meta.spreadsheet.showTooltipWithInfo(event, [], { operator, onlyShowCellText: true, @@ -182,10 +181,6 @@ const s2Options = { } ``` -### 展示效果 - -点击自定义排序，表格就会按照我们设置的排序进行展示。 - -类别按手动排序：[办公用品，家具], 城市 🏙 按首字母升序组内排列。 +### 预览 -![after](https://gw.alipayobjects.com/zos/antfincdn/g8H01taL6/zidingyipaixucaozuo.gif) + diff --git a/s2-site/docs/manual/basic/multi-line-text.zh.md b/s2-site/docs/manual/basic/multi-line-text.zh.md index 0c8e9d545a..b78852e9da 100644 --- a/s2-site/docs/manual/basic/multi-line-text.zh.md +++ b/s2-site/docs/manual/basic/multi-line-text.zh.md @@ -16,7 +16,7 @@ tag: New ## 使用 -S2 内部适配了 `AntV/G 5.0` 的 [多行布局能力](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80), 可以根据文本高度自适应单元格高度，并支持如下配置： +S2 内部适配了 `AntV/G 6.0` 的 [多行布局能力](https://g.antv.antgroup.com/api/basic/text#%E5%A4%9A%E8%A1%8C%E5%B8%83%E5%B1%80), 可以根据文本高度自适应单元格高度，并支持如下配置： :::info{title="提示"} diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md index 8fdac20e2d..a76c4b2ab1 100644 --- a/s2-site/docs/manual/migration-v2.zh.md +++ b/s2-site/docs/manual/migration-v2.zh.md @@ -67,9 +67,9 @@ $ npm install @antv/s2-vue@next ant-design-vue@3.x --save ### 基础包 @antv/s2 -#### 底层渲染引擎升级为 `AntV/G 5.0` +#### 底层渲染引擎升级为 `AntV/G 6.0` -表格绘制引擎升级到 [`G 5.0`](https://g.antv.antgroup.com/) 大版本，和 [`AntV` 其他技术栈](https://antv.antgroup.com/) 保持同步，渲染方式升级为**异步**。 +表格绘制引擎升级到 [`G 6.0`](https://g.antv.antgroup.com/) 大版本，和 [`AntV` 其他技术栈](https://antv.antgroup.com/) 保持同步，渲染方式升级为**异步**。 ```diff - s2.render() @@ -309,7 +309,7 @@ const s2Options = { } ``` -#### 树状结构配置调整 +#### 树状结构配置和回调事件调整 1. 行头折叠展开配置调整 @@ -382,6 +382,19 @@ const s2DataConfig = { 具体请查看 [自定义行列头分组](/manual/advanced/custom/custom-header) 相关文档。 +4. 行头单元格折叠展开事件划分到 `RowCell` + +移除 `LAYOUT_AFTER_COLLAPSE_ROWS` + +```diff +- S2Event.LAYOUT_TREE_ROWS_COLLAPSE_ALL ++ S2Event.ROW_CELL_ALL_COLLAPSED + +- S2Event.LAYOUT_COLLAPSE_ROWS +- S2Event.LAYOUT_AFTER_COLLAPSE_ROWS ++ S2Event.ROW_CELL_COLLAPSED +``` + #### 树状结构 icon 折叠展开状态同步 现在行头节点的 icon 展开/收起，会同步更新角头 icon（全部展开/收起）的状态。 @@ -651,6 +664,13 @@ s2.interaction.getState() + stateName: "dataCellBrushSelected" ``` +#### 配置预处理 API 变更 + +```diff +- import { getSafetyOptions, getSafetyDataConfig } from '@antv/s2' ++ import { setupOptions, setupDataConfig } from '@antv/s2' +``` + ### 组件层 @antv/s2-react #### 支持 React 18 和 Ant Design 5.0 @@ -742,11 +762,17 @@ s2.showTooltip({ 具体请查看 [Tooltip](/manual/basic/tooltip) 相关文档。 -#### 配置预处理 API 变更 +#### 行头单元格折叠展开事件划分到 `RowCell` + +`onCollapseRowsAll`, `onLayoutAfterCollapseRows` 更名为 `onRowCellAllCollapsed`, `onRowCellCollapsed` ```diff -- import { getSafetyOptions, getSafetyDataConfig } from '@antv/s2' -+ import { setupOptions, setupDataConfig } from '@antv/s2' +- ++ + +- ++ + ``` ## ✍️ API 调整 diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx index e6cd4d65b8..cfb08dfdba 100644 --- a/s2-site/examples/case/art/demo/time-spend-abstract.tsx +++ b/s2-site/examples/case/art/demo/time-spend-abstract.tsx @@ -1,5 +1,4 @@ import React from 'react'; - import insertCSS from 'insert-css'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import { Image as GImage } from '@antv/g'; @@ -9,36 +8,36 @@ import '@antv/s2-react/dist/style.min.css'; const paletteLegendMap = [ { text: '睡觉', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*zGyiSa2A8ZMAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*zGyiSa2A8ZMAAAAAAAAAAAAAARQnAQ', }, { text: '工作', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RdyWRpg3hRAAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RdyWRpg3hRAAAAAAAAAAAAAAARQnAQ', }, { text: '上学', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', }, { text: '吃饭', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*XHHcSZxmR7gAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*XHHcSZxmR7gAAAAAAAAAAAAAARQnAQ', }, { text: '学习', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', }, { text: '娱乐', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZRaUT55QCaoAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZRaUT55QCaoAAAAAAAAAAAAAARQnAQ', }, { text: '运动', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*xpO5Sawk8YIAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*xpO5Sawk8YIAAAAAAAAAAAAAARQnAQ', }, { text: '其他', - img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ', + src: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ', }, ]; @@ -50,7 +49,7 @@ class CustomDataCell extends DataCell { drawTextShape() { const { fieldValue } = this.meta; const url = - paletteLegendMap.find((v) => v.text === fieldValue)?.img ?? + paletteLegendMap.find((legend) => legend.text === fieldValue)?.src ?? 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ'; const img = new Image(); @@ -65,7 +64,7 @@ class CustomDataCell extends DataCell { y: y + (height - img?.height) / 2, width: img?.width ?? width, height: img?.height ?? height, - img: url, + src: img, }, }), ); @@ -177,10 +176,10 @@ fetch('https://assets.antv.antgroup.com/s2/time-spend.json') const PaletteLegend = () => (
- {paletteLegendMap.map((value, key) => ( + {paletteLegendMap.map((legend, key) => (
- - {value.text} + + {legend.text}
))}
diff --git a/s2-site/examples/custom/custom-cell/demo/col-cell.ts b/s2-site/examples/custom/custom-cell/demo/col-cell.ts index c322cb6289..bda7bef0dd 100644 --- a/s2-site/examples/custom/custom-cell/demo/col-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/col-cell.ts @@ -19,7 +19,7 @@ class CustomColCell extends ColCell { new GImage({ style: { ...this.getBBoxByType(), - img, + src: img, }, }), ); diff --git a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts index f316ddd8a5..ff4cd6367a 100644 --- a/s2-site/examples/custom/custom-cell/demo/corner-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/corner-cell.ts @@ -18,7 +18,7 @@ class CustomCornerCell extends CornerCell { new GImage({ style: { ...this.getBBoxByType(), - img, + src: img, }, }), ); diff --git a/s2-site/examples/custom/custom-cell/demo/corner-header.ts b/s2-site/examples/custom/custom-cell/demo/corner-header.ts index 815d83a223..af1f64ead8 100644 --- a/s2-site/examples/custom/custom-cell/demo/corner-header.ts +++ b/s2-site/examples/custom/custom-cell/demo/corner-header.ts @@ -37,7 +37,7 @@ class CustomCornerHeader extends Group { y: 0, width: get(this.node, 'headerConfig.width'), height: get(this.node, 'headerConfig.height'), - img, + src: img, }, }), ); diff --git a/s2-site/examples/custom/custom-cell/demo/data-cell.ts b/s2-site/examples/custom/custom-cell/demo/data-cell.ts index 0b4e022098..b06f56fbf3 100644 --- a/s2-site/examples/custom/custom-cell/demo/data-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/data-cell.ts @@ -19,7 +19,7 @@ class CustomDataCell extends DataCell { new GImage({ style: { ...this.getBBoxByType(), - img, + src: img, }, }), ); diff --git a/s2-site/examples/custom/custom-cell/demo/row-cell.ts b/s2-site/examples/custom/custom-cell/demo/row-cell.ts index 151c241b6a..376fff6be9 100644 --- a/s2-site/examples/custom/custom-cell/demo/row-cell.ts +++ b/s2-site/examples/custom/custom-cell/demo/row-cell.ts @@ -18,7 +18,7 @@ class CustomRowCell extends RowCell { new GImage({ style: { ...this.getBBoxByType(), - img, + src: img, }, }), ); diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx index 199cbfcdfc..10b81b990d 100644 --- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx +++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx @@ -1,6 +1,12 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import { Node, S2DataConfig, TooltipOptions } from '@antv/s2'; +import { + Node, + S2DataConfig, + TooltipOptions, + type SortParams, + type SortMethod, +} from '@antv/s2'; const SortMethodType = { asc: 'asc', @@ -22,14 +28,14 @@ const s2DataConfig: S2DataConfig = { columns: ['type', 'sub_type'], values: ['number'], }, - meta: undefined, + meta: [], data: [], }; const s2Options: SheetComponentOptions = { width: 600, height: 480, - // 关闭默认icon + // 关闭表头默认排序操作 icon showDefaultHeaderActionIcon: false, // 自定义 icon customSVGIcons: [ @@ -38,16 +44,17 @@ const s2Options: SheetComponentOptions = { src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg', }, ], + // 开启 Tooltip, 显示排序菜单 tooltip: { enable: true, }, }; const useDataCfg = () => { - const [res, setRes] = useState({ meta: undefined, data: undefined }); - const [dataCfg, setDataCfg] = useState(s2DataConfig); + const [res, setRes] = await ReactuseState({ meta: [], data: [] }); + const [dataCfg, setDataCfg] = React.useState(s2DataConfig); - useEffect(() => { + React.useEffect(() => { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', ) @@ -55,7 +62,7 @@ const useDataCfg = () => { .then((res) => setRes(res)); }, []); - useEffect(() => { + React.useEffect(() => { setDataCfg({ ...s2DataConfig, meta: res.meta, @@ -68,7 +75,23 @@ const useDataCfg = () => { const App = () => { const dataCfg = useDataCfg(); - const [sortParams, setSortParams] = useState([]); + const [sortParams, setSortParams] = React.useState([]); + + // 执行自定义排序回调 + const handleSortCallback = (meta: Node, key: SortMethod) => { + if (key === SortMethodType.custom) { + const customSortParams: SortParams = [ + { sortFieldId: 'type', sortBy: ['办公用品', '家具'] }, + { sortFieldId: 'city', sortMethod: 'ASC' }, + ]; + + setSortParams(customSortParams); + console.log('可以在这里实现你手动排序的交互和逻辑哟', customSortParams); + } else { + // 使用 S2 提供的组内排序方式 + meta.spreadsheet.groupSortByMethod(key, meta); + } + }; // 设置自定义 `icon` 的展示条件 const headerActionIcons: SheetComponentOptions['headerActionIcons'] = [ @@ -77,14 +100,17 @@ const App = () => { icons: ['customKingIcon'], // 通过 belongsCell + displayCondition 设置 icon 的展示位置 belongsCell: 'colCell', + // 展示条件 displayCondition: (meta) => meta.level === 2, + // 默认是否隐藏 + defaultHide: false, // icon 点击之后的执行函数 onClick: (props) => { const { meta, event } = props; const operator: TooltipOptions['operator'] = { menu: { onClick: ({ key }) => { - handleSortCallback(meta, key); + handleSortCallback(meta, key as SortMethod); meta.spreadsheet.hideTooltip(); }, items: MENUS, @@ -101,22 +127,6 @@ const App = () => { }, ]; - // 执行自定义排序回调 - const handleSortCallback = (meta: Node, key: string) => { - if (key === SortMethodType.custom) { - const sortParams = [ - { sortFieldId: 'type', sortBy: ['办公用品', '家具'] }, - { sortFieldId: 'city', sortMethod: 'ASC' }, - ]; - - setSortParams(sortParams); - console.log('可以在这里实现你手动排序的交互和逻辑哟', sortParams); - } else { - // 使用 S2 提供的组内排序方式 - meta.spreadsheet.groupSortByMethod(key, meta); - } - }; - return (