-
Notifications
You must be signed in to change notification settings - Fork 4k
/
dropdown.js
78 lines (72 loc) · 1.78 KB
/
dropdown.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
/**
* WordPress dependencies
*/
import { Button, Dropdown } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
import { listView } from '@wordpress/icons';
/**
* Internal dependencies
*/
import ListView from '../list-view';
import { store as blockEditorStore } from '../../store';
function BlockNavigationDropdownToggle( {
isEnabled,
onToggle,
isOpen,
innerRef,
...props
} ) {
return (
<Button
{ ...props }
ref={ innerRef }
icon={ listView }
aria-expanded={ isOpen }
aria-haspopup="true"
onClick={ isEnabled ? onToggle : undefined }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List view' ) }
className="block-editor-block-navigation"
aria-disabled={ ! isEnabled }
/>
);
}
function BlockNavigationDropdown(
{ isDisabled, __experimentalFeatures, ...props },
ref
) {
const hasBlocks = useSelect(
( select ) => !! select( blockEditorStore ).getBlockCount(),
[]
);
const isEnabled = hasBlocks && ! isDisabled;
return (
<Dropdown
contentClassName="block-editor-block-navigation__popover"
position="bottom right"
renderToggle={ ( { isOpen, onToggle } ) => (
<BlockNavigationDropdownToggle
{ ...props }
innerRef={ ref }
isOpen={ isOpen }
onToggle={ onToggle }
isEnabled={ isEnabled }
/>
) }
renderContent={ () => (
<div className="block-editor-block-navigation__container">
<p className="block-editor-block-navigation__label">
{ __( 'List view' ) }
</p>
<ListView
showNestedBlocks
__experimentalFeatures={ __experimentalFeatures }
/>
</div>
) }
/>
);
}
export default forwardRef( BlockNavigationDropdown );