@wordpress/edit-post/build-module/components/header/index.js

Edit Post module for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { PinnedItems } from '@wordpress/interface';
import { useViewportMatch } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import FullscreenModeClose from './fullscreen-mode-close';
import HeaderToolbar from './header-toolbar';
import MoreMenu from './more-menu';
import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
import { default as DevicePreview } from '../device-preview';
import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';

function Header({
  setEntitiesSavedStatesCallback
}) {
  const {
    hasActiveMetaboxes,
    isPublishSidebarOpened,
    isSaving,
    showIconLabels,
    hasReducedUI
  } = useSelect(select => ({
    hasActiveMetaboxes: select(editPostStore).hasMetaBoxes(),
    isPublishSidebarOpened: select(editPostStore).isPublishSidebarOpened(),
    isSaving: select(editPostStore).isSavingMetaBoxes(),
    showIconLabels: select(editPostStore).isFeatureActive('showIconLabels'),
    hasReducedUI: select(editPostStore).isFeatureActive('reducedUI')
  }), []);
  const isLargeViewport = useViewportMatch('large');
  const classes = classnames('edit-post-header', {
    'has-reduced-ui': hasReducedUI
  });
  return createElement("div", {
    className: classes
  }, createElement(MainDashboardButton.Slot, null, createElement(FullscreenModeClose, null)), createElement("div", {
    className: "edit-post-header__toolbar"
  }, createElement(HeaderToolbar, null)), createElement("div", {
    className: "edit-post-header__settings"
  }, !isPublishSidebarOpened && // This button isn't completely hidden by the publish sidebar.
  // We can't hide the whole toolbar when the publish sidebar is open because
  // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
  // We track that DOM node to return focus to the PostPublishButtonOrToggle
  // when the publish sidebar has been closed.
  createElement(PostSavedState, {
    forceIsDirty: hasActiveMetaboxes,
    forceIsSaving: isSaving,
    showIconLabels: showIconLabels
  }), createElement(DevicePreview, null), createElement(PostPreviewButton, {
    forceIsAutosaveable: hasActiveMetaboxes,
    forcePreviewLink: isSaving ? null : undefined
  }), createElement(PostPublishButtonOrToggle, {
    forceIsDirty: hasActiveMetaboxes,
    forceIsSaving: isSaving,
    setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
  }), (isLargeViewport || !showIconLabels) && createElement(Fragment, null, createElement(PinnedItems.Slot, {
    scope: "core/edit-post"
  }), createElement(MoreMenu, {
    showIconLabels: showIconLabels
  })), showIconLabels && !isLargeViewport && createElement(MoreMenu, {
    showIconLabels: showIconLabels
  })));
}

export default Header;
//# sourceMappingURL=index.js.map