Front: Typecheck Elements

front/components/GtkUI/Element.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { ElementProps } from "./ElementList";
+import { ElementProps } from "./ElementTypes";
 import { RawElement } from "./RawElement";
-import { Pressable } from "native-base";
+import { Pressable, IPressableProps } from "native-base";
+import { ElementTextProps, ElementToggleProps } from './ElementTypes';
 
-export const Element = (props: ElementProps) => {
-	let actionFunction = null as null | Function;
+export const Element = <T extends ElementProps,>(props: T) => {
+	let actionFunction: IPressableProps['onPress'] = null;
 
 	switch (props.type) {
 		case "text":

front/components/GtkUI/ElementList.tsx

@@ -2,14 +2,7 @@ import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { Element } from "./Element";
 import useColorScheme from "../../hooks/colorScheme";
-
-import {
-	ElementTextProps,
-	ElementToggleProps,
-	ElementDropdownProps,
-	ElementRangeProps,
-	ElementType,
-} from "./ElementTypes";
+import { ElementProps } from "./ElementTypes";
 
 import {
 	Box,
@@ -17,21 +10,6 @@ import {
 	Divider,
 } from "native-base";
 
-export type ElementProps = {
-	title: string;
-	icon?: React.ReactNode;
-	type?: ElementType;
-	helperText?: string;
-	description?: string;
-	disabled?: boolean;
-	data?:
-		| ElementTextProps
-		| ElementToggleProps
-		| ElementDropdownProps
-		| ElementRangeProps
-		| React.ReactNode;
-};
-
 type ElementListProps = {
 	elements: ElementProps[];
 	style?: StyleProp<ViewStyle>;
@@ -42,9 +20,11 @@ const ElementList = ({ elements, style }: ElementListProps) => {
 	const isDark = colorScheme === "dark";
 	const elementStyle = {
 		borderRadius: 10,
-		boxShadow: isDark ?  "0px 0px 3px 0px rgba(255,255,255,0.6)" : "0px 0px 3px 0px rgba(0,0,0,0.4)",
+		boxShadow: isDark
+			? "0px 0px 3px 0px rgba(255,255,255,0.6)"
+			: "0px 0px 3px 0px rgba(0,0,0,0.4)",
 		overflow: "hidden",
-	};
+	} as const;
 
 	return (
 		<Column style={[style, elementStyle]}>

front/components/GtkUI/ElementTypes.tsx

@@ -1,12 +1,19 @@
 import { Select, Switch, Text, Icon, Row, Slider } from "native-base";
 import { MaterialIcons } from "@expo/vector-icons";
-export type ElementType =
-	| "custom"
-	| "default"
-	| "text"
-	| "toggle"
-	| "dropdown"
-	| "range";
+
+export type ElementProps = {
+	title: string;
+	icon?: React.ReactNode;
+	helperText?: string;
+	description?: string;
+	disabled?: boolean;
+} & (
+	{ type: 'text', data : ElementTextProps } |
+	{ type: 'toggle', data : ElementToggleProps } |
+	{ type: 'dropdown', data : ElementDropdownProps } |
+	{ type: 'range', data : ElementRangeProps } |
+	{ type: 'custom', data : React.ReactNode } 
+);
 
 export type DropdownOption = {
 	label: string;

front/components/GtkUI/RawElement.tsx

@@ -12,7 +12,7 @@ import {
 } from "native-base";
 import useColorScheme from "../../hooks/colorScheme";
 import { Ionicons } from "@expo/vector-icons";
-import { ElementProps } from "./ElementList";
+import { ElementProps } from "./ElementTypes";
 import {
 	getElementDropdownNode,
 	getElementTextNode,
@@ -121,28 +121,15 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 					{(() => {
 						switch (type) {
 							case "text":
-								return getElementTextNode(
-									data as ElementTextProps,
-									disabled ?? false
-								);
+								return getElementTextNode(data, disabled ?? false);
 							case "toggle":
-								return getElementToggleNode(
-									data as ElementToggleProps,
-									disabled ?? false
-								);
+								return getElementToggleNode(data, disabled ?? false);
 							case "dropdown":
-								return getElementDropdownNode(
-									data as ElementDropdownProps,
-									disabled ?? false
-								);
+								return getElementDropdownNode(data, disabled ?? false);
 							case "range":
-								return getElementRangeNode(
-									data as ElementRangeProps,
-									disabled ?? false,
-									title
-								);
+								return getElementRangeNode(data, disabled ?? false, title);
 							case "custom":
-								return data as React.ReactNode;
+								return data;
 							default:
 								return <Text>Unknown type</Text>;
 						}