packages/example/src/lib/TextFieldInput.tsx

@@ -1,16 +1,17 @@
-import { Callout, Flex, Switch, TextField } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct } from "effect"
-import { Component } from "effect-fc"
+import { Callout, Checkbox, Flex, TextField } from "@radix-ui/themes"
+import { Array, Equivalence, Option, ParseResult, Schema, Struct } from "effect"
+import { Component, Memo } from "effect-fc"
 import { useInput, useOptionalInput } from "effect-fc/hooks"
 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 type TextFieldInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextField.RootProps, "ref">
+export type TextFieldOptionalInputProps<A, R> = Omit<useOptionalInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextField.RootProps, "ref">
 
 export const TextFieldInput = <A, R, O extends boolean = false>(options: {
     readonly optional?: O
     readonly schema: Schema.Schema<A, string, R>
+    readonly equivalence?: Equivalence.Equivalence<A>
 }) => Component.makeUntraced(function* TextFieldInput(props: O extends true
     ? TextFieldOptionalInputProps<A, R>
     : TextFieldInputProps<A, R>
@@ -24,6 +25,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useOptionalInput({
                 schema: options.schema,
+                equivalence: options.equivalence,
                 ...props as TextFieldOptionalInputProps<A, R>,
             }),
         }
@@ -32,38 +34,40 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             ...yield* useInput({
                 schema: options.schema,
+                equivalence: options.equivalence,
                 ...props as TextFieldInputProps<A, R>,
             })
         }
 
-    const issues = React.useMemo(() => Option.map(
-        input.error,
-        ParseResult.ArrayFormatter.formatErrorSync,
+    const issue = React.useMemo(() => input.error.pipe(
+        Option.map(ParseResult.ArrayFormatter.formatErrorSync),
+        Option.flatMap(Array.head),
     ), [input.error])
 
     return (
         <Flex direction="column" gap="1">
-            {Option.isSome(issues) &&
-                <Callout.Root color="red" role="alert">
-                    <Callout.Text>
-                        <ul>{issues.value.map((issue, i) => <li key={i}>{issue.message}</li>)}</ul>
-                    </Callout.Text>
-                </Callout.Root>
-            }
-
             <Flex direction="row" align="center" gap="1">
                 {input.optional &&
-                    <Switch
+                    <Checkbox
                         checked={!input.disabled}
                         onCheckedChange={checked => input.setDisabled(!checked)}
                     />
                 }
 
                 <TextField.Root
-                    {...input}
+                    {...input.optional
+                        ? Struct.pick(input, "value", "onChange", "disabled")
+                        : Struct.pick(input, "value", "onChange")
+                    }
                     {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref")}
                 />
             </Flex>
+
+            {(!(input.optional && input.disabled) && Option.isSome(issue)) &&
+                <Callout.Root color="red" role="alert">
+                    <Callout.Text>{issue.value.message}</Callout.Text>
+                </Callout.Root>
+            }
         </Flex>
     )
-})
+}).pipe(Memo.memo)