Fix

2025-08-19 20:07:35 +02:00
parent c55862e57c
commit fef1b70b2c
5 changed files with 49 additions and 63 deletions
--- a/packages/effect-fc/src/hooks/Hooks/useInput.ts
+++ b/packages/effect-fc/src/hooks/Hooks/useInput.ts
@@ -8,14 +8,14 @@ import { useRefState } from "./useRefState.js"
 export namespace useInput {
    export interface Options<A, R> {
        readonly schema: Schema.Schema<A, string, R>
+        readonly equivalence?: Equivalence.Equivalence<A>
        readonly ref: SubscriptionRef.SubscriptionRef<A>
        readonly debounce?: Duration.DurationInput
-        readonly equivalence?: Equivalence.Equivalence<A>
    }

    export interface Result {
        readonly value: string
-        readonly onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
        readonly error: Option.Option<ParseResult.ParseError>
    }
 }
@@ -56,10 +56,8 @@ export const useInput: {
                Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
            ),
        ),
-    ], { concurrency: "unbounded" }), [options.ref, options.schema, options.debounce, options.equivalence, internalRef])
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])

    const [value, setValue] = yield* useRefState(internalRef)
-    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value), [setValue])
-
-    return { value, onChange, error }
+    return { value, setValue, error }
 })
--- a/packages/effect-fc/src/hooks/Hooks/useOptionalInput.ts
+++ b/packages/effect-fc/src/hooks/Hooks/useOptionalInput.ts
@@ -12,16 +12,16 @@ export namespace useOptionalInput {
    export interface Options<A, R> {
        readonly schema: Schema.Schema<A, string, R>
        readonly defaultValue?: A
+        readonly equivalence?: Equivalence.Equivalence<A>
        readonly ref: SubscriptionRef.SubscriptionRef<Option.Option<A>>
        readonly debounce?: Duration.DurationInput
-        readonly equivalence?: Equivalence.Equivalence<A>
    }

    export interface Result {
        readonly value: string
-        readonly onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
-        readonly disabled: boolean
-        readonly setDisabled: React.Dispatch<React.SetStateAction<boolean>>
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
+        readonly enabled: boolean
+        readonly setEnabled: React.Dispatch<React.SetStateAction<boolean>>
        readonly error: Option.Option<ParseResult.ParseError>
    }
 }
@@ -29,7 +29,7 @@ export namespace useOptionalInput {
 export const useOptionalInput: {
    <A, R>(options: useOptionalInput.Options<A, R>): Effect.Effect<useOptionalInput.Result, ParseResult.ParseError, R>
 } = Effect.fnUntraced(function* <A, R>(options: useOptionalInput.Options<A, R>) {
-    const [internalRef, disabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
+    const [internalRef, enabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
        Effect.all([
            Effect.andThen(
                Option.match(upstreamValue, {
@@ -41,7 +41,7 @@ export const useOptionalInput: {
                SubscriptionRef.make,
            ),

-            SubscriptionRef.make(Option.isNone(upstreamValue)),
+            SubscriptionRef.make(Option.isSome(upstreamValue)),
        ])
    ))

@@ -63,7 +63,7 @@ export const useOptionalInput: {
                ),
            ),

-            onNone: () => Ref.set(disabledRef, true),
+            onNone: () => Ref.set(enabledRef, false),
        })),

        // Sync all changes to the internal state with upstream
@@ -76,28 +76,24 @@ export const useOptionalInput: {
                Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
            ),
        ),
-    ], { concurrency: "unbounded" }), [options.ref, options.schema, options.debounce, options.equivalence, internalRef])
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])

-    const setDisabled = yield* useCallbackSync((setStateAction: React.SetStateAction<boolean>) =>
-        Effect.andThen(
-            Ref.updateAndGet(disabledRef, prevState =>
-                SetStateAction.value(setStateAction, prevState)
-            ),
-
-            disabled => disabled
-                ? Ref.set(options.ref, Option.none())
-                : internalRef.pipe(
+    const setEnabled = yield* useCallbackSync(
+        (setStateAction: React.SetStateAction<boolean>) => Effect.andThen(
+            Ref.updateAndGet(enabledRef, prevState => SetStateAction.value(setStateAction, prevState)),
+            enabled => enabled
+                ? internalRef.pipe(
                    Effect.andThen(Schema.decode(options.schema)),
                    Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
                    Effect.andThen(() => setError(Option.none())),
                    Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
+                )
+                : Ref.set(options.ref, Option.none()),
        ),
-        ),
-    [disabledRef, options.ref, internalRef, options.schema])
+        [options.schema, options.ref, internalRef, enabledRef],
+    )

-    const [disabled] = yield* useSubscribeRefs(disabledRef)
+    const [enabled] = yield* useSubscribeRefs(enabledRef)
    const [value, setValue] = yield* useRefState(internalRef)
-    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value), [setValue])
-
-    return { value, onChange, disabled, setDisabled, error }
+    return { value, setValue, enabled, setEnabled, error }
 })
--- a/packages/example/src/lib/TextAreaInput.tsx
+++ b/packages/example/src/lib/TextAreaInput.tsx
@@ -1,45 +1,40 @@
 import { Callout, Flex, TextArea, TextAreaProps } from "@radix-ui/themes"
-import { Option, ParseResult, Schema, Struct } from "effect"
+import { Array, Equivalence, Option, ParseResult, Schema, Struct } from "effect"
 import { Component } from "effect-fc"
 import { useInput } from "effect-fc/hooks"
 import * as React from "react"


-export interface TextAreaInputProps<A, R>
-extends
-    Omit<useInput.Options<A, R>, "schema">,
-    Omit<TextAreaProps, "ref">
-{}
+export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">

-export const TextAreaInput = <A, R>(
-    schema: Schema.Schema<A, string, R>
-): Component.Component<
+export const TextAreaInput = <A, R>(options: {
+    readonly schema: Schema.Schema<A, string, R>
+    readonly equivalence?: Equivalence.Equivalence<A>
+}): Component.Component<
    TextAreaInputProps<A, R>,
    React.JSX.Element,
    ParseResult.ParseError,
    R
 > => Component.makeUntraced(function* TextFieldInput(props) {
-    const input = yield* useInput({ schema, ...props })
-    const issues = React.useMemo(() => Option.map(
-        input.error,
-        ParseResult.ArrayFormatter.formatErrorSync,
+    const input = yield* useInput({ ...options, ...props })
+    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>
-            }
-
            <TextArea
                value={input.value}
-                onChange={input.onChange}
+                onChange={e => input.setValue(e.target.value)}
                {...Struct.omit(props, "ref")}
            />
+
+            {Option.isSome(issue) &&
+                <Callout.Root color="red" role="alert">
+                    <Callout.Text>{issue.value.message}</Callout.Text>
+                </Callout.Root>
+            }
        </Flex>
    )
 })
--- a/packages/example/src/lib/TextFieldInput.tsx
+++ b/packages/example/src/lib/TextFieldInput.tsx
@@ -24,8 +24,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
            optional: true,
            // eslint-disable-next-line react-hooks/rules-of-hooks
            ...yield* useOptionalInput({
-                schema: options.schema,
-                equivalence: options.equivalence,
+                ...options,
                ...props as TextFieldOptionalInputProps<A, R>,
            }),
        }
@@ -33,8 +32,7 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
            optional: false,
            // eslint-disable-next-line react-hooks/rules-of-hooks
            ...yield* useInput({
-                schema: options.schema,
-                equivalence: options.equivalence,
+                ...options,
                ...props as TextFieldInputProps<A, R>,
            })
        }
@@ -49,21 +47,20 @@ export const TextFieldInput = <A, R, O extends boolean = false>(options: {
            <Flex direction="row" align="center" gap="1">
                {input.optional &&
                    <Checkbox
-                        checked={!input.disabled}
-                        onCheckedChange={checked => input.setDisabled(!checked)}
+                        checked={input.enabled}
+                        onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
                    />
                }

                <TextField.Root
-                    {...input.optional
-                        ? Struct.pick(input, "value", "onChange", "disabled")
-                        : Struct.pick(input, "value", "onChange")
-                    }
+                    value={input.value}
+                    onChange={e => input.setValue(e.target.value)}
+                    disabled={input.optional ? !input.enabled : undefined}
                    {...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref")}
                />
            </Flex>

-            {(!(input.optional && input.disabled) && Option.isSome(issue)) &&
+            {(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
                <Callout.Root color="red" role="alert">
                    <Callout.Text>{issue.value.message}</Callout.Text>
                </Callout.Root>
--- a/packages/example/src/todo/Todo.tsx
+++ b/packages/example/src/todo/Todo.tsx
@@ -12,7 +12,7 @@ import { FaDeleteLeft } from "react-icons/fa6"
 import { TodosState } from "./TodosState.service"


-const StringTextAreaInput = TextAreaInput(Schema.String)
+const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
 const OptionalDateInput = TextFieldInput({ optional: true, schema: Schema.DateTimeUtc })

 const makeTodo = makeUuid4.pipe(