Fix a few instances of react/no-unstable-nested-components
This commit is contained in:
parent
040d588b5a
commit
36d3de401b
|
@ -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],
|
||||
|
|
36
SetItem.tsx
36
SetItem.tsx
|
@ -42,24 +42,19 @@ export default function SetItem({
|
|||
return LIGHT_RIPPLE
|
||||
}, [dark, ids, item.id])
|
||||
|
||||
const left = useCallback(() => {
|
||||
if (!settings.images || !item.image) return null
|
||||
return (
|
||||
<List.Item
|
||||
onPress={press}
|
||||
title={item.name}
|
||||
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 && (
|
||||
)
|
||||
}, [item.image, settings.images])
|
||||
|
||||
const right = useCallback(() => {
|
||||
if (!settings.showDate) return null
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
|
@ -68,9 +63,18 @@ export default function SetItem({
|
|||
>
|
||||
{format(new Date(item.created), settings.date || 'P')}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
)
|
||||
}, [settings.showDate, item.created, settings.date, dark])
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
onPress={press}
|
||||
title={item.name}
|
||||
description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
|
||||
onLongPress={longPress}
|
||||
style={{ backgroundColor }}
|
||||
left={left}
|
||||
right={right}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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,28 +60,23 @@ export default function StartPlanItem(props: Props) {
|
|||
setShowMenu(false)
|
||||
if (!first) return toast('Nothing to edit.')
|
||||
navigate('EditSet', { set: first })
|
||||
}
|
||||
}, [item.name, navigate])
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
onLongPress={longPress}
|
||||
title={item.name}
|
||||
description={item.sets
|
||||
? `${item.total} / ${item.sets}`
|
||||
: item.total.toString()}
|
||||
onPress={() => onSelect(index)}
|
||||
left={() => (
|
||||
const left = useCallback(
|
||||
() => (
|
||||
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
||||
<RadioButton
|
||||
onPress={() =>
|
||||
onSelect(index)}
|
||||
onPress={() => onSelect(index)}
|
||||
value={index.toString()}
|
||||
status={selected === index ? 'checked' : 'unchecked'}
|
||||
color={colors.primary}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
right={() => (
|
||||
),
|
||||
[index, selected, colors.primary, onSelect],
|
||||
)
|
||||
|
||||
const right = useCallback(() => (
|
||||
<View
|
||||
style={{
|
||||
width: '25%',
|
||||
|
@ -97,7 +92,18 @@ export default function StartPlanItem(props: Props) {
|
|||
<Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
|
||||
</Menu>
|
||||
</View>
|
||||
)}
|
||||
), [anchor, showMenu, edit, undo])
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
onLongPress={longPress}
|
||||
title={item.name}
|
||||
description={item.sets
|
||||
? `${item.total} / ${item.sets}`
|
||||
: item.total.toString()}
|
||||
onPress={() => onSelect(index)}
|
||||
left={left}
|
||||
right={right}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -40,22 +40,18 @@ export default function WorkoutItem({
|
|||
return `${item.sets} x ${item.minutes || 0}:${seconds}`
|
||||
}, [item])
|
||||
|
||||
const left = useCallback(() => {
|
||||
if (!images || !item.image) return null
|
||||
return (
|
||||
<>
|
||||
<List.Item
|
||||
onPress={() => navigation.navigate('EditWorkout', { value: item })}
|
||||
title={item.name}
|
||||
description={description}
|
||||
onLongPress={longPress}
|
||||
left={() =>
|
||||
images &&
|
||||
item.image && (
|
||||
<Image
|
||||
source={{ uri: item.image }}
|
||||
style={{ height: 75, width: 75 }}
|
||||
/>
|
||||
)}
|
||||
right={() => (
|
||||
)
|
||||
}, [item.image, images])
|
||||
|
||||
const right = useCallback(() => {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
|
@ -76,7 +72,18 @@ export default function WorkoutItem({
|
|||
/>
|
||||
</Menu>
|
||||
</Text>
|
||||
)}
|
||||
)
|
||||
}, [anchor, showMenu, item.name])
|
||||
|
||||
return (
|
||||
<>
|
||||
<List.Item
|
||||
onPress={() => navigation.navigate('EditWorkout', { value: item })}
|
||||
title={item.name}
|
||||
description={description}
|
||||
onLongPress={longPress}
|
||||
left={left}
|
||||
right={right}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
title={`Delete ${showRemove}`}
|
||||
|
|
Loading…
Reference in New Issue
Block a user