aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/components/AppMenu.tsx39
-rw-r--r--src/components/Clock.tsx4
-rw-r--r--src/components/Favorites.tsx62
3 files changed, 61 insertions, 44 deletions
diff --git a/src/components/AppMenu.tsx b/src/components/AppMenu.tsx
index ec0d684..2319e73 100644
--- a/src/components/AppMenu.tsx
+++ b/src/components/AppMenu.tsx
@@ -2,7 +2,10 @@ import {Text, View, Modal, TouchableOpacity, Pressable} from 'react-native';
import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
import {useFavorites} from '../hooks/useFavorites';
import React, {useState} from 'react';
+// @ts-expect-error No declaration file
import IntentLauncher from '@angelkrak/react-native-intent-launcher';
+import {TouchableHighlight} from 'react-native-gesture-handler';
+import {useStableCallback} from '../hooks/useStableCallback';
export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
app,
@@ -11,24 +14,26 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
const [isOpen, setIsOpen] = useState(false);
const {addToFavorites, isFavorite, removeFromFavorites} = useFavorites();
- const menuPress = (fn: () => Promise<void> | void) => async () => {
+ const openContextMenu = useStableCallback(() => setIsOpen(true));
+ const closeContextMenu = useStableCallback(() => setIsOpen(false));
+
+ const onMenuItemPress = (fn: () => Promise<void> | void) => async () => {
+ closeContextMenu();
await fn();
- setIsOpen(false);
};
-
const menuItems = [
isFavorite(app.packageName)
? {
label: 'Remove from favorites',
- onPress: menuPress(() => removeFromFavorites(app.packageName)),
+ onPress: onMenuItemPress(() => removeFromFavorites(app.packageName)),
}
: {
label: 'Add to favorites',
- onPress: menuPress(() => addToFavorites(app.packageName)),
+ onPress: onMenuItemPress(() => addToFavorites(app.packageName)),
},
{
label: 'App info',
- onPress: menuPress(() =>
+ onPress: onMenuItemPress(() =>
IntentLauncher.startActivity({
action: 'android.settings.APPLICATION_DETAILS_SETTINGS',
data: 'package:' + app.packageName,
@@ -37,7 +42,7 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
},
{
label: 'Uninstall',
- onPress: menuPress(() =>
+ onPress: onMenuItemPress(() =>
IntentLauncher.startActivity({
action: 'android.intent.action.DELETE',
data: 'package:' + app.packageName,
@@ -46,25 +51,33 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
},
];
+ const openApp = useStableCallback(() =>
+ IntentLauncher.startAppByPackageName(app.packageName),
+ );
+
return (
<>
- <TouchableOpacity onLongPress={() => setIsOpen(true)}>
+ <TouchableHighlight
+ activeOpacity={0.7}
+ underlayColor="#101010"
+ onPress={openApp}
+ onLongPress={openContextMenu}>
{children}
- </TouchableOpacity>
+ </TouchableHighlight>
<Modal
visible={isOpen}
transparent={true}
animationType="none"
- onRequestClose={() => setIsOpen(false)}>
- <TouchableOpacity className="flex-1" onPress={() => setIsOpen(false)}>
+ onRequestClose={closeContextMenu}>
+ <TouchableOpacity className="flex-1" onPress={closeContextMenu}>
<View className="flex justify-center items-center h-full">
- <View className="shadow-lg bg-gray-900 w-2/3">
+ <View className="bg-[#181818] border border-[#222] w-2/3">
{menuItems.map((menuItem) => (
<Pressable
key={menuItem.label}
onPress={menuItem.onPress}
- className="py-3 px-4 border-b border-gray-800 last:border-b-0">
+ className="py-3 px-4 border-b border-[#222] last:border-b-0 last:border-transparent">
<Text className="text-lg text-gray-300">
{menuItem.label}
</Text>
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index 619a31b..f41a298 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,7 +1,7 @@
import React, {useEffect, useMemo, useState} from 'react';
import {Text, View} from 'react-native';
-export const Clock: React.FC = () => {
+export const Clock: React.FC = React.memo(() => {
const [date, setDate] = useState(() => new Date());
useEffect(() => {
const interval = setInterval(() => {
@@ -34,4 +34,4 @@ export const Clock: React.FC = () => {
<Text className="text-lg">{dateText}</Text>
</View>
);
-};
+});
diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
index c2adae7..6ee99cb 100644
--- a/src/components/Favorites.tsx
+++ b/src/components/Favorites.tsx
@@ -9,12 +9,23 @@ import DraggableFlatList, {
} from 'react-native-draggable-flatlist';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {AppMenu} from './AppMenu';
+import {useInstalledApps} from '../hooks/useInstalledApps';
-export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({
- apps,
- active,
-}) => {
- const {favoriteAppNames, setFavorites, refreshFavorites} = useFavorites();
+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])),
@@ -33,40 +44,33 @@ export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({
[setFavorites],
);
- useEffect(() => {
- if (!active) return;
- refreshFavorites();
- }, [active, refreshFavorites]);
-
return (
<View className="px-4 py-1">
<DraggableFlatList
data={favoriteApps}
onDragEnd={onDragEnd}
- keyExtractor={(item) => item.packageName}
+ keyExtractor={(app) => app.packageName}
renderItem={({item: app, drag, isActive}) => (
- <ShadowDecorator>
+ <ShadowDecorator key={app.packageName}>
<OpacityDecorator>
- <AppMenu app={app}>
- <View
- className={`py-3 px-2 flex-row w-full ${
- isActive ? 'bg-gray-950 opacity-60' : ''
- }`}>
- <Text className="text-lg flex-1">{app.label}</Text>
- <TouchableOpacity
- onLongPress={drag}
- disabled={isActive}
- delayLongPress={500}>
- <View className="py-1">
- <Icon name="drag-indicator" size={21} color="#444" />
- </View>
- </TouchableOpacity>
- </View>
- </AppMenu>
+ <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-gray-950" />}
+ renderPlaceholder={() => <View className="flex-1 bg-[#181818]" />}
/>
</View>
);