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

Enhanced block editor for WordPress posts.

/**
 * WordPress dependencies
 */
import { useRegistry, useSelect } from '@wordpress/data';
import { useState, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { privateApis as componentsPrivateApis, Button, Modal } from '@wordpress/components';
import { moreVertical } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';

/**
 * Internal dependencies
 */
import { unlock } from '../../lock-unlock';
import { usePostActions } from './actions';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const {
  Menu,
  kebabCase
} = unlock(componentsPrivateApis);
export default function PostActions({
  postType,
  postId,
  onActionPerformed
}) {
  const [activeModalAction, setActiveModalAction] = useState(null);
  const {
    item,
    permissions
  } = useSelect(select => {
    const {
      getEditedEntityRecord,
      getEntityRecordPermissions
    } = unlock(select(coreStore));
    return {
      item: getEditedEntityRecord('postType', postType, postId),
      permissions: getEntityRecordPermissions('postType', postType, postId)
    };
  }, [postId, postType]);
  const itemWithPermissions = useMemo(() => {
    return {
      ...item,
      permissions
    };
  }, [item, permissions]);
  const allActions = usePostActions({
    postType,
    onActionPerformed
  });
  const actions = useMemo(() => {
    return allActions.filter(action => {
      return !action.isEligible || action.isEligible(itemWithPermissions);
    });
  }, [allActions, itemWithPermissions]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(Menu, {
      placement: "bottom-end",
      children: [/*#__PURE__*/_jsx(Menu.TriggerButton, {
        render: /*#__PURE__*/_jsx(Button, {
          size: "small",
          icon: moreVertical,
          label: __('Actions'),
          disabled: !actions.length,
          accessibleWhenDisabled: true,
          className: "editor-all-actions-button"
        })
      }), /*#__PURE__*/_jsx(Menu.Popover, {
        children: /*#__PURE__*/_jsx(ActionsDropdownMenuGroup, {
          actions: actions,
          items: [itemWithPermissions],
          setActiveModalAction: setActiveModalAction
        })
      })]
    }), !!activeModalAction && /*#__PURE__*/_jsx(ActionModal, {
      action: activeModalAction,
      items: [itemWithPermissions],
      closeModal: () => setActiveModalAction(null)
    })]
  });
}

// 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.

function DropdownMenuItemTrigger({
  action,
  onClick,
  items
}) {
  const label = typeof action.label === 'string' ? action.label : action.label(items);
  return /*#__PURE__*/_jsx(Menu.Item, {
    onClick: onClick,
    children: /*#__PURE__*/_jsx(Menu.ItemLabel, {
      children: label
    })
  });
}
export function ActionModal({
  action,
  items,
  closeModal
}) {
  const label = typeof action.label === 'string' ? action.label : action.label(items);
  return /*#__PURE__*/_jsx(Modal, {
    title: action.modalHeader || label,
    __experimentalHideHeader: !!action.hideModalHeader,
    onRequestClose: closeModal !== null && closeModal !== void 0 ? closeModal : () => {},
    focusOnMount: "firstContentElement",
    size: "medium",
    overlayClassName: `editor-action-modal editor-action-modal__${kebabCase(action.id)}`,
    children: /*#__PURE__*/_jsx(action.RenderModal, {
      items: items,
      closeModal: closeModal
    })
  });
}
function ActionsDropdownMenuGroup({
  actions,
  items,
  setActiveModalAction
}) {
  const registry = useRegistry();
  return /*#__PURE__*/_jsx(Menu.Group, {
    children: actions.map(action => {
      return /*#__PURE__*/_jsx(DropdownMenuItemTrigger, {
        action: action,
        onClick: () => {
          if ('RenderModal' in action) {
            setActiveModalAction(action);
            return;
          }
          action.callback(items, {
            registry
          });
        },
        items: items
      }, action.id);
    })
  });
}
//# sourceMappingURL=index.js.map