TextFieldInput

packages/example/src/lib/TextFieldInput.tsx

@@ -8,30 +8,33 @@ import * as React from "react"
 export type TextFieldInputProps<A, R> = Omit<useInput.Options<A, R>, "schema"> & Omit<TextField.RootProps, "ref">
 export type TextFieldOptionalInputProps<A, R> = Omit<useOptionalInput.Options<A, R>, "schema"> & Omit<TextField.RootProps, "ref">
 
-export const TextFieldInput: {
-    <A, R>(options: {
-        readonly optional: true
-        readonly schema: Schema.Schema<A, string, R>
-    }): Component.Component<TextFieldOptionalInputProps<A, R>, React.JSX.Element, ParseResult.ParseError, R>
-    <A, R>(options: {
-        readonly optional?: false
-        readonly schema: Schema.Schema<A, string, R>
-    }): Component.Component<TextFieldInputProps<A, R>, React.JSX.Element, ParseResult.ParseError, R>
-} = <A, R>(options: {
-    readonly optional?: boolean
+export const TextFieldInput = <A, R, O extends boolean = false>(options: {
+    readonly optional?: O
     readonly schema: Schema.Schema<A, string, R>
-}) => Component.makeUntraced(function* TextFieldInput(props: TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>) {
-    const input = options.optional
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        ? yield* useOptionalInput({
-            schema: options.schema,
-            ...props as TextFieldOptionalInputProps<A, R>,
-        })
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        : yield* useInput({
-            schema: options.schema,
-            ...props as TextFieldInputProps<A, R>,
-        })
+}) => Component.makeUntraced(function* TextFieldInput(props: O extends true
+    ? TextFieldOptionalInputProps<A, R>
+    : TextFieldInputProps<A, R>
+) {
+    const input: (
+        | { readonly optional: true } & useOptionalInput.Result
+        | { readonly optional: false } & useInput.Result
+    ) = options.optional
+        ? {
+            optional: true,
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ...yield* useOptionalInput({
+                schema: options.schema,
+                ...props as TextFieldOptionalInputProps<A, R>,
+            }),
+        }
+        : {
+            optional: false,
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ...yield* useInput({
+                schema: options.schema,
+                ...props as TextFieldInputProps<A, R>,
+            })
+        }
 
     const issues = React.useMemo(() => Option.map(
         input.error,
@@ -49,15 +52,16 @@ export const TextFieldInput: {
             }
 
             <Flex direction="row" align="center" gap="1">
-                {options.optional &&
+                {input.optional &&
                     <Switch
-
+                        checked={!input.disabled}
+                        onCheckedChange={checked => input.setDisabled(!checked)}
                     />
                 }
 
                 <TextField.Root
                     {...input}
-                    {...Struct.omit(props, "ref")}
+                    {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref")}
                 />
             </Flex>
         </Flex>