Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a8d49af

Browse files
feat: closeOnEsc prop
1 parent bd89e89 commit a8d49af

File tree

4 files changed

+23
-2
lines changed

4 files changed

+23
-2
lines changed

‎src/components/Tooltip/Tooltip.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const Tooltip = ({
2626
float = false,
2727
noArrow = false,
2828
clickable = false,
29+
closeOnEsc = false,
2930
style: externalStyles,
3031
position,
3132
afterShow,
@@ -190,6 +191,13 @@ const Tooltip = ({
190191
handleShow(false)
191192
}
192193

194+
const handleEsc = (event: KeyboardEvent) => {
195+
if (event.key !== 'Escape') {
196+
return
197+
}
198+
handleShow(false)
199+
}
200+
193201
// debounce handler to prevent call twice when
194202
// mouse enter and focus events being triggered toggether
195203
const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
@@ -210,6 +218,10 @@ const Tooltip = ({
210218
return () => null
211219
}
212220

221+
if (closeOnEsc) {
222+
window.addEventListener('keydown', handleEsc)
223+
}
224+
213225
const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
214226

215227
if (events.find((event: string) => event === 'click')) {
@@ -252,7 +264,12 @@ const Tooltip = ({
252264
})
253265

254266
return () => {
255-
window.removeEventListener('click', handleClickOutsideAnchor)
267+
if (events.find((event: string) => event === 'click')) {
268+
window.removeEventListener('click', handleClickOutsideAnchor)
269+
}
270+
if (closeOnEsc) {
271+
window.removeEventListener('keydown', handleEsc)
272+
}
256273
if (clickable) {
257274
tooltipRef.current?.removeEventListener('mouseenter', handleMouseEnterTooltip)
258275
tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
@@ -263,7 +280,7 @@ const Tooltip = ({
263280
})
264281
})
265282
}
266-
}, [anchorRefs, activeAnchor, anchorId, events, delayHide, delayShow])
283+
}, [anchorRefs, activeAnchor, closeOnEsc,anchorId, events, delayHide, delayShow])
267284

268285
useEffect(() => {
269286
if (position) {

‎src/components/Tooltip/TooltipTypes.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface ITooltip {
5353
float?: boolean
5454
noArrow?: boolean
5555
clickable?: boolean
56+
closeOnEsc?: boolean
5657
style?: CSSProperties
5758
position?: IPosition
5859
isOpen?: boolean

‎src/components/TooltipController/TooltipController.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const TooltipController = ({
3232
float = false,
3333
noArrow = false,
3434
clickable = false,
35+
closeOnEsc = false,
3536
style,
3637
position,
3738
isOpen,
@@ -187,6 +188,7 @@ const TooltipController = ({
187188
float: tooltipFloat,
188189
noArrow,
189190
clickable,
191+
closeOnEsc,
190192
style,
191193
position,
192194
isOpen,

‎src/components/TooltipController/TooltipControllerTypes.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface ITooltipController {
3131
float?: boolean
3232
noArrow?: boolean
3333
clickable?: boolean
34+
closeOnEsc?: boolean
3435
style?: CSSProperties
3536
position?: IPosition
3637
isOpen?: boolean

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /