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