Skip to content

Commit 00a17e0

Browse files
gabrieljablonskidanielbarion
gabrieljablonski
authored and
danielbarion
committed
chore: remove deprecated anchorById and refactor anchorsBySelect 
1 parent 46a64e3 commit 00a17e0

File tree

5 files changed

+43
-90
lines changed

5 files changed

+43
-90
lines changed

‎src/App.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,30 @@ function App() {
4747
>
4848
My button
4949
</button>
50-
<Tooltip place="bottom" anchorId={anchorId} isOpen={isDarkOpen} setIsOpen={setIsDarkOpen} />
50+
<Tooltip
51+
place="bottom"
52+
anchorSelect={`#${anchorId}`}
53+
isOpen={isDarkOpen}
54+
setIsOpen={setIsDarkOpen}
55+
/>
5156
<Tooltip
5257
place="top"
5358
variant="success"
54-
anchorId="button2"
59+
anchorSelect="#button2"
5560
isOpen={isDarkOpen}
5661
setIsOpen={setIsDarkOpen}
5762
/>
5863
<Tooltip
5964
place="top"
6065
variant="info"
61-
anchorId="button3"
66+
anchorSelect="#button3"
6267
isOpen={isDarkOpen}
6368
setIsOpen={setIsDarkOpen}
6469
/>
6570
<Tooltip
6671
place="right"
6772
variant="info"
68-
anchorId="button3"
73+
anchorSelect="#button3"
6974
content="My big tooltip content"
7075
isOpen={isDarkOpen}
7176
setIsOpen={setIsDarkOpen}
@@ -126,7 +131,7 @@ function App() {
126131
Hover me!
127132
</div>
128133
<Tooltip
129-
anchorId="floatAnchor"
134+
anchorSelect="#floatAnchor"
130135
content={
131136
toggle
132137
? 'This is a float tooltip with a very very large content string'
@@ -150,7 +155,7 @@ function App() {
150155
Click me!
151156
</div>
152157
<Tooltip
153-
anchorId="onClickAnchor"
158+
anchorSelect="#onClickAnchor"
154159
content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
155160
events={['click']}
156161
position={position}
@@ -182,7 +187,7 @@ function App() {
182187
<button id="buttonCallbacks">Check the dev console</button>
183188
<Tooltip
184189
place="bottom"
185-
anchorId="buttonCallbacks"
190+
anchorSelect="#buttonCallbacks"
186191
// eslint-disable-next-line no-console
187192
afterShow={() => console.log('After show')}
188193
// eslint-disable-next-line no-console
@@ -194,7 +199,7 @@ function App() {
194199
<Tooltip
195200
events={['click']}
196201
place="bottom"
197-
anchorId="buttonCallbacksClick"
202+
anchorSelect="#buttonCallbacksClick"
198203
// eslint-disable-next-line no-console
199204
afterShow={() => console.log('After show with click')}
200205
// eslint-disable-next-line no-console
@@ -206,7 +211,7 @@ function App() {
206211
<Tooltip
207212
delayShow={1000}
208213
place="bottom"
209-
anchorId="buttonCallbacksDelay"
214+
anchorSelect="#buttonCallbacksDelay"
210215
// eslint-disable-next-line no-console
211216
afterShow={() => console.log('After show with delay')}
212217
// eslint-disable-next-line no-console
@@ -238,7 +243,7 @@ function App() {
238243

239244
<Tooltip
240245
place="top"
241-
anchorId="withoutCustomMiddleware"
246+
anchorSelect="#withoutCustomMiddleware"
242247
content="Showing tooltip with default middlewares"
243248
positionStrategy="fixed"
244249
/>
@@ -267,7 +272,7 @@ function App() {
267272

268273
<Tooltip
269274
place="top"
270-
anchorId="withCustomMiddleware"
275+
anchorSelect="#withCustomMiddleware"
271276
content="Showing tooltip with custom inline middleware"
272277
positionStrategy="fixed"
273278
middlewares={[inline(), offset(10)]}

‎src/components/Tooltip/Tooltip.tsx

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ const Tooltip = ({
2828
className,
2929
classNameArrow,
3030
variant = 'dark',
31-
anchorId,
3231
anchorSelect,
3332
place = 'top',
3433
offset = 10,
@@ -85,7 +84,7 @@ const Tooltip = ({
8584
const wasShowing = useRef(false)
8685
const lastFloatPosition = useRef<IPosition | null>(null)
8786
const hoveringTooltip = useRef(false)
88-
const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])
87+
const [anchorElements, setAnchorElements] = useState<HTMLElement[]>([])
8988
const mounted = useRef(false)
9089

9190
/**
@@ -369,9 +368,7 @@ const Tooltip = ({
369368
if (tooltipRef.current?.contains(target)) {
370369
return
371370
}
372-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
373-
const anchors = [anchorById, ...anchorsBySelect]
374-
if (anchors.some((anchor) => anchor?.contains(target))) {
371+
if (anchorElements.some((anchor) => anchor?.contains(target))) {
375372
return
376373
}
377374
handleShow(false)
@@ -456,16 +453,14 @@ const Tooltip = ({
456453
])
457454

458455
useEffect(() => {
459-
const elementRefs = new Set<HTMLElement>()
460-
461-
anchorsBySelect.forEach((anchor) => {
462-
elementRefs.add(anchor)
463-
})
464-
465-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
466-
if (anchorById) {
467-
elementRefs.add(anchorById)
468-
}
456+
/**
457+
* TODO(V6): break this effect down into callbacks for clarity
458+
* - `handleKeyboardEvents()`
459+
* - `handleMouseEvents()`
460+
* - `handleGlobalCloseEvents()`
461+
* - `handleAnchorEvents()`
462+
* - ?
463+
*/
469464

470465
const handleScrollResize = () => {
471466
handleShow(false)
@@ -585,8 +580,8 @@ const Tooltip = ({
585580
}
586581

587582
enabledEvents.forEach(({ event, listener }) => {
588-
elementRefs.forEach((ref) => {
589-
ref.addEventListener(event, listener)
583+
anchorElements.forEach((anchor) => {
584+
anchor.addEventListener(event, listener)
590585
})
591586
})
592587

@@ -612,8 +607,8 @@ const Tooltip = ({
612607
tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
613608
}
614609
enabledEvents.forEach(({ event, listener }) => {
615-
elementRefs.forEach((ref) => {
616-
ref.removeEventListener(event, listener)
610+
anchorElements.forEach((anchor) => {
611+
anchor.removeEventListener(event, listener)
617612
})
618613
})
619614
}
@@ -625,7 +620,7 @@ const Tooltip = ({
625620
activeAnchor,
626621
updateTooltipPosition,
627622
rendered,
628-
anchorsBySelect,
623+
anchorElements,
629624
// the effect uses the `actual*Events` objects, but this should work
630625
openEvents,
631626
closeEvents,
@@ -722,7 +717,7 @@ const Tooltip = ({
722717
}
723718
})
724719
if (newAnchors.length || removedAnchors.length) {
725-
setAnchorsBySelect((anchors) => [
720+
setAnchorElements((anchors) => [
726721
...anchors.filter((anchor) => !removedAnchors.includes(anchor)),
727722
...newAnchors,
728723
])
@@ -761,17 +756,15 @@ const Tooltip = ({
761756
}, [content, contentWrapperRef?.current])
762757

763758
useEffect(() => {
764-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
765-
const anchors = [...anchorsBySelect, anchorById]
766-
if (!activeAnchor || !anchors.includes(activeAnchor)) {
759+
if (!activeAnchor || !anchorElements.includes(activeAnchor)) {
767760
/**
768761
* if there is no active anchor,
769762
* or if the current active anchor is not amongst the allowed ones,
770763
* reset it
771764
*/
772-
setActiveAnchor(anchorsBySelect[0] ?? anchorById)
765+
setActiveAnchor(anchorElements[0] ?? null)
773766
}
774-
}, [anchorId, anchorsBySelect, activeAnchor])
767+
}, [anchorElements, activeAnchor])
775768

776769
useEffect(() => {
777770
if (defaultIsOpen) {
@@ -797,10 +790,10 @@ const Tooltip = ({
797790
}
798791
try {
799792
const anchors = Array.from(document.querySelectorAll<HTMLElement>(selector))
800-
setAnchorsBySelect(anchors)
793+
setAnchorElements(anchors)
801794
} catch {
802795
// warning was already issued in the controller
803-
setAnchorsBySelect([])
796+
setAnchorElements([])
804797
}
805798
}, [id, anchorSelect, imperativeOptions?.anchorSelect])
806799

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,6 @@ export interface ITooltip {
115115
offset?: number
116116
id?: string
117117
variant?: VariantType
118-
/**
119-
* @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
120-
* See https://react-tooltip.com/docs/getting-started
121-
*/
122-
anchorId?: string
123118
anchorSelect?: string
124119
wrapper: WrapperType
125120
/**

‎src/components/TooltipController/TooltipController.tsx

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
1919
(
2020
{
2121
id,
22-
anchorId,
2322
anchorSelect,
2423
content,
2524
render,
@@ -201,50 +200,17 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
201200
}, [])
202201

203202
useEffect(() => {
204-
const elementRefs = new Set<HTMLElement>()
205-
206-
let selector = anchorSelect
207-
if (!selector && id) {
208-
selector = `[data-tooltip-id='${id}']`
209-
}
210-
if (selector) {
211-
try {
212-
const anchorsBySelect = document.querySelectorAll<HTMLElement>(selector)
213-
anchorsBySelect.forEach((anchor) => {
214-
elementRefs.add(anchor)
215-
})
216-
} catch {
217-
/* c8 ignore start */
218-
if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') {
219-
// eslint-disable-next-line no-console
220-
console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`)
221-
}
222-
/* c8 ignore end */
223-
}
224-
}
225-
226-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
227-
if (anchorById) {
228-
elementRefs.add(anchorById)
229-
}
230-
231-
if (!elementRefs.size) {
232-
return () => null
233-
}
234-
235-
const anchorElement = activeAnchor ?? anchorById
236-
237203
const observerCallback: MutationCallback = (mutationList) => {
238204
mutationList.forEach((mutation) => {
239205
if (
240-
!anchorElement ||
206+
!activeAnchor ||
241207
mutation.type !== 'attributes' ||
242208
!mutation.attributeName?.startsWith('data-tooltip-')
243209
) {
244210
return
245211
}
246212
// make sure to get all set attributes, since all unset attributes are reset
247-
const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
213+
const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor)
248214
applyAllDataAttributesFromAnchorElement(dataAttributes)
249215
})
250216
}
@@ -256,18 +222,18 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
256222
// to stay watching `data-attributes-*` from anchor element
257223
const observerConfig = { attributes: true, childList: false, subtree: false }
258224

259-
if (anchorElement) {
260-
const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
225+
if (activeAnchor) {
226+
const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor)
261227
applyAllDataAttributesFromAnchorElement(dataAttributes)
262228
// Start observing the target node for configured mutations
263-
observer.observe(anchorElement, observerConfig)
229+
observer.observe(activeAnchor, observerConfig)
264230
}
265231

266232
return () => {
267233
// Remove the observer when the tooltip is destroyed
268234
observer.disconnect()
269235
}
270-
}, [activeAnchor, anchorId, anchorSelect])
236+
}, [activeAnchor, anchorSelect])
271237

272238
useEffect(() => {
273239
/* c8 ignore start */
@@ -315,7 +281,6 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
315281
const props: ITooltip = {
316282
forwardRef: ref,
317283
id,
318-
anchorId,
319284
anchorSelect,
320285
className: clsx(className, tooltipClassName),
321286
classNameArrow,

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,6 @@ export interface ITooltipController {
2323
offset?: number
2424
id?: string
2525
variant?: VariantType
26-
/**
27-
* @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
28-
* See https://react-tooltip.com/docs/getting-started
29-
*/
30-
anchorId?: string
3126
anchorSelect?: string
3227
wrapper?: WrapperType
3328
children?: ChildrenType

0 commit comments

Comments
 (0)