Modals finally work
This commit is contained in:
Joshua Higgins
6
.expo/types/router.d.ts
vendored
6
.expo/types/router.d.ts
vendored
@@ -6,9 +6,9 @@ export * from 'expo-router';
|
||||
declare module 'expo-router' {
|
||||
export namespace ExpoRouter {
|
||||
export interface __routes<T extends string | object = string> {
|
||||
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
|
||||
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/`; params?: Router.UnknownOutputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; };
|
||||
href: Router.RelativePathString | Router.ExternalPathString | `/${`?${string}` | `#${string}` | ''}` | `/_sitemap${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
|
||||
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/createComputer`; params?: Router.UnknownInputParams; } | { pathname: `/createServer`; params?: Router.UnknownInputParams; } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
|
||||
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/createComputer`; params?: Router.UnknownOutputParams; } | { pathname: `/createServer`; params?: Router.UnknownOutputParams; } | { pathname: `/`; params?: Router.UnknownOutputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; };
|
||||
href: Router.RelativePathString | Router.ExternalPathString | `/createComputer${`?${string}` | `#${string}` | ''}` | `/createServer${`?${string}` | `#${string}` | ''}` | `/${`?${string}` | `#${string}` | ''}` | `/_sitemap${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/createComputer`; params?: Router.UnknownInputParams; } | { pathname: `/createServer`; params?: Router.UnknownInputParams; } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,65 @@
|
||||
import { Stack } from "expo-router";
|
||||
import {Stack, useRouter} from "expo-router";
|
||||
import {Text, TouchableOpacity, View} from "react-native";
|
||||
import {iOS_HIGHLIGHT} from "@/app/index";
|
||||
|
||||
export default function RootLayout() {
|
||||
return <Stack />;
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack.Screen name="index" />
|
||||
<Stack.Screen name="createComputer" options={{
|
||||
presentation: 'modal',
|
||||
title: 'Add a Computer',
|
||||
headerLeft: props => <Cancel />,
|
||||
headerRight: props =>
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
onPress={(event) => {
|
||||
//TODO: Save to DB
|
||||
|
||||
router.navigate('../');
|
||||
}}>
|
||||
<Text style={{
|
||||
color: iOS_HIGHLIGHT,
|
||||
fontWeight: 'bold',
|
||||
}}>Save</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}} />
|
||||
<Stack.Screen name="createServer" options={{
|
||||
presentation: 'modal',
|
||||
title: 'Add a WoL Server',
|
||||
headerLeft: props => <Cancel />,
|
||||
headerRight: props =>
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
onPress={(event) => {
|
||||
//TODO: Save to DB
|
||||
|
||||
router.navigate('../');
|
||||
}}>
|
||||
<Text style={{
|
||||
color: iOS_HIGHLIGHT,
|
||||
fontWeight: 'bold',
|
||||
}}>Save</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Cancel() {
|
||||
const router = useRouter();
|
||||
return <View>
|
||||
<TouchableOpacity
|
||||
onPress={(event) => {
|
||||
router.navigate('../');
|
||||
}}>
|
||||
<Text style={{ color: 'red'}}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
|
||||
14
app/createComputer.tsx
Normal file
14
app/createComputer.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import {Text, View} from "react-native";
|
||||
import {MenuView} from "@react-native-menu/menu";
|
||||
import {ChevronDown, Plus} from "lucide-react-native";
|
||||
import {Stack} from "expo-router";
|
||||
|
||||
export default function CreateComputer() {
|
||||
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
11
app/createServer.tsx
Normal file
11
app/createServer.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import {Text, View} from "react-native";
|
||||
|
||||
export default function CreateServer() {
|
||||
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
116
app/index.tsx
116
app/index.tsx
@@ -1,59 +1,15 @@
|
||||
import { Stack } from "expo-router";
|
||||
import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
|
||||
import {Href, Stack, useRouter} from "expo-router";
|
||||
import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform, Modal} from "react-native";
|
||||
import {RowMap, SwipeListView} from "react-native-swipe-list-view";
|
||||
import {ChevronDown, Plus} from "lucide-react-native";
|
||||
import {useEffect, useState} from "react";
|
||||
import {MenuAction, MenuView, NativeActionEvent} from "@react-native-menu/menu";
|
||||
import {SQLiteDatabase, SQLiteProvider, useSQLiteContext} from "expo-sqlite";
|
||||
import CreateComputer from "@/app/createComputer";
|
||||
|
||||
const servers: Server[] = [
|
||||
{
|
||||
key: 0,
|
||||
name: "Test Data Server",
|
||||
domain: "localhost",
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: "The Other Server",
|
||||
domain: "192.168.86.252",
|
||||
}
|
||||
];
|
||||
const computers: Computer[] = [
|
||||
{
|
||||
key: 0,
|
||||
server_key: 0,
|
||||
name: "Test PC",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
server_key: 0,
|
||||
name: "Another PC in the basement",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
server_key: 1,
|
||||
name: "Mom's PC",
|
||||
emoji: "🌹",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
server_key: 1,
|
||||
name: "Jordan's PC",
|
||||
emoji: "💪",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
}
|
||||
];
|
||||
export const iOS_HIGHLIGHT = "#007AFF";
|
||||
|
||||
async function migrateDbIfNeeded(db: SQLiteDatabase) {
|
||||
export async function migrateDbIfNeeded(db: SQLiteDatabase) {
|
||||
await db.execAsync(`
|
||||
PRAGMA journal_mode = WAL;
|
||||
CREATE TABLE IF NOT EXISTS servers (key INTEGER PRIMARY KEY NOT NULL, name TEXT NOT NULL, domain TEXT NOT NULL);
|
||||
@@ -98,14 +54,25 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
|
||||
setup();
|
||||
}, []);
|
||||
|
||||
const [ menuEvent, setMenuEvent ] = useState("");
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
if (menuEvent === "addComputer") {
|
||||
router.navigate('/createComputer');
|
||||
} else if (menuEvent === "addServer") {
|
||||
router.navigate('/createServer');
|
||||
}
|
||||
setMenuEvent("");
|
||||
}, [menuEvent]);
|
||||
|
||||
const selectActions: MenuAction[] = [];
|
||||
for (const server of props.servers) {
|
||||
if (server.name !== props.currentServerName) {
|
||||
selectActions.push({
|
||||
id: server.domain,
|
||||
title: server.name,
|
||||
titleColor: '#2367A2',
|
||||
imageColor: '#2367A2',
|
||||
titleColor: '#000000',
|
||||
imageColor: '#000000',
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -130,6 +97,25 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
|
||||
props.setCurrentServerName(newName?.name ?? "None");
|
||||
};
|
||||
|
||||
const addActions: MenuAction[] = [
|
||||
{
|
||||
id: 'addServer',
|
||||
title: 'Add WoL Server',
|
||||
titleColor: '#000000',
|
||||
image: 'globe',
|
||||
imageColor: '#000000',
|
||||
}
|
||||
];
|
||||
if (props.currentServerName !== "None") {
|
||||
addActions.push({
|
||||
id: 'addComputer',
|
||||
title: 'Add Computer',
|
||||
titleColor: '#000000',
|
||||
image: 'desktopcomputer',
|
||||
imageColor: '#000000',
|
||||
});
|
||||
}
|
||||
|
||||
return <Stack.Screen
|
||||
options={{
|
||||
title: 'Home',
|
||||
@@ -147,9 +133,9 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
}}>{props.currentServerName}</Text>
|
||||
{selectActions.length > 1 &&
|
||||
{props.servers.length > 0 &&
|
||||
<View style={{
|
||||
backgroundColor: "#007AFF",
|
||||
backgroundColor: iOS_HIGHLIGHT,
|
||||
borderRadius: 100,
|
||||
}}>
|
||||
<MenuView onPressAction={handleServerSelect} actions={selectActions}>
|
||||
@@ -161,29 +147,11 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
|
||||
headerRight: props =>
|
||||
<View>
|
||||
<MenuView
|
||||
onPressAction={({nativeEvent}) => {
|
||||
console.log(JSON.stringify(nativeEvent));
|
||||
//TODO: Handle adding computers/servers
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
id: 'addComputer',
|
||||
title: 'Add Computer',
|
||||
titleColor: '#000000',
|
||||
image: 'desktopcomputer',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
{
|
||||
id: 'addServer',
|
||||
title: 'Add Server',
|
||||
titleColor: '#000000',
|
||||
image: 'globe',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
]}
|
||||
onPressAction={({nativeEvent}) => { setMenuEvent(nativeEvent.event); }}
|
||||
actions={addActions}
|
||||
shouldOpenOnLongPress={false}
|
||||
>
|
||||
<Plus color={"#007AFF"}/>
|
||||
<Plus color={iOS_HIGHLIGHT}/>
|
||||
</MenuView>
|
||||
</View>
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user