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 React, { useCallback, useMemo, useState } from 'react'
|
||||||
import { View } from 'react-native'
|
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'
|
import { ITEM_PADDING } from './constants'
|
||||||
|
|
||||||
export interface Item {
|
export interface Item {
|
||||||
|
@ -21,7 +21,6 @@ function Select({
|
||||||
label?: string
|
label?: string
|
||||||
}) {
|
}) {
|
||||||
const [show, setShow] = useState(false)
|
const [show, setShow] = useState(false)
|
||||||
const { colors } = useTheme()
|
|
||||||
|
|
||||||
const selected = useMemo(
|
const selected = useMemo(
|
||||||
() => items.find((item) => item.value === value) || items[0],
|
() => items.find((item) => item.value === value) || items[0],
|
||||||
|
@ -61,7 +60,7 @@ function Select({
|
||||||
>
|
>
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
titleStyle={{color: item.color}}
|
titleStyle={{ color: item.color }}
|
||||||
key={item.value}
|
key={item.value}
|
||||||
title={item.label}
|
title={item.label}
|
||||||
onPress={() => handlePress(item.value)}
|
onPress={() => handlePress(item.value)}
|
||||||
|
|
48
SetItem.tsx
48
SetItem.tsx
|
@ -42,6 +42,30 @@ export default function SetItem({
|
||||||
return LIGHT_RIPPLE
|
return LIGHT_RIPPLE
|
||||||
}, [dark, ids, item.id])
|
}, [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 (
|
return (
|
||||||
<List.Item
|
<List.Item
|
||||||
onPress={press}
|
onPress={press}
|
||||||
|
@ -49,28 +73,8 @@ 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}
|
||||||
style={{ backgroundColor }}
|
style={{ backgroundColor }}
|
||||||
left={() =>
|
left={left}
|
||||||
settings.images &&
|
right={right}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,7 @@ export default function StartPlanItem(props: Props) {
|
||||||
[setShowMenu, setAnchor],
|
[setShowMenu, setAnchor],
|
||||||
)
|
)
|
||||||
|
|
||||||
const edit = async () => {
|
const edit = useCallback(async () => {
|
||||||
const now = await getNow()
|
const now = await getNow()
|
||||||
const created = now.split('T')[0]
|
const created = now.split('T')[0]
|
||||||
const first = await setRepo.findOne({
|
const first = await setRepo.findOne({
|
||||||
|
@ -60,7 +60,39 @@ export default function StartPlanItem(props: Props) {
|
||||||
setShowMenu(false)
|
setShowMenu(false)
|
||||||
if (!first) return toast('Nothing to edit.')
|
if (!first) return toast('Nothing to edit.')
|
||||||
navigate('EditSet', { set: first })
|
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 (
|
return (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -70,34 +102,8 @@ export default function StartPlanItem(props: Props) {
|
||||||
? `${item.total} / ${item.sets}`
|
? `${item.total} / ${item.sets}`
|
||||||
: item.total.toString()}
|
: item.total.toString()}
|
||||||
onPress={() => onSelect(index)}
|
onPress={() => onSelect(index)}
|
||||||
left={() => (
|
left={left}
|
||||||
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
right={right}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,6 +40,41 @@ export default function WorkoutItem({
|
||||||
return `${item.sets} x ${item.minutes || 0}:${seconds}`
|
return `${item.sets} x ${item.minutes || 0}:${seconds}`
|
||||||
}, [item])
|
}, [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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -47,36 +82,8 @@ export default function WorkoutItem({
|
||||||
title={item.name}
|
title={item.name}
|
||||||
description={description}
|
description={description}
|
||||||
onLongPress={longPress}
|
onLongPress={longPress}
|
||||||
left={() =>
|
left={left}
|
||||||
images &&
|
right={right}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
title={`Delete ${showRemove}`}
|
title={`Delete ${showRemove}`}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user