Add duplicate workflow action, use dropdown from @wordpress/components
[MAILPOET-4540]
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import { EllipsisMenu, MenuItem } from '@woocommerce/components/build';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { DropdownMenu } from '@wordpress/components';
|
||||
import { moreVertical } from '@wordpress/icons';
|
||||
import { useDuplicateButton } from '../menu';
|
||||
import { Workflow } from '../../workflow';
|
||||
|
||||
type Props = {
|
||||
@@ -7,19 +9,19 @@ type Props = {
|
||||
};
|
||||
|
||||
export function More({ workflow }: Props): JSX.Element {
|
||||
// Menu items are using custom hooks because the "DropdownMenu" component uses the "controls"
|
||||
// attribute rather than child components, but we need to render modal confirmation dialogs.
|
||||
const duplicate = useDuplicateButton(workflow);
|
||||
|
||||
const menuItems = [duplicate].filter((item) => item);
|
||||
|
||||
return (
|
||||
<EllipsisMenu
|
||||
label={`Actions for ${workflow.name}`}
|
||||
renderContent={() => (
|
||||
<div>
|
||||
<MenuItem onInvoke={() => {}}>
|
||||
<p>{__('Duplicate', 'mailpoet')}</p>
|
||||
</MenuItem>
|
||||
<MenuItem onInvoke={() => {}}>
|
||||
<p>{__('Move to trash', 'mailpoet')}</p>
|
||||
</MenuItem>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<>
|
||||
<DropdownMenu
|
||||
label={__('More', 'mailpoet')}
|
||||
icon={moreVertical}
|
||||
controls={menuItems.map(({ control }) => control)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@@ -0,0 +1,22 @@
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Item } from './item';
|
||||
import { storeName } from '../../store';
|
||||
import { Workflow, WorkflowStatus } from '../../workflow';
|
||||
|
||||
export const useDuplicateButton = (workflow: Workflow): Item | undefined => {
|
||||
const { duplicateWorkflow } = useDispatch(storeName);
|
||||
|
||||
if (workflow.status === WorkflowStatus.TRASH) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
key: 'duplicate',
|
||||
control: {
|
||||
title: __('Duplicate', 'mailpoet'),
|
||||
icon: null,
|
||||
onClick: () => duplicateWorkflow(workflow),
|
||||
},
|
||||
};
|
||||
};
|
@@ -0,0 +1 @@
|
||||
export * from './duplicate';
|
@@ -0,0 +1,8 @@
|
||||
import { DropdownMenu } from '@wordpress/components';
|
||||
|
||||
import Control = DropdownMenu.Control;
|
||||
|
||||
export type Item = {
|
||||
key: string;
|
||||
control: Control;
|
||||
};
|
Reference in New Issue
Block a user