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

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostActions;
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _lockUnlock = require("../../lock-unlock");
var _actions = require("./actions");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  DropdownMenuV2,
  kebabCase
} = (0, _lockUnlock.unlock)(_components.privateApis);
function PostActions({
  postType,
  postId,
  onActionPerformed
}) {
  const [isActionsMenuOpen, setIsActionsMenuOpen] = (0, _element.useState)(false);
  const {
    item,
    permissions
  } = (0, _data.useSelect)(select => {
    const {
      getEditedEntityRecord,
      getEntityRecordPermissions
    } = (0, _lockUnlock.unlock)(select(_coreData.store));
    return {
      item: getEditedEntityRecord('postType', postType, postId),
      permissions: getEntityRecordPermissions('postType', postType, postId)
    };
  }, [postId, postType]);
  const itemWithPermissions = (0, _element.useMemo)(() => {
    return {
      ...item,
      permissions
    };
  }, [item, permissions]);
  const allActions = (0, _actions.usePostActions)({
    postType,
    onActionPerformed
  });
  const actions = (0, _element.useMemo)(() => {
    return allActions.filter(action => {
      return !action.isEligible || action.isEligible(itemWithPermissions);
    });
  }, [allActions, itemWithPermissions]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2, {
    open: isActionsMenuOpen,
    trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      size: "small",
      icon: _icons.moreVertical,
      label: (0, _i18n.__)('Actions'),
      disabled: !actions.length,
      accessibleWhenDisabled: true,
      className: "editor-all-actions-button",
      onClick: () => setIsActionsMenuOpen(!isActionsMenuOpen)
    }),
    onOpenChange: setIsActionsMenuOpen,
    placement: "bottom-end",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsDropdownMenuGroup, {
      actions: actions,
      item: itemWithPermissions,
      onClose: () => {
        setIsActionsMenuOpen(false);
      }
    })
  });
}

// From now on all the functions on this file are copied as from the dataviews packages,
// The editor packages should not be using the dataviews packages directly,
// and the dataviews package should not be using the editor packages directly,
// so duplicating the code here seems like the least bad option.

// Copied as is from packages/dataviews/src/item-actions.js
function DropdownMenuItemTrigger({
  action,
  onClick,
  items
}) {
  const label = typeof action.label === 'string' ? action.label : action.label(items);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Item, {
    onClick: onClick,
    hideOnClick: !action.RenderModal,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
      children: label
    })
  });
}

// Copied as is from packages/dataviews/src/item-actions.js
// With an added onClose prop.
function ActionWithModal({
  action,
  item,
  ActionTrigger,
  onClose
}) {
  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
  const actionTriggerProps = {
    action,
    onClick: () => setIsModalOpen(true),
    items: [item]
  };
  const {
    RenderModal,
    hideModalHeader
  } = action;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ActionTrigger, {
      ...actionTriggerProps
    }), isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
      title: action.modalHeader || action.label,
      __experimentalHideHeader: !!hideModalHeader,
      onRequestClose: () => {
        setIsModalOpen(false);
      },
      overlayClassName: `editor-action-modal editor-action-modal__${kebabCase(action.id)}`,
      focusOnMount: "firstContentElement",
      size: "small",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderModal, {
        items: [item],
        closeModal: () => {
          setIsModalOpen(false);
          onClose();
        }
      })
    })]
  });
}

// Copied as is from packages/dataviews/src/item-actions.js
// With an added onClose prop.
function ActionsDropdownMenuGroup({
  actions,
  item,
  onClose
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Group, {
    children: actions.map(action => {
      if (action.RenderModal) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionWithModal, {
          action: action,
          item: item,
          ActionTrigger: DropdownMenuItemTrigger,
          onClose: onClose
        }, action.id);
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemTrigger, {
        action: action,
        onClick: () => action.callback([item]),
        items: [item]
      }, action.id);
    })
  });
}
//# sourceMappingURL=index.js.map