Add toggle for showing dates in Set list
This commit is contained in:
parent
d1c78f77f3
commit
9e80df7865
28
SetItem.tsx
28
SetItem.tsx
|
@ -1,20 +1,26 @@
|
||||||
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useState} from 'react';
|
import React, {useCallback, useContext, useMemo, useState} from 'react';
|
||||||
import {GestureResponderEvent} from 'react-native';
|
import {GestureResponderEvent, Text} from 'react-native';
|
||||||
import {Divider, List, Menu} from 'react-native-paper';
|
import {Divider, List, Menu} from 'react-native-paper';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
import {HomePageParams} from './HomePage';
|
import {HomePageParams} from './HomePage';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
import {format} from './time';
|
||||||
|
|
||||||
export default function SetItem({
|
export default function SetItem({
|
||||||
item,
|
item,
|
||||||
onRemove,
|
onRemove,
|
||||||
|
dates,
|
||||||
|
setDates,
|
||||||
}: {
|
}: {
|
||||||
item: Set;
|
item: Set;
|
||||||
onRemove: () => void;
|
onRemove: () => void;
|
||||||
|
dates: boolean;
|
||||||
|
setDates: (value: boolean) => void;
|
||||||
}) {
|
}) {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
const [anchor, setAnchor] = useState({x: 0, y: 0});
|
const [anchor, setAnchor] = useState({x: 0, y: 0});
|
||||||
|
const date = useMemo(() => format(new Date(item.created)), [item.created]);
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
||||||
|
|
||||||
|
@ -40,6 +46,11 @@ export default function SetItem({
|
||||||
[setShowMenu, setAnchor],
|
[setShowMenu, setAnchor],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const toggleDates = useCallback(() => {
|
||||||
|
setDates(!dates);
|
||||||
|
setShowMenu(false);
|
||||||
|
}, [dates, setDates]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -48,16 +59,25 @@ export default function SetItem({
|
||||||
description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
|
description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
|
||||||
onLongPress={longPress}
|
onLongPress={longPress}
|
||||||
right={() => (
|
right={() => (
|
||||||
<>
|
<Text
|
||||||
|
style={{
|
||||||
|
alignSelf: 'center',
|
||||||
|
}}>
|
||||||
|
{dates ? date : null}
|
||||||
<Menu
|
<Menu
|
||||||
anchor={anchor}
|
anchor={anchor}
|
||||||
visible={showMenu}
|
visible={showMenu}
|
||||||
onDismiss={() => setShowMenu(false)}>
|
onDismiss={() => setShowMenu(false)}>
|
||||||
<Menu.Item icon="copy" onPress={copy} title="Copy" />
|
<Menu.Item icon="copy" onPress={copy} title="Copy" />
|
||||||
|
<Menu.Item
|
||||||
|
icon="calendar-outline"
|
||||||
|
onPress={toggleDates}
|
||||||
|
title="Dates"
|
||||||
|
/>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Menu.Item icon="trash" onPress={remove} title="Delete" />
|
<Menu.Item icon="trash" onPress={remove} title="Delete" />
|
||||||
</Menu>
|
</Menu>
|
||||||
</>
|
</Text>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
11
SetList.tsx
11
SetList.tsx
|
@ -24,6 +24,7 @@ export default function SetList() {
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [refreshing, setRefreshing] = useState(false);
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
const [end, setEnd] = useState(false);
|
const [end, setEnd] = useState(false);
|
||||||
|
const [dates, setDates] = useState(false);
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
const navigation = useNavigation<NavigationProp<HomePageParams>>();
|
||||||
|
|
||||||
|
@ -133,9 +134,15 @@ export default function SetList() {
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
({item}: {item: Set}) => (
|
({item}: {item: Set}) => (
|
||||||
<SetItem item={item} key={item.id} onRemove={refresh} />
|
<SetItem
|
||||||
|
dates={dates}
|
||||||
|
setDates={setDates}
|
||||||
|
item={item}
|
||||||
|
key={item.id}
|
||||||
|
onRemove={refresh}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
[refresh],
|
[refresh, dates, setDates],
|
||||||
);
|
);
|
||||||
|
|
||||||
const next = useCallback(async () => {
|
const next = useCallback(async () => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user