Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 86x 4x 1x 1x 3x 3x | import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { download, moreVertical, trash } from '@wordpress/icons';
import { Button, Stack } from '@wordpress/ui';
import AddToContentMenu from '../add-to-content-menu';
import type { ReactElement } from 'react';
type Props = {
/** GUID of the video, for the add-to-content hand-off. Absent on local items. */
guid?: string;
canSave: boolean;
onSave: () => void;
onManageCaptions: () => void;
onDownload: () => void;
onDelete: () => void;
/**
* Whether the ⋯ menu renders. The upload flow's draft session hides it
* while the attachment doesn't exist yet — every item in it would be a
* silent no-op, and a menu of no-ops is worse than no menu.
*
* @default true
*/
showMenu?: boolean;
};
/**
* Actions slot for the AdminPage header on the Video details screen.
* Renders the add-to-content menu, the primary Save button and the ⋯ menu
* (Download file / Delete video). Save is disabled when the form is clean.
* Delete uses MenuItem's built-in `isDestructive` flag so the design system
* surfaces the red destructive treatment without a CSS override.
*
* "Add to a post or page" sits here rather than in a card because it acts on
* the whole video rather than on any one card's contents, which puts it
* alongside the screen's other whole-video actions. It previously lived at the
* foot of the info card, which is otherwise read-outs.
*
* @param props - Component props.
* @param props.guid - VideoPress GUID, when the video has one.
* @param props.canSave - Whether the form has unsaved changes.
* @param props.onSave - Called when the Save button is activated.
* @param props.onManageCaptions - Called when "Manage subtitles" is selected.
* @param props.onDownload - Called when "Download file" is selected.
* @param props.onDelete - Called when "Delete video" is selected.
* @param props.showMenu - Whether the ⋯ menu renders; see the Props note.
* @return The header-actions element.
*/
export default function HeaderActions( {
guid,
canSave,
onSave,
onManageCaptions,
onDownload,
onDelete,
showMenu = true,
}: Props ): ReactElement {
return (
<Stack direction="row" gap="sm" align="center">
<AddToContentMenu guid={ guid } size="compact" />
<Button size="compact" disabled={ ! canSave } onClick={ onSave }>
{ __( 'Save', 'jetpack-videopress-pkg' ) }
</Button>
{ showMenu && (
<DropdownMenu
icon={ moreVertical }
label={ __( 'More actions', 'jetpack-videopress-pkg' ) }
toggleProps={ { size: 'compact' } }
>
{ ( { onClose } ) => (
<MenuGroup>
<MenuItem
onClick={ () => {
onManageCaptions();
onClose();
} }
>
{ __( 'Manage subtitles', 'jetpack-videopress-pkg' ) }
</MenuItem>
<MenuItem
icon={ download }
onClick={ () => {
onDownload();
onClose();
} }
>
{ __( 'Download file', 'jetpack-videopress-pkg' ) }
</MenuItem>
<MenuItem
isDestructive
icon={ trash }
onClick={ () => {
onDelete();
onClose();
} }
>
{ __( 'Delete video', 'jetpack-videopress-pkg' ) }
</MenuItem>
</MenuGroup>
) }
</DropdownMenu>
) }
</Stack>
);
}
|