Skip to content

Commit 5cabb44

Browse files
gabrieljablonskigabrieljablonski
committed
chore: remove deprecated anchorById and refactor anchorsBySelect 
1 parent 59c9d07 commit 5cabb44

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
@@ -29,7 +29,6 @@ const Tooltip = ({
2929
className,
3030
classNameArrow,
3131
variant = 'dark',
32-
anchorId,
3332
anchorSelect,
3433
place = 'top',
3534
offset = 10,
@@ -86,7 +85,7 @@ const Tooltip = ({
8685
const wasShowing = useRef(false)
8786
const lastFloatPosition = useRef<IPosition | null>(null)
8887
const hoveringTooltip = useRef(false)
89-
const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])
88+
const [anchorElements, setAnchorElements] = useState<HTMLElement[]>([])
9089
const mounted = useRef(false)
9190

9291
/**
@@ -364,9 +363,7 @@ const Tooltip = ({
364363
if (tooltipRef.current?.contains(target)) {
365364
return
366365
}
367-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
368-
const anchors = [anchorById, ...anchorsBySelect]
369-
if (anchors.some((anchor) => anchor?.contains(target))) {
366+
if (anchorElements.some((anchor) => anchor?.contains(target))) {
370367
return
371368
}
372369
handleShow(false)
@@ -449,16 +446,14 @@ const Tooltip = ({
449446
])
450447

451448
useEffect(() => {
452-
const elementRefs = new Set<HTMLElement>()
453-
454-
anchorsBySelect.forEach((anchor) => {
455-
elementRefs.add(anchor)
456-
})
457-
458-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
459-
if (anchorById) {
460-
elementRefs.add(anchorById)
461-
}
449+
/**
450+
* TODO(V6): break this effect down into callbacks for clarity
451+
* - `handleKeyboardEvents()`
452+
* - `handleMouseEvents()`
453+
* - `handleGlobalCloseEvents()`
454+
* - `handleAnchorEvents()`
455+
* - ?
456+
*/
462457

463458
const handleScrollResize = () => {
464459
handleShow(false)
@@ -578,8 +573,8 @@ const Tooltip = ({
578573
}
579574

580575
enabledEvents.forEach(({ event, listener }) => {
581-
elementRefs.forEach((ref) => {
582-
ref.addEventListener(event, listener)
576+
anchorElements.forEach((anchor) => {
577+
anchor.addEventListener(event, listener)
583578
})
584579
})
585580

@@ -605,8 +600,8 @@ const Tooltip = ({
605600
tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
606601
}
607602
enabledEvents.forEach(({ event, listener }) => {
608-
elementRefs.forEach((ref) => {
609-
ref.removeEventListener(event, listener)
603+
anchorElements.forEach((anchor) => {
604+
anchor.removeEventListener(event, listener)
610605
})
611606
})
612607
}
@@ -618,7 +613,7 @@ const Tooltip = ({
618613
activeAnchor,
619614
updateTooltipPosition,
620615
rendered,
621-
anchorsBySelect,
616+
anchorElements,
622617
// the effect uses the `actual*Events` objects, but this should work
623618
openEvents,
624619
closeEvents,
@@ -711,7 +706,7 @@ const Tooltip = ({
711706
}
712707
})
713708
if (newAnchors.length || removedAnchors.length) {
714-
setAnchorsBySelect((anchors) => [
709+
setAnchorElements((anchors) => [
715710
...anchors.filter((anchor) => !removedAnchors.includes(anchor)),
716711
...newAnchors,
717712
])
@@ -750,17 +745,15 @@ const Tooltip = ({
750745
}, [content, contentWrapperRef?.current])
751746

752747
useEffect(() => {
753-
const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
754-
const anchors = [...anchorsBySelect, anchorById]
755-
if (!activeAnchor || !anchors.includes(activeAnchor)) {
748+
if (!activeAnchor || !anchorElements.includes(activeAnchor)) {
756749
/**
757750
* if there is no active anchor,
758751
* or if the current active anchor is not amongst the allowed ones,
759752
* reset it
760753
*/
761-
setActiveAnchor(anchorsBySelect[0] ?? anchorById)
754+
setActiveAnchor(anchorElements[0] ?? null)
762755
}
763-
}, [anchorId, anchorsBySelect, activeAnchor])
756+
}, [anchorElements, activeAnchor])
764757

765758
useEffect(() => {
766759
if (defaultIsOpen) {
@@ -782,10 +775,10 @@ const Tooltip = ({
782775
}
783776
try {
784777
const anchors = Array.from(document.querySelectorAll<HTMLElement>(selector))
785-
setAnchorsBySelect(anchors)
778+
setAnchorElements(anchors)
786779
} catch {
787780
// warning was already issued in the controller
788-
setAnchorsBySelect([])
781+
setAnchorElements([])
789782
}
790783
}, [id, anchorSelect, imperativeOptions?.anchorSelect])
791784

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

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

‎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.replace(/'/g, "\\'")}']`
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)