@wordpress/block-editor
Version:
55 lines (52 loc) • 1.84 kB
JavaScript
import { createElement, Fragment } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { check } from '@wordpress/icons';
export default function PreviewOptions({
children,
className,
isEnabled = true,
deviceType,
setDeviceType
}) {
const isMobile = useViewportMatch('small', '<');
if (isMobile) return null;
const popoverProps = {
className: classnames(className, 'block-editor-post-preview__dropdown-content'),
position: 'bottom left'
};
const toggleProps = {
isTertiary: true,
className: 'block-editor-post-preview__button-toggle',
disabled: !isEnabled,
/* translators: button label text should, if possible, be under 16 characters. */
children: __('Preview')
};
return createElement(DropdownMenu, {
className: "block-editor-post-preview__dropdown",
popoverProps: popoverProps,
toggleProps: toggleProps,
icon: null
}, () => createElement(Fragment, null, createElement(MenuGroup, null, createElement(MenuItem, {
className: "block-editor-post-preview__button-resize",
onClick: () => setDeviceType('Desktop'),
icon: deviceType === 'Desktop' && check
}, __('Desktop')), createElement(MenuItem, {
className: "block-editor-post-preview__button-resize",
onClick: () => setDeviceType('Tablet'),
icon: deviceType === 'Tablet' && check
}, __('Tablet')), createElement(MenuItem, {
className: "block-editor-post-preview__button-resize",
onClick: () => setDeviceType('Mobile'),
icon: deviceType === 'Mobile' && check
}, __('Mobile'))), children));
}
//# sourceMappingURL=index.js.map