add text entry to settings UI

Cycling74 · Jun 6, 2024 · 8170e25 · 8170e25
1 parent 77ca89d
commit 8170e25
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
@@ -35,7 +35,7 @@ const getSettingUITypeForConfig = (config: ConfigRecord): SettingsItemType => {
 
 	switch (config.oscType) {
 		case OSCQueryValueType.String:
-			return SettingsItemType.Select;
+			return config.options ? SettingsItemType.Select : SettingsItemType.Text;
 		case OSCQueryValueType.True:
 		case OSCQueryValueType.False:
 			return SettingsItemType.OnOff;

diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx
@@ -1,4 +1,4 @@
-import { Group, SegmentedControl, Switch, NumberInput, Select, ActionIcon } from "@mantine/core";
+import { Group, SegmentedControl, Switch, NumberInput, TextInput, Select, ActionIcon } from "@mantine/core";
 import { ChangeEvent, FunctionComponent, ReactNode, memo } from "react";
 import classes from "./settings.module.css";
 import { SettingTarget } from "../../lib/constants";
@@ -10,7 +10,8 @@ export enum SettingsItemType {
 	OnOff,
 	Select,
 	Switch,
-	Numeric
+	Numeric,
+	Text
 }
 
 export type SettingsItemValue = string | number | boolean;
@@ -34,6 +35,11 @@ export interface SettingsNumericProps extends BaseSettingsItemProps {
 	value: number;
 }
 
+export interface SettingsTextProps extends BaseSettingsItemProps {
+	type: SettingsItemType.Text;
+	value: number;
+}
+
 export interface SettingsOnOffProps extends BaseSettingsItemProps {
 	type: SettingsItemType.OnOff,
 	value: boolean;
@@ -51,7 +57,7 @@ export interface SettingsToggleProps extends BaseSettingsItemProps {
 	value: string;
 }
 
-export type SettingsItemProps = SettingsNumericProps | SettingsOnOffProps | SettingsSelectProps | SettingsToggleProps;
+export type SettingsItemProps = SettingsNumericProps | SettingsTextProps | SettingsOnOffProps | SettingsSelectProps | SettingsToggleProps;
 
 const SettingsNumericInput = ({ onChange, min, max, name, target, value }: Pick<SettingsNumericProps, "max" | "min" | "name" | "onChange" | "target" | "value">) => {
 	return (
@@ -65,6 +71,16 @@ const SettingsNumericInput = ({ onChange, min, max, name, target, value }: Pick<
 	);
 };
 
+const SettingsTextInput = ({ onChange, name, target, value }: Pick<SettingsTextProps, "name" | "onChange" | "target" | "value">) => {
+	return (
+		<TextInput
+			onChange={ (ev: ChangeEvent<HTMLInputElement>) => onChange(target, name, ev.currentTarget.value) }
+			name={ name }
+			value={ value }
+		/>
+	);
+};
+
 const SettingOnOffInput = ({ onChange, name, target, value }: Pick<SettingsOnOffProps, "name" | "onChange" | "target" | "value">) => {
 	return (
 		<Switch
@@ -110,6 +126,11 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 			el = <SettingsNumericInput { ...commonProps } max={ compProps.max } min={ compProps.min } value={ compProps.value } />;
 			break;
 		}
+		case SettingsItemType.Text: {
+			const compProps = props as SettingsTextProps;
+			el = <SettingsTextInput { ...commonProps } value={ compProps.value } />;
+			break;
+		}
 		case SettingsItemType.OnOff: {
 			const compProps = props as SettingsOnOffProps;
 			el = <SettingOnOffInput { ...commonProps } value={ compProps.value } />;