u
This commit is contained in:
oneao committed
1 parent
ac724bbdaa
commit
500fab7a80
98 files changed
+24706
-109
No files matched your search
@@ -1,9 +1,10 @@
|
||||
import type { MoneyCategoryEnum, MoneyCategoryItem } from '@/types/money/category'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Pressable, Text, View } from 'react-native'
|
||||
import type { MoneyCategoryItem } from '@/types/money/category'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { FlatList, Pressable, Text, View } from 'react-native'
|
||||
import { AButton, ADrawer, AInput } from '@/components/common/ao'
|
||||
import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
|
||||
import { useMoneyCategoryStore } from '@/store/moneyCategory'
|
||||
import { MoneyCategoryEnum } from '@/types/money/category'
|
||||
|
||||
export interface EditCategoryForm {
|
||||
id?: number
|
||||
@@ -60,86 +61,104 @@ export default function CreateCategory({
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
// 缓存点击 Icon 的回调
|
||||
const handlePressIcon = useCallback(
|
||||
(icon: string) => {
|
||||
setForm(v => ({ ...v, icon }))
|
||||
},
|
||||
[setForm],
|
||||
)
|
||||
|
||||
// Memo 化单个 IconItem，避免重复渲染
|
||||
const IconItem = useCallback(({ icon, selected }: { icon: string, selected: boolean }) => {
|
||||
return (
|
||||
<Pressable
|
||||
className="w-1/5 mb-3 flex items-center"
|
||||
onPress={() => handlePressIcon(icon)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 46,
|
||||
height: 46,
|
||||
borderRadius: 28,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: selected ? '#333' : '#F3F4F6',
|
||||
}}
|
||||
>
|
||||
<MoneyCategoryIcon
|
||||
name={icon}
|
||||
size={32}
|
||||
color={selected ? '#fff' : '#000'}
|
||||
/>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}, [handlePressIcon])
|
||||
|
||||
// Memo 化渲染每组 Icon 的组件
|
||||
const renderGroup = useCallback(
|
||||
({ item }: { item: [string, string[]] }) => {
|
||||
const [groupName, icons] = item
|
||||
return (
|
||||
<View className="mb-4">
|
||||
<Text className="text-center text-sm mb-3">{groupName}</Text>
|
||||
<View className="flex flex-row flex-wrap">
|
||||
{icons.map(icon => (
|
||||
<IconItem key={icon} icon={icon} selected={form.icon === icon} />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
[IconItem, form.icon],
|
||||
)
|
||||
|
||||
// 使用 useMemo 缓存 FlatList 的数据
|
||||
const flatListData = useMemo(() => Object.entries(moneyCategoryStore.ICON_GROUPS), [moneyCategoryStore.ICON_GROUPS])
|
||||
|
||||
return (
|
||||
<ADrawer visible={isOpen} hideModal={handleClose} title="你好" Height="80%" duration={300} />
|
||||
<ADrawer
|
||||
visible={isOpen}
|
||||
hideModal={handleClose}
|
||||
height="80%"
|
||||
duration={300}
|
||||
header={(
|
||||
<View className="flex flex-row items-center justify-between w-full p-4">
|
||||
<AButton size="xs" variant="outline" onPress={handleClose}>
|
||||
取消
|
||||
</AButton>
|
||||
<Text className="text-lg font-medium">
|
||||
{type === MoneyCategoryEnum.Expense ? '添加支出分类' : '添加收入分类'}
|
||||
</Text>
|
||||
<AButton
|
||||
size="xs"
|
||||
disabled={confirmDisabled}
|
||||
loading={confirmLoading}
|
||||
onPress={async () => {
|
||||
if (!onConfirm)
|
||||
return
|
||||
try {
|
||||
setConfirmLoading(true)
|
||||
await onConfirm({ ...form, name: form.name.trim() })
|
||||
}
|
||||
finally {
|
||||
setConfirmLoading(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
确认
|
||||
</AButton>
|
||||
</View>
|
||||
)}
|
||||
>
|
||||
<FlatList
|
||||
ref={scrollRef}
|
||||
data={flatListData}
|
||||
keyExtractor={([groupName]) => groupName}
|
||||
renderItem={renderGroup}
|
||||
initialNumToRender={1}
|
||||
/>
|
||||
</ADrawer>
|
||||
)
|
||||
}
|
||||
|
||||
// <Drawer isOpen={isOpen} onClose={handleClose} size="lg" anchor="bottom">
|
||||
// <DrawerBackdrop />
|
||||
// <DrawerContent style={{ paddingLeft: 0, paddingRight: 0 }}>
|
||||
// <DrawerHeader className="px-4 flex flex-col gap-4">
|
||||
// <View className="flex flex-row items-center justify-between w-full">
|
||||
// <AButton size="xs" variant="outline" onPress={handleClose}>
|
||||
// 取消
|
||||
// </AButton>
|
||||
// <Text className="text-lg font-medium">
|
||||
// {type === MoneyCategoryEnum.Expense ? '添加支出分类' : '添加收入分类'}
|
||||
// </Text>
|
||||
// <AButton
|
||||
// size="xs"
|
||||
// disabled={confirmDisabled}
|
||||
// loading={confirmLoading}
|
||||
// onPress={async () => {
|
||||
// if (!onConfirm)
|
||||
// return
|
||||
// try {
|
||||
// setConfirmLoading(true)
|
||||
// await onConfirm({ ...form, name: form.name.trim() })
|
||||
// }
|
||||
// finally {
|
||||
// setConfirmLoading(false)
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
// 确认
|
||||
// </AButton>
|
||||
// </View>
|
||||
// <AInput
|
||||
// value={form.name}
|
||||
// placeholder="请输入名称(不超过5个字符)"
|
||||
// onChangeText={text => setForm(val => ({ ...val, name: text }))}
|
||||
// />
|
||||
// </DrawerHeader>
|
||||
|
||||
// <DrawerBody ref={scrollRef} className="mb-16">
|
||||
// {Object.entries(moneyCategoryStore.ICON_GROUPS).map(([groupName, icons]) => (
|
||||
// <View key={groupName} className="mb-4">
|
||||
// <Text className="text-center text-sm mb-3">{groupName}</Text>
|
||||
// <View className="flex flex-row flex-wrap">
|
||||
// {icons.map(icon => (
|
||||
// <Pressable
|
||||
// key={icon}
|
||||
// className="w-1/5 mb-3 flex items-center"
|
||||
// onPress={() => setForm(val => ({ ...val, icon }))}
|
||||
// >
|
||||
// <View
|
||||
// onLayout={(e) => {
|
||||
// console.log(e.nativeEvent.layout)
|
||||
// iconPositions.current[icon] = e.nativeEvent.layout.y
|
||||
// }}
|
||||
// style={{
|
||||
// width: 46,
|
||||
// height: 46,
|
||||
// borderRadius: 28,
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
// backgroundColor: icon === form.icon ? '#333' : '#F3F4F6',
|
||||
// }}
|
||||
// >
|
||||
// <MoneyCategoryIcon
|
||||
// name={icon}
|
||||
// size={32}
|
||||
// color={icon === form.icon ? '#fff' : '#000'}
|
||||
// />
|
||||
// </View>
|
||||
// </Pressable>
|
||||
// ))}
|
||||
// </View>
|
||||
// </View>
|
||||
// ))}
|
||||
// </DrawerBody>
|
||||
|
||||
// <DrawerFooter />
|
||||
// </DrawerContent>
|
||||
// </Drawer>
|
||||
Reference in new issue
Block a user