brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Fix a few instances of react/no-unstable-nested-components

This commit is contained in:
Brandon Presley 2023-07-17 18:38:28 +12:00
parent 040d588b5a
commit 36d3de401b
4 changed files with 101 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Select.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useMemo, useState } from 'react'
import { View } from 'react-native'
import { Button, Menu, Subheading, useTheme } from 'react-native-paper'
import { Button, Menu, Subheading } from 'react-native-paper'
import { ITEM_PADDING } from './constants'
export interface Item {
@ -21,7 +21,6 @@ function Select({
label?: string
}) {
const [show, setShow] = useState(false)
const { colors } = useTheme()
const selected = useMemo(
() => items.find((item) => item.value === value) || items[0],
@ -61,7 +60,7 @@ function Select({
>
{items.map((item) => (
<Menu.Item
titleStyle={{color: item.color}}
titleStyle={{ color: item.color }}
key={item.value}
title={item.label}
onPress={() => handlePress(item.value)}

48
SetItem.tsx
View File

@ -42,6 +42,30 @@ export default function SetItem({
return LIGHT_RIPPLE
}, [dark, ids, item.id])
const left = useCallback(() => {
if (!settings.images || !item.image) return null
return (
<Image
source={{ uri: item.image }}
style={{ height: 75, width: 75 }}
/>
)
}, [item.image, settings.images])
const right = useCallback(() => {
if (!settings.showDate) return null
return (
<Text
style={{
alignSelf: 'center',
color: dark ? '#909090ff' : '#717171ff',
}}
>
{format(new Date(item.created), settings.date || 'P')}
</Text>
)
}, [settings.showDate, item.created, settings.date, dark])
return (
<List.Item
onPress={press}
@ -49,28 +73,8 @@ export default function SetItem({
description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
onLongPress={longPress}
style={{ backgroundColor }}
left={() =>
settings.images &&
item.image && (
<Image
source={{ uri: item.image }}
style={{ height: 75, width: 75 }}
/>
)}
right={() => (
<>
{settings.showDate && (
<Text
style={{
alignSelf: 'center',
color: dark ? '#909090ff' : '#717171ff',
}}
>
{format(new Date(item.created), settings.date || 'P')}
</Text>
)}
</>
)}
left={left}
right={right}
/>
)
}

66
StartPlanItem.tsx
View File

@ -46,7 +46,7 @@ export default function StartPlanItem(props: Props) {
[setShowMenu, setAnchor],
)
const edit = async () => {
const edit = useCallback(async () => {
const now = await getNow()
const created = now.split('T')[0]
const first = await setRepo.findOne({
@ -60,7 +60,39 @@ export default function StartPlanItem(props: Props) {
setShowMenu(false)
if (!first) return toast('Nothing to edit.')
navigate('EditSet', { set: first })
}
}, [item.name, navigate])
const left = useCallback(
() => (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<RadioButton
onPress={() => onSelect(index)}
value={index.toString()}
status={selected === index ? 'checked' : 'unchecked'}
color={colors.primary}
/>
</View>
),
[index, selected, colors.primary, onSelect],
)
const right = useCallback(() => (
<View
style={{
width: '25%',
justifyContent: 'center',
}}
>
<Menu
anchor={anchor}
visible={showMenu}
onDismiss={() => setShowMenu(false)}
>
<Menu.Item leadingIcon='edit' onPress={edit} title='Edit' />
<Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
</Menu>
</View>
), [anchor, showMenu, edit, undo])
return (
<List.Item
@ -70,34 +102,8 @@ export default function StartPlanItem(props: Props) {
? `${item.total} / ${item.sets}`
: item.total.toString()}
onPress={() => onSelect(index)}
left={() => (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<RadioButton
onPress={() =>
onSelect(index)}
value={index.toString()}
status={selected === index ? 'checked' : 'unchecked'}
color={colors.primary}
/>
</View>
)}
right={() => (
<View
style={{
width: '25%',
justifyContent: 'center',
}}
>
<Menu
anchor={anchor}
visible={showMenu}
onDismiss={() => setShowMenu(false)}
>
<Menu.Item leadingIcon='edit' onPress={edit} title='Edit' />
<Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
</Menu>
</View>
)}
left={left}
right={right}
/>
)
}

67
WorkoutItem.tsx
View File

@ -40,6 +40,41 @@ export default function WorkoutItem({
return `${item.sets} x ${item.minutes || 0}:${seconds}`
}, [item])
const left = useCallback(() => {
if (!images || !item.image) return null
return (
<Image
source={{ uri: item.image }}
style={{ height: 75, width: 75 }}
/>
)
}, [item.image, images])
const right = useCallback(() => {
return (
<Text
style={{
alignSelf: 'center',
}}
>
<Menu
anchor={anchor}
visible={showMenu}
onDismiss={() => setShowMenu(false)}
>
<Menu.Item
leadingIcon='delete'
onPress={() => {
setShowRemove(item.name)
setShowMenu(false)
}}
title='Delete'
/>
</Menu>
</Text>
)
}, [anchor, showMenu, item.name])
return (
<>
<List.Item
@ -47,36 +82,8 @@ export default function WorkoutItem({
title={item.name}
description={description}
onLongPress={longPress}
left={() =>
images &&
item.image && (
<Image
source={{ uri: item.image }}
style={{ height: 75, width: 75 }}
/>
)}
right={() => (
<Text
style={{
alignSelf: 'center',
}}
>
<Menu
anchor={anchor}
visible={showMenu}
onDismiss={() => setShowMenu(false)}
>
<Menu.Item
leadingIcon='delete'
onPress={() => {
setShowRemove(item.name)
setShowMenu(false)
}}
title='Delete'
/>
</Menu>
</Text>
)}
left={left}
right={right}
/>
<ConfirmDialog
title={`Delete ${showRemove}`}