1 | import * as React from 'react';
|
2 | interface RegisterItemReturnValue<Key> {
|
3 | /**
|
4 | * The id of the item.
|
5 | */
|
6 | id: Key;
|
7 | /**
|
8 | * A function that deregisters the item.
|
9 | */
|
10 | deregister: () => void;
|
11 | }
|
12 | export type KeyGenerator<Key> = (existingKeys: Set<Key>) => Key;
|
13 | export type CompoundComponentContextValue<Key, Subitem> = {
|
14 | /**
|
15 | * Registers an item with the parent.
|
16 | * This should be called during the effect phase of the child component.
|
17 | * The `itemMetadata` should be a stable reference (for example a memoized object), to avoid unnecessary re-registrations.
|
18 | *
|
19 | * @param id Id of the item or A function that generates a unique id for the item.
|
20 | * It is called with the set of the ids of all the items that have already been registered.
|
21 | * Return `existingKeys.size` if you want to use the index of the new item as the id..
|
22 | * @param itemMetadata Arbitrary metadata to pass to the parent component.
|
23 | */
|
24 | registerItem: (id: Key | KeyGenerator<Key>, item: Subitem) => RegisterItemReturnValue<Key>;
|
25 | /**
|
26 | * Returns the 0-based index of the item in the parent component's list of registered items.
|
27 | *
|
28 | * @param id id of the item.
|
29 | */
|
30 | getItemIndex: (id: Key) => number;
|
31 | /**
|
32 | * The total number of items registered with the parent.
|
33 | */
|
34 | totalSubitemCount: number;
|
35 | };
|
36 | export declare const CompoundComponentContext: React.Context<CompoundComponentContextValue<any, any> | null>;
|
37 | export interface UseCompoundParentReturnValue<Key, Subitem extends {
|
38 | ref: React.RefObject<Node>;
|
39 | }> {
|
40 | /**
|
41 | * The value for the CompoundComponentContext provider.
|
42 | */
|
43 | contextValue: CompoundComponentContextValue<Key, Subitem>;
|
44 | /**
|
45 | * The subitems registered with the parent.
|
46 | * The key is the id of the subitem, and the value is the metadata passed to the `useCompoundItem` hook.
|
47 | * The order of the items is the same as the order in which they were registered.
|
48 | */
|
49 | subitems: Map<Key, Subitem>;
|
50 | }
|
51 | /**
|
52 | * Provides a way for a component to know about its children.
|
53 | *
|
54 | * Child components register themselves with the `useCompoundItem` hook, passing in arbitrary metadata to the parent.
|
55 | *
|
56 | * This is a more powerful altervantive to `children` traversal, as child components don't have to be placed
|
57 | * directly inside the parent component. They can be anywhere in the tree (and even rendered by other components).
|
58 | *
|
59 | * The downside is that this doesn't work with SSR as it relies on the useEffect hook.
|
60 | *
|
61 | * @ignore - internal hook.
|
62 | */
|
63 | export declare function useCompoundParent<Key, Subitem extends {
|
64 | ref: React.RefObject<Node>;
|
65 | }>(): UseCompoundParentReturnValue<Key, Subitem>;
|
66 | export {};
|