55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
|
import {useState} from 'react';
|
||
|
import React from 'react';
|
||
|
import {Button, Divider, Menu} from 'react-native-paper';
|
||
|
|
||
|
export default function DayMenu({
|
||
|
onSelect,
|
||
|
onDelete,
|
||
|
onAdd,
|
||
|
selected,
|
||
|
index,
|
||
|
names,
|
||
|
}: {
|
||
|
onSelect: (option: string) => void;
|
||
|
onDelete: () => void;
|
||
|
onAdd: () => void;
|
||
|
selected: string;
|
||
|
index: number;
|
||
|
names: string[];
|
||
|
}) {
|
||
|
const [show, setShow] = useState(false);
|
||
|
|
||
|
const add = () => {
|
||
|
onAdd();
|
||
|
setShow(false);
|
||
|
};
|
||
|
|
||
|
const select = (day: string) => {
|
||
|
onSelect(day);
|
||
|
setShow(false);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Menu
|
||
|
visible={show}
|
||
|
onDismiss={() => setShow(false)}
|
||
|
anchor={
|
||
|
<Button icon="barbell" onPress={() => setShow(true)}>
|
||
|
{selected || 'Pick a workout'}
|
||
|
</Button>
|
||
|
}>
|
||
|
{names.map(name => (
|
||
|
<Menu.Item
|
||
|
key={name}
|
||
|
icon={selected === name ? 'checkmark-circle' : 'ellipse'}
|
||
|
onPress={() => select(name)}
|
||
|
title={name}
|
||
|
/>
|
||
|
))}
|
||
|
{index > 0 && (
|
||
|
<Menu.Item icon="trash" title="Delete" onPress={onDelete} />
|
||
|
)}
|
||
|
</Menu>
|
||
|
);
|
||
|
}
|