From 097b3f9103c4206ceb794a9ac56b8e8320b8b1f4 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Wed, 14 Jun 2023 10:47:30 -0300 Subject: [PATCH 1/4] feat: `closeOnScroll` and `closeOnResize` props --- src/components/Tooltip/Tooltip.tsx | 15 +++++++++++++++ src/components/Tooltip/TooltipTypes.d.ts | 2 ++ .../TooltipController/TooltipController.tsx | 4 ++++ .../TooltipController/TooltipControllerTypes.d.ts | 2 ++ 4 files changed, 23 insertions(+) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index ab9d2e1b..49479841 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -29,6 +29,8 @@ const Tooltip = ({ noArrow = false, clickable = false, closeOnEsc = false, + closeOnScroll = false, + closeOnResize = false, style: externalStyles, position, afterShow, @@ -300,6 +302,13 @@ const Tooltip = ({ elementRefs.add({ current: anchorById }) } + if (closeOnScroll) { + window.addEventListener('scroll', debouncedHandleHideTooltip) + } + if (closeOnResize) { + window.addEventListener('resize', debouncedHandleHideTooltip) + } + if (closeOnEsc) { window.addEventListener('keydown', handleEsc) } @@ -344,6 +353,12 @@ const Tooltip = ({ }) return () => { + if (closeOnScroll) { + window.removeEventListener('scroll', debouncedHandleHideTooltip) + } + if (closeOnResize) { + window.removeEventListener('resize', debouncedHandleHideTooltip) + } if (shouldOpenOnClick) { window.removeEventListener('click', handleClickOutsideAnchors) } diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 7fd3431c..5d35edc5 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -67,6 +67,8 @@ export interface ITooltip { noArrow?: boolean clickable?: boolean closeOnEsc?: boolean + closeOnScroll?: boolean + closeOnResize?: boolean style?: CSSProperties position?: IPosition isOpen?: boolean diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 376de7ac..0bdb3e72 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -39,6 +39,8 @@ const TooltipController = ({ noArrow = false, clickable = false, closeOnEsc = false, + closeOnScroll = false, + closeOnResize = false, style, position, isOpen, @@ -276,6 +278,8 @@ const TooltipController = ({ noArrow, clickable, closeOnEsc, + closeOnScroll, + closeOnResize, style, position, isOpen, diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 31842e4a..3715817f 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -46,6 +46,8 @@ export interface ITooltipController { noArrow?: boolean clickable?: boolean closeOnEsc?: boolean + closeOnScroll?: boolean + closeOnResize?: boolean style?: CSSProperties position?: IPosition isOpen?: boolean From 9cfd014a560a3a38de094c6a5f5f696b3f1b3b5e Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Wed, 14 Jun 2023 10:50:08 -0300 Subject: [PATCH 2/4] docs: `closeOnScroll` and `closeOnResize` props --- docs/docs/options.mdx | 2 ++ docs/docs/upgrade-guide/changelog-v4-v5.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 16339618..554e8001 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -112,6 +112,8 @@ import { Tooltip } from 'react-tooltip'; | `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | | `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | | `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip | +| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling anywhere on the window will close the tooltip | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip | | `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip | | `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | | `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md index d111d0e3..f911acce 100644 --- a/docs/docs/upgrade-guide/changelog-v4-v5.md +++ b/docs/docs/upgrade-guide/changelog-v4-v5.md @@ -50,6 +50,8 @@ If you run into any problems with the tooltip not updating after changes are mad - [x] `float` - `boolean` - used to achieve V4's `effect="float"` - [x] `hidden` - `boolean` - when set, the tooltip will not show - [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details) +- [x] `closeOnScroll` - `boolean` - when set, the tooltip will close when scrolling anywhere on the window +- [x] `closeOnResize` - `boolean` - when set, the tooltip will close when resizing the window ## `V4` props available in `V5` From bf510a095d505c83bd60303ca34ec1cf68b0454e Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Wed, 14 Jun 2023 10:54:09 -0300 Subject: [PATCH 3/4] style: remove empty line --- src/components/Tooltip/Tooltip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 49479841..20b39b40 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -308,7 +308,6 @@ const Tooltip = ({ if (closeOnResize) { window.addEventListener('resize', debouncedHandleHideTooltip) } - if (closeOnEsc) { window.addEventListener('keydown', handleEsc) } From 80785cc9b7762228c244e19bfdd9206daf1fac70 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Wed, 14 Jun 2023 10:59:51 -0300 Subject: [PATCH 4/4] chore: add `todo` refactoring reminders --- .../TooltipController/TooltipControllerTypes.d.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 3715817f..674225e1 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -45,8 +45,17 @@ export interface ITooltipController { hidden?: boolean noArrow?: boolean clickable?: boolean + /** + * @todo refactor to `hideOnEsc` for naming consistency + */ closeOnEsc?: boolean + /** + * @todo refactor to `hideOnScroll` for naming consistency + */ closeOnScroll?: boolean + /** + * @todo refactor to `hideOnResize` for naming consistency + */ closeOnResize?: boolean style?: CSSProperties position?: IPosition