diff --git a/packages/example/src/lib/TextFieldInput.tsx b/packages/example/src/lib/TextFieldInput.tsx index afff9d4..3f941b8 100644 --- a/packages/example/src/lib/TextFieldInput.tsx +++ b/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 = Omit, "schema"> & Omit -export type TextFieldOptionalInputProps = Omit, "schema"> & Omit +export type TextFieldInputProps = Omit, "schema" | "equivalence"> & Omit +export type TextFieldOptionalInputProps = Omit, "schema" | "equivalence"> & Omit export const TextFieldInput = (options: { readonly optional?: O readonly schema: Schema.Schema + readonly equivalence?: Equivalence.Equivalence }) => Component.makeUntraced(function* TextFieldInput(props: O extends true ? TextFieldOptionalInputProps : TextFieldInputProps @@ -24,6 +25,7 @@ export const TextFieldInput = (options: { // eslint-disable-next-line react-hooks/rules-of-hooks ...yield* useOptionalInput({ schema: options.schema, + equivalence: options.equivalence, ...props as TextFieldOptionalInputProps, }), } @@ -32,38 +34,40 @@ export const TextFieldInput = (options: { // eslint-disable-next-line react-hooks/rules-of-hooks ...yield* useInput({ schema: options.schema, + equivalence: options.equivalence, ...props as TextFieldInputProps, }) } - 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 ( - {Option.isSome(issues) && - - -
    {issues.value.map((issue, i) =>
  • {issue.message}
  • )}
-
-
- } - {input.optional && - input.setDisabled(!checked)} /> } | TextFieldInputProps, "ref")} /> + + {(!(input.optional && input.disabled) && Option.isSome(issue)) && + + {issue.value.message} + + }
) -}) +}).pipe(Memo.memo)