1 files changed, 78 insertions, 28 deletions

diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.tsx
index f7a6beeda..1e0d8eaab 100644
--- a/web/source/settings/components/form/inputs.jsx
+++ b/web/source/settings/components/form/inputs.tsx
@@ -17,9 +17,28 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-const React = require("react");
+import React from "react";
+
+import type {
+	ReactNode,
+	RefObject,
+} from "react";
+
+import type {
+	FileFormInputHook,
+	RadioFormInputHook,
+	TextFormInputHook,
+} from "../../lib/form/types";
+
+export interface TextInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
 
-function TextInput({ label, field, ...inputProps }) {
+export function TextInput({label, field, ...props}: TextInputProps) {
 	const { onChange, value, ref } = field;
 
 	return (
@@ -27,16 +46,25 @@ function TextInput({ label, field, ...inputProps }) {
 			<label>
 				{label}
 				<input
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLInputElement>}
+					{...props}
 				/>
 			</label>
 		</div>
 	);
 }
 
-function TextArea({ label, field, ...inputProps }) {
+export interface TextAreaProps extends React.DetailedHTMLProps<
+	React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+	HTMLTextAreaElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
+
+export function TextArea({label, field, ...props}: TextAreaProps) {
 	const { onChange, value, ref } = field;
 
 	return (
@@ -44,16 +72,25 @@ function TextArea({ label, field, ...inputProps }) {
 			<label>
 				{label}
 				<textarea
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLTextAreaElement>}
+					{...props}
 				/>
 			</label>
 		</div>
 	);
 }
 
-function FileInput({ label, field, ...inputProps }) {
+export interface FileInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: FileFormInputHook;
+}
+
+export function FileInput({ label, field, ...props }: FileInputProps) {
 	const { onChange, ref, infoComponent } = field;
 
 	return (
@@ -66,15 +103,16 @@ function FileInput({ label, field, ...inputProps }) {
 				<input
 					type="file"
 					className="hidden"
-					{...{ onChange, ref }}
-					{...inputProps}
+					onChange={onChange}
+					ref={ref ? ref as RefObject<HTMLInputElement> : undefined}
+					{...props}
 				/>
 			</label>
 		</div>
 	);
 }
 
-function Checkbox({ label, field, ...inputProps }) {
+export function Checkbox({ label, field, ...inputProps }) {
 	const { onChange, value } = field;
 
 	return (
@@ -91,16 +129,29 @@ function Checkbox({ label, field, ...inputProps }) {
 	);
 }
 
-function Select({ label, field, options, children, ...inputProps }) {
+export interface SelectProps extends React.DetailedHTMLProps<
+	React.SelectHTMLAttributes<HTMLSelectElement>,
+	HTMLSelectElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+	children?: ReactNode;
+	options: React.JSX.Element;
+}
+
+export function Select({ label, field, children, options, ...props }: SelectProps) {
 	const { onChange, value, ref } = field;
 
 	return (
 		<div className="form-field select">
 			<label>
-				{label} {children}
+				{label}
+				{children}
 				<select
-					{...{ onChange, value, ref }}
-					{...inputProps}
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLSelectElement>}
+					{...props}
 				>
 					{options}
 				</select>
@@ -109,7 +160,15 @@ function Select({ label, field, options, children, ...inputProps }) {
 	);
 }
 
-function RadioGroup({ field, label, ...inputProps }) {
+export interface RadioGroupProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: RadioFormInputHook;
+}
+
+export function RadioGroup({ label, field, ...props }: RadioGroupProps) {
 	return (
 		<div className="form-field radio">
 			{Object.entries(field.options).map(([value, radioLabel]) => (
@@ -120,7 +179,7 @@ function RadioGroup({ field, label, ...inputProps }) {
 						value={value}
 						checked={field.value == value}
 						onChange={field.onChange}
-						{...inputProps}
+						{...props}
 					/>
 					{radioLabel}
 				</label>
@@ -129,12 +188,3 @@ function RadioGroup({ field, label, ...inputProps }) {
 		</div>
 	);
 }
-
-module.exports = {
-	TextInput,
-	TextArea,
-	FileInput,
-	Checkbox,
-	Select,
-	RadioGroup
-};
\ No newline at end of file