diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/wordads/format-picker.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/wordads/format-picker.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/wordads/format-picker.js b/plugins/jetpack/extensions/blocks/wordads/format-picker.js new file mode 100644 index 00000000..b058ab03 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/wordads/format-picker.js @@ -0,0 +1,59 @@ +/** + * External Dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Dropdown, MenuItem, NavigableMenu, Path, SVG, Toolbar } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { AD_FORMATS } from './constants'; + +const label = __( 'Pick an ad format', 'jetpack' ); + +export default function FormatPicker( { value, onChange } ) { + return ( + <Dropdown + position="bottom right" + renderToggle={ ( { onToggle, isOpen } ) => { + return ( + <Toolbar + controls={ [ + { + icon: ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Path fill="none" d="M0 0h24v24H0V0z" /> + <Path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z" /> + </SVG> + ), + title: label, + onClick: onToggle, + extraProps: { 'aria-expanded': isOpen }, + className: 'wp-block-jetpack-wordads__format-picker-icon', + }, + ] } + /> + ); + } } + renderContent={ ( { onClose } ) => ( + <NavigableMenu className="wp-block-jetpack-wordads__format-picker"> + { AD_FORMATS.map( ( { tag, name, icon } ) => ( + <MenuItem + className={ tag === value ? 'is-active' : undefined } + icon={ icon } + isSelected={ tag === value } + key={ tag } + onClick={ () => { + onChange( tag ); + onClose(); + } } + role="menuitemcheckbox" + > + { name } + </MenuItem> + ) ) } + </NavigableMenu> + ) } + /> + ); +} |