UNPKG

@wordpress/editor

Version:
148 lines (140 loc) 4.81 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import { createElement, Fragment } from "@wordpress/element"; /** * External dependencies */ import { get, omit } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { Button, Spinner, CheckboxControl, withFocusReturn, withConstrainedTabbing } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies */ import PostPublishButton from '../post-publish-button'; import PostPublishPanelPrepublish from './prepublish'; import PostPublishPanelPostpublish from './postpublish'; export class PostPublishPanel extends Component { constructor() { super(...arguments); this.onSubmit = this.onSubmit.bind(this); } componentDidUpdate(prevProps) { // Automatically collapse the publish sidebar when a post // is published and the user makes an edit. if (prevProps.isPublished && !this.props.isSaving && this.props.isDirty) { this.props.onClose(); } } onSubmit() { const { onClose, hasPublishAction, isPostTypeViewable } = this.props; if (!hasPublishAction || !isPostTypeViewable) { onClose(); } } render() { const { forceIsDirty, forceIsSaving, isBeingScheduled, isPublished, isPublishSidebarEnabled, isScheduled, isSaving, onClose, onTogglePublishSidebar, PostPublishExtension, PrePublishExtension, ...additionalProps } = this.props; const propsForPanel = omit(additionalProps, ['hasPublishAction', 'isDirty', 'isPostTypeViewable']); const isPublishedOrScheduled = isPublished || isScheduled && isBeingScheduled; const isPrePublish = !isPublishedOrScheduled && !isSaving; const isPostPublish = isPublishedOrScheduled && !isSaving; return createElement("div", _extends({ className: "editor-post-publish-panel" }, propsForPanel), createElement("div", { className: "editor-post-publish-panel__header" }, isPostPublish ? createElement(Button, { onClick: onClose, icon: closeSmall, label: __('Close panel') }) : createElement(Fragment, null, createElement("div", { className: "editor-post-publish-panel__header-publish-button" }, createElement(PostPublishButton, { focusOnMount: true, onSubmit: this.onSubmit, forceIsDirty: forceIsDirty, forceIsSaving: forceIsSaving })), createElement("div", { className: "editor-post-publish-panel__header-cancel-button" }, createElement(Button, { onClick: onClose, isSecondary: true }, __('Cancel'))))), createElement("div", { className: "editor-post-publish-panel__content" }, isPrePublish && createElement(PostPublishPanelPrepublish, null, PrePublishExtension && createElement(PrePublishExtension, null)), isPostPublish && createElement(PostPublishPanelPostpublish, { focusOnMount: true }, PostPublishExtension && createElement(PostPublishExtension, null)), isSaving && createElement(Spinner, null)), createElement("div", { className: "editor-post-publish-panel__footer" }, createElement(CheckboxControl, { label: __('Always show pre-publish checks.'), checked: isPublishSidebarEnabled, onChange: onTogglePublishSidebar }))); } } export default compose([withSelect(select => { const { getPostType } = select('core'); const { getCurrentPost, getEditedPostAttribute, isCurrentPostPublished, isCurrentPostScheduled, isEditedPostBeingScheduled, isEditedPostDirty, isSavingPost } = select('core/editor'); const { isPublishSidebarEnabled } = select('core/editor'); const postType = getPostType(getEditedPostAttribute('type')); return { hasPublishAction: get(getCurrentPost(), ['_links', 'wp:action-publish'], false), isPostTypeViewable: get(postType, ['viewable'], false), isBeingScheduled: isEditedPostBeingScheduled(), isDirty: isEditedPostDirty(), isPublished: isCurrentPostPublished(), isPublishSidebarEnabled: isPublishSidebarEnabled(), isSaving: isSavingPost(), isScheduled: isCurrentPostScheduled() }; }), withDispatch((dispatch, { isPublishSidebarEnabled }) => { const { disablePublishSidebar, enablePublishSidebar } = dispatch('core/editor'); return { onTogglePublishSidebar: () => { if (isPublishSidebarEnabled) { disablePublishSidebar(); } else { enablePublishSidebar(); } } }; }), withFocusReturn, withConstrainedTabbing])(PostPublishPanel); //# sourceMappingURL=index.js.map