Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix
All checks were successful
Lint / lint (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2025-10-23 23:50:30 +02:00
parent bbad86bf97
commit b73b053cc8
1 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/example/src/lib/form/TextFieldFormInput.tsx
View File

@@ -1,6 +1,6 @@
import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes" import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
import { Array, Option, Struct } from "effect" import { Array, Option, Struct } from "effect"
import { Component, Form, Hooks } from "effect-fc" import { Component, Form, Subscribable } from "effect-fc"
interface Props interface Props
@@ -18,60 +18,58 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
export type TextFieldFormInputProps = Props | OptionalProps export type TextFieldFormInputProps = Props | OptionalProps
export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")( export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
function*(props: TextFieldFormInputProps) { const input: (
const input: ( | { readonly optional: true } & Form.useOptionalInput.Result<string>
| { readonly optional: true } & Form.useOptionalInput.Result<string> | { readonly optional: false } & Form.useInput.Result<string>
| { readonly optional: false } & Form.useInput.Result<string> ) = props.optional
) = props.optional // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
// biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
? { optional: true, ...yield* Form.useOptionalInput(props.field, props) } // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
// biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported : { optional: false, ...yield* Form.useInput(props.field, props) }
: { optional: false, ...yield* Form.useInput(props.field, props) }
const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables( const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
props.field.issuesSubscribable, props.field.issuesSubscribable,
props.field.isValidatingSubscribable, props.field.isValidatingSubscribable,
props.field.isSubmittingSubscribable, props.field.isSubmittingSubscribable,
) )
return ( return (
<Flex direction="column" gap="1"> <Flex direction="column" gap="1">
<TextField.Root <TextField.Root
value={input.value} value={input.value}
onChange={e => input.setValue(e.target.value)} onChange={e => input.setValue(e.target.value)}
disabled={(input.optional && !input.enabled) || isSubmitting} disabled={(input.optional && !input.enabled) || isSubmitting}
{...Struct.omit(props, "optional", "defaultValue")} {...Struct.omit(props, "optional", "defaultValue")}
> >
{input.optional && {input.optional &&
<TextField.Slot side="left"> <TextField.Slot side="left">
<Switch <Switch
size="1" size="1"
checked={input.enabled} checked={input.enabled}
onCheckedChange={input.setEnabled} onCheckedChange={input.setEnabled}
/> />
</TextField.Slot> </TextField.Slot>
} }
{isValidating && {isValidating &&
<TextField.Slot side="right"> <TextField.Slot side="right">
<Spinner /> <Spinner />
</TextField.Slot> </TextField.Slot>
} }
{props.children} {props.children}
</TextField.Root> </TextField.Root>
{Option.match(Array.head(issues), { {Option.match(Array.head(issues), {
onSome: issue => ( onSome: issue => (
<Callout.Root> <Callout.Root>
<Callout.Text>{issue.message}</Callout.Text> <Callout.Text>{issue.message}</Callout.Text>
</Callout.Root> </Callout.Root>
), ),
onNone: () => <></>, onNone: () => <></>,
})} })}
</Flex> </Flex>
) )
} }) {}
) {}