-
Notifications
You must be signed in to change notification settings - Fork 4k
/
hook.js
80 lines (68 loc) · 1.83 KB
/
hook.js
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
/**
* WordPress dependencies
*/
import { usePrevious } from '@wordpress/compose';
import { useEffect, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import * as styles from '../styles';
import { useToolsPanelContext } from '../context';
import { useContextSystem } from '../../ui/context';
import { useCx } from '../../utils/hooks/use-cx';
export function useToolsPanelItem( props ) {
const {
className,
hasValue,
isShownByDefault,
label,
resetAllFilter,
onDeselect = () => undefined,
onSelect = () => undefined,
...otherProps
} = useContextSystem( props, 'ToolsPanelItem' );
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.ToolsPanelItem, className );
} );
const {
menuItems,
registerPanelItem,
deregisterPanelItem,
isResetting,
} = useToolsPanelContext();
// Registering the panel item allows the panel to include it in its
// automatically generated menu and determine its initial checked status.
useEffect( () => {
registerPanelItem( {
hasValue,
isShownByDefault,
label,
resetAllFilter,
} );
return () => deregisterPanelItem( label );
}, [] );
const isValueSet = hasValue();
// Note: `label` is used as a key when building menu item state in
// `ToolsPanel`.
const isMenuItemChecked = menuItems[ label ];
const wasMenuItemChecked = usePrevious( isMenuItemChecked );
// Determine if the panel item's corresponding menu is being toggled and
// trigger appropriate callback if it is.
useEffect( () => {
if ( isResetting ) {
return;
}
if ( isMenuItemChecked && ! isValueSet && ! wasMenuItemChecked ) {
onSelect();
}
if ( ! isMenuItemChecked && wasMenuItemChecked ) {
onDeselect();
}
}, [ isMenuItemChecked, wasMenuItemChecked, isValueSet ] );
return {
...otherProps,
isShown: isMenuItemChecked,
className: classes,
};
}