1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import {useCallback, useEffect, useRef, useState} from 'react';
|
14 | import {useLayoutEffect} from './useLayoutEffect';
|
15 | import {useSSRSafeId} from '@react-aria/ssr';
|
16 | import {useValueEffect} from './';
|
17 |
|
18 | let idsUpdaterMap: Map<string, (v: string) => void> = new Map();
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 | export function useId(defaultId?: string): string {
|
25 | let isRendering = useRef(true);
|
26 | isRendering.current = true;
|
27 | let [value, setValue] = useState(defaultId);
|
28 | let nextId = useRef(null);
|
29 |
|
30 | let res = useSSRSafeId(value);
|
31 |
|
32 |
|
33 | let updateValue = (val) => {
|
34 | if (!isRendering.current) {
|
35 | setValue(val);
|
36 | } else {
|
37 | nextId.current = val;
|
38 | }
|
39 | };
|
40 |
|
41 | idsUpdaterMap.set(res, updateValue);
|
42 |
|
43 | useLayoutEffect(() => {
|
44 | isRendering.current = false;
|
45 | }, [updateValue]);
|
46 |
|
47 | useLayoutEffect(() => {
|
48 | let r = res;
|
49 | return () => {
|
50 | idsUpdaterMap.delete(r);
|
51 | };
|
52 | }, [res]);
|
53 |
|
54 | useEffect(() => {
|
55 | let newId = nextId.current;
|
56 | if (newId) {
|
57 | setValue(newId);
|
58 | nextId.current = null;
|
59 | }
|
60 | }, [setValue, updateValue]);
|
61 | return res;
|
62 | }
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | export function mergeIds(idA: string, idB: string): string {
|
69 | if (idA === idB) {
|
70 | return idA;
|
71 | }
|
72 |
|
73 | let setIdA = idsUpdaterMap.get(idA);
|
74 | if (setIdA) {
|
75 | setIdA(idB);
|
76 | return idB;
|
77 | }
|
78 |
|
79 | let setIdB = idsUpdaterMap.get(idB);
|
80 | if (setIdB) {
|
81 | setIdB(idA);
|
82 | return idA;
|
83 | }
|
84 |
|
85 | return idB;
|
86 | }
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | export function useSlotId(depArray: ReadonlyArray<any> = []): string {
|
94 | let id = useId();
|
95 | let [resolvedId, setResolvedId] = useValueEffect(id);
|
96 | let updateId = useCallback(() => {
|
97 | setResolvedId(function *() {
|
98 | yield id;
|
99 |
|
100 | yield document.getElementById(id) ? id : null;
|
101 | });
|
102 | }, [id, setResolvedId]);
|
103 |
|
104 | useLayoutEffect(updateId, [id, updateId, ...depArray]);
|
105 |
|
106 | return resolvedId;
|
107 | }
|