Work

packages/example/src/lib/TextFieldInput.tsx

@@ -1,8 +1,7 @@
-import { Callout, Flex, TextField } from "@radix-ui/themes"
+import { Callout, Flex, Switch, TextField } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct, SubscriptionRef } from "effect"
+import { Option, ParseResult, Schema, Struct } from "effect"
 import { Component } from "effect-fc"
 import { useInput, useOptionalInput } from "effect-fc/hooks"
-import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
 
 
@@ -18,19 +17,21 @@ export const TextFieldInput: {
         readonly optional?: false
         readonly schema: Schema.Schema<A, string, R>
     }): Component.Component<TextFieldInputProps<A, R>, React.JSX.Element, ParseResult.ParseError, R>
-} = <A, R>(options:
+} = <A, R>(options: {
-    {
+    readonly optional?: boolean
-        readonly optional: true
+    readonly schema: Schema.Schema<A, string, R>
-    }
+}) => Component.makeUntraced(function* TextFieldInput(props: TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>) {
-): Component.Component<
-    TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>,
-    React.JSX.Element,
-    ParseResult.ParseError,
-    R
-> => Component.makeUntraced(function* TextFieldInput(props) {
     const input = options.optional
-        ? yield* useOptionalInput({ schema, ...props })
+        // eslint-disable-next-line react-hooks/rules-of-hooks
-        : yield* useInput({ schema, ...props })
+        ? 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>,
+        })
 
     const issues = React.useMemo(() => Option.map(
         input.error,
@@ -47,11 +48,18 @@ export const TextFieldInput: {
                 </Callout.Root>
             }
 
-            <TextField.Root
+            <Flex direction="row" align="center" gap="1">
-                value={input.value}
+                {options.optional &&
-                onChange={input.onChange}
+                    <Switch
-                {...Struct.omit(props, "ref")}
+
-            />
+                    />
+                }
+
+                <TextField.Root
+                    {...input}
+                    {...Struct.omit(props, "ref")}
+                />
+            </Flex>
         </Flex>
     )
 })