@wordpress/editor/build/components/preview-dropdown/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PreviewDropdown;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _preferences = require("@wordpress/preferences");
var _interface = require("@wordpress/interface");
var _store = require("../../store");
var _postPreviewButton = _interopRequireDefault(require("../post-preview-button"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PreviewDropdown({
  forceIsAutosaveable,
  disabled
}) {
  const {
    deviceType,
    homeUrl,
    isTemplate,
    isViewable,
    showIconLabels
  } = (0, _data.useSelect)(select => {
    var _getPostType$viewable;
    const {
      getDeviceType,
      getCurrentPostType
    } = select(_store.store);
    const {
      getEntityRecord,
      getPostType
    } = select(_coreData.store);
    const {
      get
    } = select(_preferences.store);
    const _currentPostType = getCurrentPostType();
    return {
      deviceType: getDeviceType(),
      homeUrl: getEntityRecord('root', '__unstableBase')?.home,
      isTemplate: _currentPostType === 'wp_template',
      isViewable: (_getPostType$viewable = getPostType(_currentPostType)?.viewable) !== null && _getPostType$viewable !== void 0 ? _getPostType$viewable : false,
      showIconLabels: get('core', 'showIconLabels')
    };
  }, []);
  const {
    setDeviceType
  } = (0, _data.useDispatch)(_store.store);
  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
  if (isMobile) {
    return null;
  }
  const popoverProps = {
    placement: 'bottom-end'
  };
  const toggleProps = {
    className: 'editor-preview-dropdown__toggle',
    iconPosition: 'right',
    size: 'compact',
    showTooltip: !showIconLabels,
    disabled,
    accessibleWhenDisabled: disabled
  };
  const menuProps = {
    'aria-label': (0, _i18n.__)('View options')
  };
  const deviceIcons = {
    desktop: _icons.desktop,
    mobile: _icons.mobile,
    tablet: _icons.tablet
  };

  /**
   * The choices for the device type.
   *
   * @type {Array}
   */
  const choices = [{
    value: 'Desktop',
    label: (0, _i18n.__)('Desktop'),
    icon: _icons.desktop
  }, {
    value: 'Tablet',
    label: (0, _i18n.__)('Tablet'),
    icon: _icons.tablet
  }, {
    value: 'Mobile',
    label: (0, _i18n.__)('Mobile'),
    icon: _icons.mobile
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
    className: (0, _clsx.default)('editor-preview-dropdown', `editor-preview-dropdown--${deviceType.toLowerCase()}`),
    popoverProps: popoverProps,
    toggleProps: toggleProps,
    menuProps: menuProps,
    icon: deviceIcons[deviceType.toLowerCase()],
    label: (0, _i18n.__)('View'),
    disableOpenOnArrowDown: disabled,
    children: ({
      onClose
    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
          choices: choices,
          value: deviceType,
          onSelect: setDeviceType
        })
      }), isTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuItem, {
          href: homeUrl,
          target: "_blank",
          icon: _icons.external,
          onClick: onClose,
          children: [(0, _i18n.__)('View site'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
            as: "span",
            children: /* translators: accessibility text */
            (0, _i18n.__)('(opens in a new tab)')
          })]
        })
      }), isViewable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPreviewButton.default, {
          className: "editor-preview-dropdown__button-external",
          role: "menuitem",
          forceIsAutosaveable: forceIsAutosaveable,
          "aria-label": (0, _i18n.__)('Preview in new tab'),
          textContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [(0, _i18n.__)('Preview in new tab'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
              icon: _icons.external
            })]
          }),
          onPreview: onClose
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_interface.ActionItem.Slot, {
        name: "core/plugin-preview-menu",
        as: _components.MenuGroup,
        fillProps: {
          onClick: onClose
        }
      })]
    })
  });
}
//# sourceMappingURL=index.js.map