fix(tooltip): 修复更新数据时, tooltip 默认展示不更新 (#1403)

antvis · Mar 21, 2022 · 12d1d54 · 12d1d54
1 parent fcea130
commit 12d1d54
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx
@@ -4,6 +4,7 @@ import Component from '../../base/component';
 
 export default (View) => {
   return class Tooltip extends Component {
+    isPressEvent = false;
     constructor(props) {
       super(props);
       this.state = {
@@ -23,13 +24,27 @@ export default (View) => {
     }
 
     didMount() {
+      this._initShow();
+      this._initEvent();
+    }
+
+    didUpdate() {
+      // 主动触发的 press 等事件不需要重新执行 didUpdate
+      if (this.isPressEvent) {
+        // 重置
+        this.isPressEvent = false;
+        return;
+      }
+      this._initShow();
+    }
+
+    _initShow() {
       const { props } = this;
       const { chart, defaultItem } = props;
       if (defaultItem) {
         const point = chart.getPosition(defaultItem);
         this.show(point);
       }
-      this._initEvent();
     }
 
     _initEvent() {
@@ -39,6 +54,7 @@ export default (View) => {
 
       canvas.on(triggerOn, (ev) => {
         const { points } = ev;
+        this.isPressEvent = true;
         this.show(points[0]);
       });
 

diff --git a/.../tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-默认展示更新-1-snap.png b/.../tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-默认展示更新-1-snap.png
diff --git a/packages/f2/test/components/tooltip/tooltip.test.tsx b/packages/f2/test/components/tooltip/tooltip.test.tsx
@@ -1,4 +1,4 @@
-import { jsx, Canvas, Chart, Axis, Interval, Tooltip, Legend } from '../../../src';
+import { jsx, Canvas, Chart, Axis, Line, Interval, Tooltip, Legend } from '../../../src';
 import { createContext, delay, gestureSimulator } from '../../util';
 
 const data = [
@@ -164,6 +164,37 @@ describe('tooltip', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('Tooltip 默认展示更新', async () => {
+    const context = createContext('Tooltip 默认展示更新');
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="genre" />
+          <Axis field="sold" />
+          <Legend />
+          <Interval x="genre" y="sold" color="genre" />
+          <Tooltip alwaysShow={true} defaultItem={data[0]} showCrosshairs />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+    const newChart = (
+      <Chart data={data}>
+        <Axis field="genre" />
+        <Axis field="sold" />
+        <Legend />
+        <Interval x="genre" y="sold" color="genre" />
+        <Tooltip alwaysShow={true} defaultItem={data[1]} showCrosshairs />
+      </Chart>
+    );
+
+    canvas.update({children: newChart});          
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('Tooltip 不触发回调的情形', async () => {
     const context = createContext('Tooltip 不触发回调的情形');
     const onChangeMockCallback = jest.fn();