@wordpress/block-editor/build/components/preview-options/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PreviewOptions;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _compose = require("@wordpress/compose");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
function PreviewOptions({
  children,
  viewLabel,
  className,
  isEnabled = true,
  deviceType,
  setDeviceType
}) {
  const isMobile = (0, _compose.useViewportMatch)('small', '<');
  if (isMobile) return null;
  const popoverProps = {
    className: (0, _classnames.default)(className, 'block-editor-post-preview__dropdown-content'),
    position: 'bottom left'
  };
  const toggleProps = {
    variant: 'tertiary',
    className: 'block-editor-post-preview__button-toggle',
    disabled: !isEnabled,
    children: viewLabel
  };
  const menuProps = {
    'aria-label': (0, _i18n.__)('View options')
  };
  const deviceIcons = {
    mobile: _icons.mobile,
    tablet: _icons.tablet,
    desktop: _icons.desktop
  };
  return (0, _element.createElement)(_components.DropdownMenu, {
    className: "block-editor-post-preview__dropdown",
    popoverProps: popoverProps,
    toggleProps: toggleProps,
    menuProps: menuProps,
    icon: deviceIcons[deviceType.toLowerCase()]
  }, () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
    className: "block-editor-post-preview__button-resize",
    onClick: () => setDeviceType('Desktop'),
    icon: deviceType === 'Desktop' && _icons.check
  }, (0, _i18n.__)('Desktop')), (0, _element.createElement)(_components.MenuItem, {
    className: "block-editor-post-preview__button-resize",
    onClick: () => setDeviceType('Tablet'),
    icon: deviceType === 'Tablet' && _icons.check
  }, (0, _i18n.__)('Tablet')), (0, _element.createElement)(_components.MenuItem, {
    className: "block-editor-post-preview__button-resize",
    onClick: () => setDeviceType('Mobile'),
    icon: deviceType === 'Mobile' && _icons.check
  }, (0, _i18n.__)('Mobile'))), children));
}
//# sourceMappingURL=index.js.map