@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
150 lines (147 loc) • 4.7 kB
JavaScript
/* wp:polyfill */
/**
* 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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const {
Menu,
kebabCase
} = unlock(componentsPrivateApis);
function useEditedEntityRecordsWithPermissions(postType, postIds) {
const {
items,
permissions
} = useSelect(select => {
const {
getEditedEntityRecord,
getEntityRecordPermissions
} = unlock(select(coreStore));
return {
items: postIds.map(postId => getEditedEntityRecord('postType', postType, postId)),
permissions: postIds.map(postId => getEntityRecordPermissions('postType', postType, postId))
};
}, [postIds, postType]);
return useMemo(() => {
return items.map((item, index) => ({
...item,
permissions: permissions[index]
}));
}, [items, permissions]);
}
export default function PostActions({
postType,
postId,
onActionPerformed
}) {
const [activeModalAction, setActiveModalAction] = useState(null);
const _postIds = useMemo(() => {
if (Array.isArray(postId)) {
return postId;
}
return postId ? [postId] : [];
}, [postId]);
const itemsWithPermissions = useEditedEntityRecordsWithPermissions(postType, _postIds);
const allActions = usePostActions({
postType,
onActionPerformed
});
const actions = useMemo(() => {
return allActions.filter(action => {
return (!action.isEligible || itemsWithPermissions.some(itemWithPermissions => action.isEligible(itemWithPermissions))) && (itemsWithPermissions.length < 2 || action.supportsBulk);
});
}, [allActions, itemsWithPermissions]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Menu, {
trigger: /*#__PURE__*/_jsx(Button, {
size: "small",
icon: moreVertical,
label: __('Actions'),
disabled: !actions.length,
accessibleWhenDisabled: true,
className: "editor-all-actions-button"
}),
placement: "bottom-end",
children: /*#__PURE__*/_jsx(ActionsDropdownMenuGroup, {
actions: actions,
items: itemsWithPermissions,
setActiveModalAction: setActiveModalAction
})
}), !!activeModalAction && /*#__PURE__*/_jsx(ActionModal, {
action: activeModalAction,
items: itemsWithPermissions,
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