xref: /MusicFree/src/pages/fileSelector/fileItem.tsx (revision 410a159129b1f6a7a1f44fde7bfad9a46f91e161) 
1import React, {memo} from 'react';
2import {Pressable, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import ThemeText from '@/components/base/themeText';
5import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
6import useTextColor from '@/hooks/useTextColor';
7import Checkbox from '@/components/base/checkbox';
8import {TouchableOpacity} from 'react-native-gesture-handler';
9
10const ITEM_HEIGHT = rpx(96);
11
12interface IProps {
13    type: 'folder' | 'file';
14    path: string;
15    parentPath: string;
16    checked?: boolean;
17    onItemPress: (currentChecked?: boolean) => void;
18    onCheckedChange: (checked: boolean) => void;
19}
20function FileItem(props: IProps) {
21    const {
22        type,
23        path,
24        parentPath,
25        checked,
26        onItemPress,
27        onCheckedChange: onCheckChange,
28    } = props;
29
30    const textColor = useTextColor();
31
32    // 返回逻辑
33
34    return (
35        <View style={styles.container}>
36            <Pressable
37                onPress={() => {
38                    onItemPress(checked);
39                }}
40                style={styles.pathWrapper}>
41                <Icon
42                    name={type === 'folder' ? 'folder-outline' : 'file-outline'}
43                    color={textColor}
44                    style={styles.folderIcon}
45                />
46                <ThemeText
47                    style={styles.path}
48                    numberOfLines={1}
49                    ellipsizeMode="tail">
50                    {path.substring(
51                        parentPath === '/' ? 1 : parentPath.length + 1,
52                    )}
53                </ThemeText>
54            </Pressable>
55            <TouchableOpacity
56                onPress={() => {
57                    onCheckChange(!checked);
58                }}
59                style={styles.checkIcon}>
60                <Checkbox checked={checked} />
61            </TouchableOpacity>
62        </View>
63    );
64}
65
66export default memo(
67    FileItem,
68    (prev, curr) =>
69        prev.checked === curr.checked &&
70        prev.parentPath === curr.parentPath &&
71        prev.path === curr.path,
72);
73
74const styles = StyleSheet.create({
75    container: {
76        width: '100%',
77        height: ITEM_HEIGHT,
78        paddingHorizontal: rpx(24),
79        flexDirection: 'row',
80        alignItems: 'center',
81        justifyContent: 'space-between',
82    },
83    folderIcon: {
84        fontSize: rpx(32),
85        marginRight: rpx(14),
86    },
87    pathWrapper: {
88        flexDirection: 'row',
89        flex: 1,
90        alignItems: 'center',
91        height: '100%',
92        marginRight: rpx(60),
93    },
94    path: {
95        height: '100%',
96        textAlignVertical: 'center',
97    },
98    checkIcon: {
99        padding: rpx(14),
100    },
101});
102