1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import React, {useCallback, useEffect, useMemo} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
import {useFavorites} from '../hooks/useFavorites';
import DraggableFlatList, {
DragEndParams,
OpacityDecorator,
ShadowDecorator,
} from 'react-native-draggable-flatlist';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {AppMenu} from './AppMenu';
import {useInstalledApps} from '../hooks/useInstalledApps';
const AppLabel: React.FC<{app: AppDetail}> = React.memo(({app}) => {
return (
<View className="flex-1">
<AppMenu app={app}>
<View className="py-3 px-2">
<Text className="text-lg">{app.label}</Text>
</View>
</AppMenu>
</View>
);
});
export const Favorites: React.FC<{active: boolean}> = (_) => {
const {apps} = useInstalledApps();
const {favoriteAppNames, setFavorites} = useFavorites();
const appByName = useMemo(
() => Object.fromEntries(apps.map((app) => [app.packageName, app])),
[apps],
);
const favoriteApps = useMemo(
() => favoriteAppNames.map((name) => appByName[name]).filter(Boolean),
[appByName, favoriteAppNames],
);
const onDragEnd = useCallback(
({data}: DragEndParams<AppDetail>) => {
setFavorites(data.map((app) => app.packageName));
},
[setFavorites],
);
return (
<View className="px-4 py-1">
<DraggableFlatList
data={favoriteApps}
onDragEnd={onDragEnd}
keyExtractor={(app) => app.packageName}
renderItem={({item: app, drag, isActive}) => (
<ShadowDecorator key={app.packageName}>
<OpacityDecorator>
<View
className={`flex-row justify-stretch items-center ${
isActive ? 'bg-[#181818] opacity-60' : ''
}`}>
<AppLabel app={app} />
<TouchableOpacity
onLongPress={drag}
disabled={isActive}
hitSlop={10}
className="p-3">
<Icon name="drag-indicator" size={21} color="#444" />
</TouchableOpacity>
</View>
</OpacityDecorator>
</ShadowDecorator>
)}
renderPlaceholder={() => <View className="flex-1 bg-[#181818]" />}
/>
</View>
);
};
|
