chore: upgrade trigger to 4.2.1 (#216)

Author: kerm1it

README.md

@@ -182,9 +182,9 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
         </tr>
         <tr>
           <td>destroyTooltipOnHide</td>
-          <td>boolean</td>
+          <td>boolean | { keepParent: boolean }</td>
           <td>false</td>
-          <td>whether destroy tooltip when tooltip is hidden</td>
+          <td>whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it.Parent container will be removed include tooltip when keepParent is true</td>
         </tr>
         <tr>
           <td>id</td>

examples/simple.js

@@ -6,6 +6,20 @@ import { placements } from '../src/placements';
 class Test extends Component {
   state = {
     destroyTooltipOnHide: false,
+    destroyTooltipOptions: [
+      {
+        name: "don't destroy",
+        value: 0,
+      },
+      {
+        name: 'destroy parent',
+        value: 1,
+      },
+      {
+        name: 'keep parent',
+        value: 2,
+      },
+    ],
     placement: 'right',
     trigger: {
       hover: 1,
@@ -60,10 +74,11 @@ class Test extends Component {
     console.log('tooltip', visible); // eslint-disable-line no-console
   };
 
-  onDestroyCheck = () => {
-    this.setState(prevState => ({
-      destroyTooltipOnHide: !prevState.destroyTooltipOnHide,
-    }));
+  onDestroyChange = e => {
+    const { value } = e.target;
+    this.setState({
+      destroyTooltipOnHide: [false, { keepParent: false }, { keepParent: true }][value],
+    });
   };
 
   preventDefault = e => {
@@ -78,10 +93,7 @@ class Test extends Component {
         <div style={{ margin: '10px 20px' }}>
           <label>
             placement:
-            <select
-              value={this.state.placement}
-              onChange={this.onPlacementChange}
-            >
+            <select value={this.state.placement} onChange={this.onPlacementChange}>
               {Object.keys(placements).map(p => (
                 <option key={p} value={p}>
                   {p}
@@ -101,12 +113,14 @@ class Test extends Component {
           </label>
           &nbsp;&nbsp;&nbsp;&nbsp;
           <label>
-            <input
-              type="checkbox"
-              onChange={this.onDestroyCheck}
-              checked={this.state.destroyTooltipOnHide}
-            />
-            destroyTooltipOnHide
+            destroyTooltipOnHide:
+            <select onChange={this.onDestroyChange}>
+              {this.state.destroyTooltipOptions.map(({ name, value }) => (
+                <option key={value} value={value}>
+                  {name}
+                </option>
+              ))}
+            </select>
           </label>
           &nbsp;&nbsp;&nbsp;&nbsp; trigger:
           <label>
@@ -165,17 +179,13 @@ class Test extends Component {
             destroyTooltipOnHide={this.state.destroyTooltipOnHide}
             trigger={Object.keys(this.state.trigger)}
             onVisibleChange={this.onVisibleChange}
-            overlay={
-              <div style={{ height: 50, width: 50 }}>i am a tooltip</div>
-            }
+            overlay={<div style={{ height: 50, width: 50 }}>i am a tooltip</div>}
             align={{
               offset: [this.state.offsetX, this.state.offsetY],
             }}
             transitionName={this.state.transitionName}
           >
-            <div style={{ height: 100, width: 100, border: '1px solid red' }}>
-              trigger
-            </div>
+            <div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
           </Tooltip>
         </div>
       </div>

package.json

@@ -37,7 +37,7 @@
     "test": "father test"
   },
   "dependencies": {
-    "rc-trigger": "^4.0.0"
+    "rc-trigger": "^4.2.1"
   },
   "devDependencies": {
     "@types/jest": "^25.1.0",

src/Tooltip.tsx

@@ -20,7 +20,11 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   getTooltipContainer?: (node: HTMLElement) => HTMLElement;
-  destroyTooltipOnHide?: boolean;
+  destroyTooltipOnHide?:
+    | boolean
+    | {
+        keepParent?: boolean;
+      };
   align?: AlignType;
   arrowContent?: React.ReactNode;
   id?: string;
@@ -67,6 +71,16 @@ const Tooltip = (props: TooltipProps, ref) => {
     ];
   };
 
+  let destroyTooltip = false;
+  let autoDestroy = false;
+  if (typeof destroyTooltipOnHide === 'boolean') {
+    destroyTooltip = destroyTooltipOnHide;
+  } else if (destroyTooltipOnHide && typeof destroyTooltipOnHide === 'object') {
+    const { keepParent } = destroyTooltipOnHide;
+    destroyTooltip = keepParent === true;
+    autoDestroy = keepParent === false;
+  }
+
   return (
     <Trigger
       popupClassName={overlayClassName}
@@ -83,7 +97,8 @@ const Tooltip = (props: TooltipProps, ref) => {
       popupTransitionName={transitionName}
       popupAnimation={animation}
       defaultPopupVisible={defaultVisible}
-      destroyPopupOnHide={destroyTooltipOnHide}
+      destroyPopupOnHide={destroyTooltip}
+      autoDestroy={autoDestroy}
       mouseLeaveDelay={mouseLeaveDelay}
       popupStyle={overlayStyle}
       mouseEnterDelay={mouseEnterDelay}

tests/index.test.js

@@ -64,4 +64,72 @@ describe('rc-tooltip', () => {
       expect(domRef.current).toBeTruthy();
     });
   });
+  describe('destroyTooltipOnHide', () => {
+    const destroyVerifyContent = (wrapper, content) => {
+      wrapper.find('.target').simulate('click');
+      expect(wrapper.find('.x-content').text()).toBe(content);
+      expect(
+        wrapper
+          .find('Trigger')
+          .instance()
+          .getPopupDomNode(),
+      ).toBeTruthy();
+      wrapper.find('.target').simulate('click');
+    };
+    it('default value', () => {
+      const wrapper = mount(
+        <Tooltip
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      wrapper.find('.target').simulate('click');
+      verifyContent(wrapper, 'Tooltip content');
+    });
+    it('should only remove tooltip when value is true', () => {
+      const wrapper = mount(
+        <Tooltip
+          destroyTooltipOnHide
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      destroyVerifyContent(wrapper, 'Tooltip content');
+      expect(wrapper.html()).toBe('<div class="target">Click this</div><div></div>');
+    });
+    it('should only remove tooltip when keepParent is true', () => {
+      const wrapper = mount(
+        <Tooltip
+          destroyTooltipOnHide={{ keepParent: true }}
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      destroyVerifyContent(wrapper, 'Tooltip content');
+      expect(wrapper.html()).toBe('<div class="target">Click this</div><div></div>');
+    });
+    it('should remove tooltip and container when keepParent is false', () => {
+      const wrapper = mount(
+        <Tooltip
+          destroyTooltipOnHide={{ keepParent: false }}
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      destroyVerifyContent(wrapper, 'Tooltip content');
+      expect(wrapper.html()).toBe('<div class="target">Click this</div>');
+    });
+  });
 });