74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
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" | "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>
|
|
) {
|
|
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,
|
|
equivalence: options.equivalence,
|
|
...props as TextFieldOptionalInputProps<A, R>,
|
|
}),
|
|
}
|
|
: {
|
|
optional: false,
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
...yield* useInput({
|
|
schema: options.schema,
|
|
equivalence: options.equivalence,
|
|
...props as TextFieldInputProps<A, R>,
|
|
})
|
|
}
|
|
|
|
const issue = React.useMemo(() => input.error.pipe(
|
|
Option.map(ParseResult.ArrayFormatter.formatErrorSync),
|
|
Option.flatMap(Array.head),
|
|
), [input.error])
|
|
|
|
return (
|
|
<Flex direction="column" gap="1">
|
|
<Flex direction="row" align="center" gap="1">
|
|
{input.optional &&
|
|
<Checkbox
|
|
checked={!input.disabled}
|
|
onCheckedChange={checked => input.setDisabled(!checked)}
|
|
/>
|
|
}
|
|
|
|
<TextField.Root
|
|
{...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)
|