2023-08-12 03:22:50 +00:00
|
|
|
import { useState } from "react";
|
|
|
|
import { Divider, IconButton, Menu } from "react-native-paper";
|
|
|
|
import ConfirmDialog from "./ConfirmDialog";
|
2022-12-21 00:02:53 +00:00
|
|
|
|
|
|
|
export default function ListMenu({
|
|
|
|
onEdit,
|
|
|
|
onCopy,
|
|
|
|
onClear,
|
|
|
|
onDelete,
|
2022-12-22 04:08:01 +00:00
|
|
|
onSelect,
|
2022-12-21 00:02:53 +00:00
|
|
|
ids,
|
|
|
|
}: {
|
2023-08-12 03:22:50 +00:00
|
|
|
onEdit: () => void;
|
2023-08-14 01:14:34 +00:00
|
|
|
onCopy?: () => void;
|
2023-08-12 03:22:50 +00:00
|
|
|
onClear: () => void;
|
|
|
|
onDelete: () => void;
|
|
|
|
onSelect: () => void;
|
2023-08-14 01:14:34 +00:00
|
|
|
ids?: unknown[];
|
2022-12-21 00:02:53 +00:00
|
|
|
}) {
|
2023-08-12 03:22:50 +00:00
|
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
|
|
const [showRemove, setShowRemove] = useState(false);
|
2022-12-21 00:02:53 +00:00
|
|
|
|
|
|
|
const edit = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setShowMenu(false);
|
|
|
|
onEdit();
|
|
|
|
};
|
2022-12-21 00:02:53 +00:00
|
|
|
|
|
|
|
const copy = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setShowMenu(false);
|
|
|
|
onCopy();
|
|
|
|
};
|
2022-12-21 00:02:53 +00:00
|
|
|
|
|
|
|
const clear = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setShowMenu(false);
|
|
|
|
onClear();
|
|
|
|
};
|
2022-12-21 00:02:53 +00:00
|
|
|
|
|
|
|
const remove = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
setShowMenu(false);
|
|
|
|
setShowRemove(false);
|
|
|
|
onDelete();
|
|
|
|
};
|
2022-12-21 00:02:53 +00:00
|
|
|
|
2022-12-22 04:08:01 +00:00
|
|
|
const select = () => {
|
2023-08-12 03:22:50 +00:00
|
|
|
onSelect();
|
|
|
|
};
|
2022-12-22 04:08:01 +00:00
|
|
|
|
2022-12-21 00:02:53 +00:00
|
|
|
return (
|
|
|
|
<Menu
|
|
|
|
visible={showMenu}
|
|
|
|
onDismiss={() => setShowMenu(false)}
|
2023-08-12 03:22:50 +00:00
|
|
|
anchor={<IconButton onPress={() => setShowMenu(true)} icon="more-vert" />}
|
2023-06-27 03:16:59 +00:00
|
|
|
>
|
2023-08-12 03:22:50 +00:00
|
|
|
<Menu.Item leadingIcon="done-all" title="Select all" onPress={select} />
|
2022-12-21 00:02:53 +00:00
|
|
|
<Menu.Item
|
2023-08-12 03:22:50 +00:00
|
|
|
leadingIcon="clear"
|
|
|
|
title="Clear"
|
2022-12-21 00:02:53 +00:00
|
|
|
onPress={clear}
|
|
|
|
disabled={ids?.length === 0}
|
|
|
|
/>
|
2022-12-24 00:10:40 +00:00
|
|
|
<Menu.Item
|
2023-08-12 03:22:50 +00:00
|
|
|
leadingIcon="edit"
|
|
|
|
title="Edit"
|
2022-12-24 00:10:40 +00:00
|
|
|
onPress={edit}
|
|
|
|
disabled={ids?.length === 0}
|
|
|
|
/>
|
2023-08-14 01:14:34 +00:00
|
|
|
{onCopy && (
|
|
|
|
<Menu.Item
|
|
|
|
leadingIcon="content-copy"
|
|
|
|
title="Copy"
|
|
|
|
onPress={copy}
|
|
|
|
disabled={ids?.length === 0}
|
|
|
|
/>
|
|
|
|
)}
|
2022-12-21 00:02:53 +00:00
|
|
|
<Divider />
|
|
|
|
<Menu.Item
|
2023-08-12 03:22:50 +00:00
|
|
|
leadingIcon="delete"
|
2022-12-21 00:02:53 +00:00
|
|
|
onPress={() => setShowRemove(true)}
|
2023-08-12 03:22:50 +00:00
|
|
|
title="Delete"
|
2022-12-21 00:02:53 +00:00
|
|
|
/>
|
|
|
|
<ConfirmDialog
|
2023-08-12 03:22:50 +00:00
|
|
|
title={ids?.length === 0 ? "Delete all" : "Delete selected"}
|
2022-12-21 00:02:53 +00:00
|
|
|
show={showRemove}
|
|
|
|
setShow={setShowRemove}
|
|
|
|
onOk={remove}
|
2023-06-27 03:16:59 +00:00
|
|
|
onCancel={() => setShowMenu(false)}
|
|
|
|
>
|
2023-08-12 03:22:50 +00:00
|
|
|
{ids?.length === 0 ? (
|
|
|
|
<>This irreversibly deletes records from the app. Are you sure?</>
|
|
|
|
) : (
|
|
|
|
<>This will delete {ids?.length} record(s). Are you sure?</>
|
|
|
|
)}
|
2022-12-21 00:02:53 +00:00
|
|
|
</ConfirmDialog>
|
|
|
|
</Menu>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-12-21 00:02:53 +00:00
|
|
|
}
|