custom callback content
+ );
+
+ s2.showTooltip({
+ position: {
+ x: 10,
+ y: 10,
+ },
+ content: () => content,
+ });
+
+ expect(
+ s2.tooltip.container.querySelector('#custom-callback-content'),
+ ).toBeTruthy();
+ });
+
+ // https://github.com/antvis/S2/issues/852
+ test('should not show unique key prop warning', async () => {
+ await sleep(1000);
+
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+ const content = (
+
+
+ );
+
+ Array.from({ length: 3 }).forEach(() => {
+ s2.showTooltip({
+ position: {
+ x: 10,
+ y: 10,
+ },
+ content,
+ });
+ });
+
+ expect(errorSpy).not.toThrowError();
+ expect(warnSpy).not.toThrowError();
+
+ errorSpy.mockRestore();
+ warnSpy.mockRestore();
+ });
});
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
index bb278b672c..8e8da152c8 100644
--- a/packages/s2-react/playground/config.ts
+++ b/packages/s2-react/playground/config.ts
@@ -1,5 +1,6 @@
-import { S2DataConfig, S2Options } from '@antv/s2';
-import { SliderSingleProps } from 'antd';
+import type { S2DataConfig, S2Options } from '@antv/s2';
+import type { SliderSingleProps } from 'antd';
+import React from 'react';
import { data, totalData, meta } from '../__tests__/data/mock-dataset.json';
export const tableSheetDataCfg: Partialcontent1
+ content2
+ 自定义 Tooltip
;
+const CustomTooltip = () => (
+
+ 自定义 Tooltip
+);
-const ColTooltip = 1
+ 2
+ custom colTooltip
;
+const CustomColTooltip = () => custom colTooltip
;
const ActionIconTooltip = ({ name }) => {name} Tooltip
;
@@ -65,7 +70,7 @@ function MainLayout() {
const [showPagination, setShowPagination] = React.useState(false);
const [showTotals, setShowTotals] = React.useState(false);
const [themeName, setThemeName] = React.useState
@@ -522,9 +529,12 @@ function MainLayout() {
header={{
title: 'Title',
description: 'description',
- extra: [],
+ extra: ,
}}
onColCellClick={onColCellClick}
+ onRowCellClick={logHandler('onRowCellClick')}
+ onCornerCellClick={logHandler('onCornerCellClick')}
+ onDataCellClick={logHandler('onDataCellClick')}
/>
)}
diff --git a/packages/s2-react/src/components/sheets/base-sheet/index.tsx b/packages/s2-react/src/components/sheets/base-sheet/index.tsx
index 5c89fad683..7058adf21a 100644
--- a/packages/s2-react/src/components/sheets/base-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/base-sheet/index.tsx
@@ -1,6 +1,6 @@
import { Event as GEvent } from '@antv/g-canvas';
import { Spin } from 'antd';
-import { forIn, isEmpty, isFunction, merge } from 'lodash';
+import { forIn, isEmpty, isFunction } from 'lodash';
import React, { memo, StrictMode, useEffect, useRef, useState } from 'react';
import {
S2Event,
@@ -19,6 +19,7 @@ import {
getBaseCellData,
getTooltipOptions,
getSafetyDataConfig,
+ customMerge,
} from '@antv/s2';
import { DrillDown } from '@/components/drill-down';
import { Header } from '@/components/header';
@@ -49,12 +50,27 @@ export const BaseSheet: React.FC...
+
+const s2options = {
+ tooltip: {
+ content: (cell) => {
+ const meta = cell.getMeta()
+ console.log('当前单元格信息:', meta)
+ return colTooltip
);
-const CellTooltipContent = (
- cellTooltip
+const DataTooltipContent = (
+ dataTooltip
);
const s2options = {
tooltip: {
- content: col cell tooltip
;
+
+const onRowCellHover = ({ event, viewMeta }) => {
+ viewMeta.spreadsheet.tooltip.show({
+ position: {
+ x: event.clientX,
+ y: event.clientY,
+ },
+ content:
@@ -182,7 +180,6 @@ const s2options = {
```ts
import { PivotSheet } from '@antv/s2';
-import '@antv/s2/dist/s2.min.css'
const container = document.getElementById('container');
@@ -195,26 +192,55 @@ s2.render()
+### 📦 Packages
+
+| Package | Latest | Beta | Size | Download |
+|---|---|---|---| --- |
+| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core) |  |  |  |  |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) |  |  |  |  |
+
## 👤 Author
[**@AntV**](https://github.com/orgs/antvis/people)
## 🤝 参与贡献
-初次使用 S2，建议从[快速上手](zh/docs/manual/getting-started)教程开始了解，如果有遇到问题或不满足的需求，可以移步至[issue](https://github.com/antvis/s2/issues) 区给我们留下建议。
-
-提交代码前请参考我们的[贡献指南](zh/docs/manual/contribution)
-
```bash
git clone git@github.com:antvis/S2.git
cd S2
-yarn
+# 安装依赖
+yarn # 或者 yarn bootstrap
+# 调试 s2-core
yarn core:start
+
+# 调试 s2-react
+yarn react:playground
+
+# 单元测试
+yarn test
+
+# 打包
+yarn build
+
+# 代码风格和类型检测
+yarn lint
+
+# 本地启动官网
+yarn site:bootstrap
+yarn site:start
```
+## 📧 联系我们
+
+
+
+## 👬 Contributors
+
+
+
## 📄 License
MIT@[AntV](https://github.com/antvis).
diff --git a/s2-site/examples/interaction/custom/demo/meta.json b/s2-site/examples/interaction/custom/demo/meta.json
index e5aca52304..8222568fad 100644
--- a/s2-site/examples/interaction/custom/demo/meta.json
+++ b/s2-site/examples/interaction/custom/demo/meta.json
@@ -11,6 +11,14 @@
"en": "Double click hide columns"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ukpGbSUqFz/double-click.gif"
+ },
+ {
+ "filename": "row-col-hover-tooltip.ts",
+ "title": {
+ "zh": "行列头悬停显示 tooltip",
+ "en": "Show tooltip when hover row or column"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/c%24ICO1qvb/Kapture%2525202021-12-03%252520at%25252016.30.11.gif"
}
]
}
diff --git a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
new file mode 100644
index 0000000000..d38f9b5849
--- /dev/null
+++ b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
@@ -0,0 +1,56 @@
+import { PivotSheet, BaseEvent, S2Event } from '@antv/s2';
+
+class RowColumnHoverTooltipInteraction extends BaseEvent {
+ bindEvents() {
+ // 行头hover
+ this.spreadsheet.on(S2Event.ROW_CELL_HOVER, (event) => {
+ this.showTooltip(event);
+ });
+ // 列头hover
+ this.spreadsheet.on(S2Event.COL_CELL_HOVER, (event) => {
+ this.showTooltip(event);
+ });
+ }
+
+ showTooltip(event) {
+ const cell = this.spreadsheet.getCell(event.target);
+ const meta = cell.getMeta();
+ const content = meta.value;
+
+ this.spreadsheet.tooltip.show({
+ position: {
+ x: event.clientX,
+ y: event.clientY,
+ },
+ content,
+ });
+ }
+}
+
+fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+ .then((res) => res.json())
+ .then((dataCfg) => {
+ const container = document.getElementById('container');
+
+ const s2Options = {
+ width: 600,
+ height: 480,
+ tooltip: {
+ showTooltip: true,
+ },
+ interaction: {
+ customInteractions: [
+ {
+ key: 'RowColumnHoverTooltipInteraction',
+ interaction: RowColumnHoverTooltipInteraction,
+ },
+ ],
+ },
+ };
+
+ const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+ s2.render();
+ });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
similarity index 99%
rename from s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx
rename to s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index 1c371ab942..550dfe3ca5 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -39,6 +39,7 @@ fetch(
spreadsheet.hideTooltip();
}
};
+
ReactDOM.render(
res.json())
+ .then((dataCfg) => {
+ const s2Options = {
+ width: 600,
+ height: 480,
+ tooltip: {
+ showTooltip: true,
+ },
+ };
+
+ const CustomColCellTooltip = () =>
+### 📦 Packages
+
+| Package | Latest | Beta | Size | Download |
+|---|---|---|---| --- |
+| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core) |  |  |  |  |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) |  |  |  |  |
+
## 👤 Author
[**@AntV**](https://github.com/orgs/antvis/people)
## 🤝 参与贡献
-初次使用 S2，建议从[快速上手](zh/docs/manual/getting-started)教程开始了解，如果有遇到问题或不满足的需求，可以移步至[issue](https://github.com/antvis/s2/issues) 区给我们留下建议。
-
-提交代码前请参考我们的[贡献指南](zh/docs/manual/contribution)
-
```bash
git clone git@github.com:antvis/S2.git
cd S2
-yarn
+# 安装依赖
+yarn # 或者 yarn bootstrap
+# 调试 s2-core
yarn core:start
+
+# 调试 s2-react
+yarn react:playground
+
+# 单元测试
+yarn test
+
+# 打包
+yarn build
+
+# 代码风格和类型检测
+yarn lint
+
+# 本地启动官网
+yarn site:bootstrap
+yarn site:start
```
+## 📧 联系我们
+
+
+
+## 👬 Contributors
+
+
+
## 📄 License
MIT@[AntV](https://github.com/antvis).
diff --git a/s2-site/examples/interaction/custom/demo/meta.json b/s2-site/examples/interaction/custom/demo/meta.json
index e5aca52304..8222568fad 100644
--- a/s2-site/examples/interaction/custom/demo/meta.json
+++ b/s2-site/examples/interaction/custom/demo/meta.json
@@ -11,6 +11,14 @@
"en": "Double click hide columns"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ukpGbSUqFz/double-click.gif"
+ },
+ {
+ "filename": "row-col-hover-tooltip.ts",
+ "title": {
+ "zh": "行列头悬停显示 tooltip",
+ "en": "Show tooltip when hover row or column"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/c%24ICO1qvb/Kapture%2525202021-12-03%252520at%25252016.30.11.gif"
}
]
}
diff --git a/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
new file mode 100644
index 0000000000..d38f9b5849
--- /dev/null
+++ b/s2-site/examples/interaction/custom/demo/row-col-hover-tooltip.ts
@@ -0,0 +1,56 @@
+import { PivotSheet, BaseEvent, S2Event } from '@antv/s2';
+
+class RowColumnHoverTooltipInteraction extends BaseEvent {
+ bindEvents() {
+ // 行头hover
+ this.spreadsheet.on(S2Event.ROW_CELL_HOVER, (event) => {
+ this.showTooltip(event);
+ });
+ // 列头hover
+ this.spreadsheet.on(S2Event.COL_CELL_HOVER, (event) => {
+ this.showTooltip(event);
+ });
+ }
+
+ showTooltip(event) {
+ const cell = this.spreadsheet.getCell(event.target);
+ const meta = cell.getMeta();
+ const content = meta.value;
+
+ this.spreadsheet.tooltip.show({
+ position: {
+ x: event.clientX,
+ y: event.clientY,
+ },
+ content,
+ });
+ }
+}
+
+fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+ .then((res) => res.json())
+ .then((dataCfg) => {
+ const container = document.getElementById('container');
+
+ const s2Options = {
+ width: 600,
+ height: 480,
+ tooltip: {
+ showTooltip: true,
+ },
+ interaction: {
+ customInteractions: [
+ {
+ key: 'RowColumnHoverTooltipInteraction',
+ interaction: RowColumnHoverTooltipInteraction,
+ },
+ ],
+ },
+ };
+
+ const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+ s2.render();
+ });
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
similarity index 99%
rename from s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx
rename to s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
index 1c371ab942..550dfe3ca5 100644
--- a/s2-site/examples/react-component/tooltip/demo/custom-interaction-tooltip.tsx
+++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx
@@ -39,6 +39,7 @@ fetch(
spreadsheet.hideTooltip();
}
};
+
ReactDOM.render(
col cell tooltip
;
+ const CustomRowCellTooltip = () => row cell tooltip
;
+ const CustomDataCellTooltip = () => data cell tooltip
;
+
+ const onColCellHover = ({ event, viewMeta }) => {
+ viewMeta.spreadsheet.tooltip.show({
+ position: {
+ x: event.clientX,
+ y: event.clientY,
+ },
+ content: