@wordpress/editor/build/components/post-visibility/index.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostVisibility;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _utils = require("./utils");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Allows users to set the visibility of a post.
 *
 * @param {Object}   props         The component props.
 * @param {Function} props.onClose Function to call when the popover is closed.
 * @return {JSX.Element} The rendered component.
 */function PostVisibility({
  onClose
}) {
  const instanceId = (0, _compose.useInstanceId)(PostVisibility);
  const {
    status,
    visibility,
    password
  } = (0, _data.useSelect)(select => ({
    status: select(_store.store).getEditedPostAttribute('status'),
    visibility: select(_store.store).getEditedPostVisibility(),
    password: select(_store.store).getEditedPostAttribute('password')
  }));
  const {
    editPost,
    savePost
  } = (0, _data.useDispatch)(_store.store);
  const [hasPassword, setHasPassword] = (0, _element.useState)(!!password);
  const [showPrivateConfirmDialog, setShowPrivateConfirmDialog] = (0, _element.useState)(false);
  const setPublic = () => {
    editPost({
      status: visibility === 'private' ? 'draft' : status,
      password: ''
    });
    setHasPassword(false);
  };
  const setPrivate = () => {
    setShowPrivateConfirmDialog(true);
  };
  const confirmPrivate = () => {
    editPost({
      status: 'private',
      password: ''
    });
    setHasPassword(false);
    setShowPrivateConfirmDialog(false);
    savePost();
  };
  const handleDialogCancel = () => {
    setShowPrivateConfirmDialog(false);
  };
  const setPasswordProtected = () => {
    editPost({
      status: visibility === 'private' ? 'draft' : status,
      password: password || ''
    });
    setHasPassword(true);
  };
  const updatePassword = event => {
    editPost({
      password: event.target.value
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-post-visibility",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
      title: (0, _i18n.__)('Visibility'),
      help: (0, _i18n.__)('Control how this post is viewed.'),
      onClose: onClose
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
      className: "editor-post-visibility__fieldset",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
        as: "legend",
        children: (0, _i18n.__)('Visibility')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PostVisibilityChoice, {
        instanceId: instanceId,
        value: "public",
        label: _utils.visibilityOptions.public.label,
        info: _utils.visibilityOptions.public.info,
        checked: visibility === 'public' && !hasPassword,
        onChange: setPublic
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PostVisibilityChoice, {
        instanceId: instanceId,
        value: "private",
        label: _utils.visibilityOptions.private.label,
        info: _utils.visibilityOptions.private.info,
        checked: visibility === 'private',
        onChange: setPrivate
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PostVisibilityChoice, {
        instanceId: instanceId,
        value: "password",
        label: _utils.visibilityOptions.password.label,
        info: _utils.visibilityOptions.password.info,
        checked: hasPassword,
        onChange: setPasswordProtected
      }), hasPassword && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "editor-post-visibility__password",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
          as: "label",
          htmlFor: `editor-post-visibility__password-input-${instanceId}`,
          children: (0, _i18n.__)('Create password')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          className: "editor-post-visibility__password-input",
          id: `editor-post-visibility__password-input-${instanceId}`,
          type: "text",
          onChange: updatePassword,
          value: password,
          placeholder: (0, _i18n.__)('Use a secure password')
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
      isOpen: showPrivateConfirmDialog,
      onConfirm: confirmPrivate,
      onCancel: handleDialogCancel,
      confirmButtonText: (0, _i18n.__)('Publish'),
      size: "medium",
      children: (0, _i18n.__)('Would you like to privately publish this post now?')
    })]
  });
}
function PostVisibilityChoice({
  instanceId,
  value,
  label,
  info,
  ...props
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-post-visibility__choice",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "radio",
      name: `editor-post-visibility__setting-${instanceId}`,
      value: value,
      id: `editor-post-${value}-${instanceId}`,
      "aria-describedby": `editor-post-${value}-${instanceId}-description`,
      className: "editor-post-visibility__radio",
      ...props
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
      htmlFor: `editor-post-${value}-${instanceId}`,
      className: "editor-post-visibility__label",
      children: label
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      id: `editor-post-${value}-${instanceId}-description`,
      className: "editor-post-visibility__info",
      children: info
    })]
  });
}
//# sourceMappingURL=index.js.map