generateblocks
/
src
/
extend
/
inspector-control
/
controls
/
borders
/
components
/
style-dropdown.js
generateblocks
/
src
/
extend
/
inspector-control
/
controls
/
borders
/
components
Last commit date
style-dropdown.js
2 years ago
style-dropdown.js
60 lines
| 1 | import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import getIcon from '../../../../../utils/get-icon'; |
| 4 | |
| 5 | export default function StyleDropdown( { value, onChange } ) { |
| 6 | const currentIcon = { |
| 7 | none: getIcon( 'border-none' ), |
| 8 | solid: getIcon( 'border-solid' ), |
| 9 | dashed: getIcon( 'border-dashed' ), |
| 10 | dotted: getIcon( 'border-dotted' ), |
| 11 | }; |
| 12 | |
| 13 | return ( |
| 14 | <> |
| 15 | <DropdownMenu |
| 16 | className="gblocks-border-style" |
| 17 | icon={ currentIcon[ value ] || getIcon( 'border-default' ) } |
| 18 | label={ __( 'Select a style', 'generateblocks' ) } |
| 19 | > |
| 20 | { ( { onClose } ) => ( |
| 21 | <> |
| 22 | <MenuGroup> |
| 23 | <MenuItem icon={ getIcon( 'border-default' ) } onClick={ () => { |
| 24 | onChange( '' ); |
| 25 | onClose(); |
| 26 | } }> |
| 27 | { __( 'Default', 'generateblocks' ) } |
| 28 | </MenuItem> |
| 29 | <MenuItem icon={ getIcon( 'border-none' ) } onClick={ () => { |
| 30 | onChange( 'none' ); |
| 31 | onClose(); |
| 32 | } }> |
| 33 | { __( 'None', 'generateblocks' ) } |
| 34 | </MenuItem> |
| 35 | <MenuItem icon={ getIcon( 'border-solid' ) } onClick={ () => { |
| 36 | onChange( 'solid' ); |
| 37 | onClose(); |
| 38 | } }> |
| 39 | { __( 'Solid', 'generateblocks' ) } |
| 40 | </MenuItem> |
| 41 | <MenuItem icon={ getIcon( 'border-dashed' ) } onClick={ () => { |
| 42 | onChange( 'dashed' ); |
| 43 | onClose(); |
| 44 | } }> |
| 45 | { __( 'Dashed', 'generateblocks' ) } |
| 46 | </MenuItem> |
| 47 | <MenuItem icon={ getIcon( 'border-dotted' ) } onClick={ () => { |
| 48 | onChange( 'dotted' ); |
| 49 | onClose(); |
| 50 | } }> |
| 51 | { __( 'Dotted', 'generateblocks' ) } |
| 52 | </MenuItem> |
| 53 | </MenuGroup> |
| 54 | </> |
| 55 | ) } |
| 56 | </DropdownMenu> |
| 57 | </> |
| 58 | ); |
| 59 | } |
| 60 |