-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
index.js
73 lines (69 loc) · 1.87 KB
/
index.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
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { Children } from '@wordpress/element';
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { moreVertical } from '@wordpress/icons';
function Warning( { className, actions, children, secondaryActions } ) {
return (
<div style={ { display: 'contents', all: 'initial' } }>
<div className={ clsx( className, 'block-editor-warning' ) }>
<div className="block-editor-warning__contents">
<p className="block-editor-warning__message">
{ children }
</p>
{ ( Children.count( actions ) > 0 || secondaryActions ) && (
<div className="block-editor-warning__actions">
{ Children.count( actions ) > 0 &&
Children.map( actions, ( action, i ) => (
<span
key={ i }
className="block-editor-warning__action"
>
{ action }
</span>
) ) }
{ secondaryActions && (
<DropdownMenu
className="block-editor-warning__secondary"
icon={ moreVertical }
label={ __( 'More options' ) }
popoverProps={ {
position: 'bottom left',
className:
'block-editor-warning__dropdown',
} }
noIcons
>
{ () => (
<MenuGroup>
{ secondaryActions.map(
( item, pos ) => (
<MenuItem
onClick={ item.onClick }
key={ pos }
>
{ item.title }
</MenuItem>
)
) }
</MenuGroup>
) }
</DropdownMenu>
) }
</div>
) }
</div>
</div>
</div>
);
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/warning/README.md
*/
export default Warning;