Massive/ListMenu.tsx
Brandon Presley e5d9f5fa92 Add select all button
Very useful final addition to the multi edit/delete function.
Typically a user will search for certain criteria, and then select
them all to be removed/edited. For example, if yesterdays sets were all
10x150kg deadlifts, but you review your form video and decide the form
sucked, you would want to mass edit them to lower the weight/reps (or
maybe delete them). This way you won't have these invalid entries
ruining all your progress graphs (showing false progress).
2022-12-22 17:10:14 +13:00

102 lines
2.2 KiB
TypeScript

import {useState} from 'react'
import {Divider, IconButton, Menu} from 'react-native-paper'
import ConfirmDialog from './ConfirmDialog'
import useDark from './use-dark'
export default function ListMenu({
onEdit,
onCopy,
onClear,
onDelete,
onSelect,
ids,
}: {
onEdit: () => void
onCopy: () => void
onClear: () => void
onDelete: () => void
onSelect: () => void
ids?: number[]
}) {
const [showMenu, setShowMenu] = useState(false)
const [showRemove, setShowRemove] = useState(false)
const dark = useDark()
const edit = () => {
setShowMenu(false)
onEdit()
}
const copy = () => {
setShowMenu(false)
onCopy()
}
const clear = () => {
setShowMenu(false)
onClear()
}
const remove = () => {
setShowMenu(false)
setShowRemove(false)
onDelete()
}
const select = () => {
setShowMenu(false)
onSelect()
}
return (
<Menu
visible={showMenu}
onDismiss={() => setShowMenu(false)}
anchor={
<IconButton
color={dark ? 'white' : 'white'}
onPress={() => setShowMenu(true)}
icon="more-vert"
/>
}>
<Menu.Item icon="done-all" title="Select all" onPress={select} />
<Menu.Item
icon="edit"
title="Edit"
onPress={edit}
disabled={ids?.length === 0}
/>
<Menu.Item
icon="content-copy"
title="Copy"
onPress={copy}
disabled={ids?.length === 0}
/>
<Menu.Item
icon="clear"
title="Clear"
onPress={clear}
disabled={ids?.length === 0}
/>
<Divider />
<Menu.Item
icon="delete"
onPress={() => setShowRemove(true)}
title="Delete"
/>
<ConfirmDialog
title={ids?.length === 0 ? 'Delete all' : 'Delete selected'}
show={showRemove}
setShow={setShowRemove}
onOk={remove}
onCancel={() => setShowMenu(false)}>
{ids?.length === 0 ? (
<>This irreversibly deletes records from the app. Are you sure?</>
) : (
<>This will delete {ids?.length} record(s). Are you sure?</>
)}
</ConfirmDialog>
</Menu>
)
}