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],
|
||||
|
@ -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
48
SetItem.tsx
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}`}
|
||||
|
|
Loading…
Reference in New Issue
Block a user