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