-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
142 lines (132 loc) · 4.27 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/**
* External dependencies
*/
// eslint-disable-next-line no-restricted-imports
import type { ReactNode } from 'react';
type ResetAllFilter = () => void;
type ResetAll = ( filters?: ResetAllFilter[] ) => void;
export type ToolsPanelProps = {
/**
* The child elements.
*/
children: ReactNode;
/**
* Flags that the items in this ToolsPanel will be contained within an inner
* wrapper element allowing the panel to lay them out accordingly.
*/
hasInnerWrapper: boolean;
/**
* Text to be displayed within the panel's header and as the `aria-label`
* for the panel's dropdown menu.
*/
label: string;
/**
* If a `panelId` is set, it is passed through the `ToolsPanelContext` and
* used to restrict panel items. Only items with a matching `panelId` will
* be able to register themselves with this panel.
*/
panelId: string;
/**
* A function to call when the `Reset all` menu option is selected. This is
* passed through to the panel's header component.
*/
resetAll: ResetAll;
/**
* Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
* placeholder content instead of null when they are toggled off and hidden.
*/
shouldRenderPlaceholderItems: boolean;
};
export type ToolsPanelHeaderProps = {
/**
* Text to be displayed within the panel header. It is also passed along as
* the `label` for the panel header's `DropdownMenu`.
*/
label: string;
/**
* The `resetAll` prop provides the callback to execute when the "Reset all"
* menu item is selected. Its purpose is to facilitate resetting any control
* values for items contained within this header's panel.
*/
resetAll: ResetAll;
/**
* This is executed when an individual control's menu item is toggled. It
* will update the panel's menu item state and call the panel item's
* `onSelect` or `onDeselect` callbacks as appropriate.
*/
toggleItem: ( label: string ) => void;
};
export type ToolsPanelItem = {
/**
* This is called when building the `ToolsPanel` menu to determine the
* item's initial checked state.
*/
hasValue: () => boolean;
/**
* This prop identifies the current item as being displayed by default. This
* means it will show regardless of whether it has a value set or is toggled
* on in the panel's menu.
*/
isShownByDefault: boolean;
/**
* The supplied label is dual purpose. It is used as:
* 1. the human-readable label for the panel's dropdown menu
* 2. a key to locate the corresponding item in the panel's menu context to
* determine if the panel item should be displayed.
* A panel item's `label` should be unique among all items within a single
* panel.
*/
label: string;
/**
* Panel items will ensure they are only registering with their intended
* panel by comparing the `panelId` props set on both the item and the panel
* itself. This allows items to be injected from a shared source.
*/
panelId: string;
/**
* A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
* array of these functions through to the panel's `resetAll` callback. They
* can then be iterated over to perform additional tasks.
*/
resetAllFilter: ResetAllFilter;
};
export type ToolsPanelItemProps = ToolsPanelItem & {
/**
* The child elements.
*/
children?: ReactNode;
/**
* Called when this item is deselected in the `ToolsPanel` menu. This is
* normally used to reset the panel item control's value.
*/
onDeselect?: () => void;
/**
* A callback to take action when this item is selected in the `ToolsPanel`
* menu.
*/
onSelect?: () => void;
};
export type ToolsPanelMenuItemKey = 'default' | 'optional';
export type ToolsPanelMenuItems = {
[ menuItemKey in ToolsPanelMenuItemKey ]: { [ key: string ]: boolean };
};
export type ToolsPanelContext = {
panelId?: string;
menuItems: ToolsPanelMenuItems;
hasMenuItems: boolean;
registerPanelItem: ( item: ToolsPanelItem ) => void;
deregisterPanelItem: ( label: string ) => void;
flagItemCustomization: ( label: string ) => void;
isResetting: boolean;
shouldRenderPlaceholderItems: boolean;
areAllOptionalControlsHidden: boolean;
};
export type ToolsPanelControlsGroupProps = {
items: [ string, boolean ][];
onClose: () => void;
toggleItem: ( label: string ) => void;
};
export type ToolsPanelMenuItemsConfig = {
panelItems: ToolsPanelItem[];
shouldReset: boolean;
};