diff options
author | Sebastian <sebasjm@gmail.com> | 2023-11-20 12:38:16 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-11-20 12:38:16 -0300 |
commit | 6138846050563e0dca95b0b6d792776925e4c35f (patch) | |
tree | b33cd36acf4b38d3a016506d4f7fa681c83beb63 /packages/aml-backoffice-ui/src/handlers/InputLine.tsx | |
parent | 7ed3e78f790837479fc2bb2eb6ddc40c78ce59b5 (diff) | |
download | wallet-core-6138846050563e0dca95b0b6d792776925e4c35f.tar.xz |
new forms api
Diffstat (limited to 'packages/aml-backoffice-ui/src/handlers/InputLine.tsx')
-rw-r--r-- | packages/aml-backoffice-ui/src/handlers/InputLine.tsx | 36 |
1 files changed, 28 insertions, 8 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx index 9448ef5e4..f6c709d94 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx @@ -1,6 +1,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { useField } from "./useField.js"; +import { useEffect, useState } from "preact/hooks"; export interface IconAddon { type: "icon"; @@ -80,7 +81,7 @@ export function LabelWithTooltipMaybeRequired({ {Label} <span class="relative flex items-center group pl-2"> {TooltipIcon} - <div class="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex"> + <div class="absolute bottom-0 flex flex-col items-center mb-6 group-hover:flex"> <span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg"> {tooltip} </span> @@ -110,8 +111,9 @@ function InputWrapper<T extends object, K extends keyof T>({ after, help, error, + disabled, required, -}: { error?: string; children: ComponentChildren } & UIFormProps<T, K>): VNode { +}: { error?: string; disabled: boolean, children: ComponentChildren } & UIFormProps<T, K>): VNode { return ( <div class="sm:col-span-6"> <LabelWithTooltipMaybeRequired @@ -132,6 +134,7 @@ function InputWrapper<T extends object, K extends keyof T>({ ) : before.type === "button" ? ( <button type="button" + disabled={disabled} onClick={before.onClick} class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50" > @@ -153,6 +156,7 @@ function InputWrapper<T extends object, K extends keyof T>({ ) : after.type === "button" ? ( <button type="button" + disabled={disabled} onClick={after.onClick} class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50" > @@ -189,6 +193,21 @@ export function InputLine<T extends object, K extends keyof T>( const { name, placeholder, before, after, converter, type } = props; const { value, onChange, state, isDirty } = useField<T, K>(name); + const [text, setText] = useState("") + const fromString: (s: string) => any = + converter?.fromStringUI ?? defaultFromString; + const toString: (s: any) => string = converter?.toStringUI ?? defaultToString; + + useEffect(() => { + const newValue = toString(value) + if (newValue) { + + setText(newValue) + } else { + console.log("invalid") + } + }, [value]) + if (state.hidden) return <div />; let clazz = @@ -233,14 +252,12 @@ export function InputLine<T extends object, K extends keyof T>( clazz += " text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600"; } - const fromString: (s: string) => any = - converter?.fromStringUI ?? defaultFromString; - const toString: (s: any) => string = converter?.toStringUI ?? defaultToString; if (type === "text-area") { return ( <InputWrapper<T, K> {...props} + disabled={state.disabled} error={showError ? state.error : undefined} > <textarea @@ -262,15 +279,18 @@ export function InputLine<T extends object, K extends keyof T>( } return ( - <InputWrapper<T, K> {...props} error={showError ? state.error : undefined}> + <InputWrapper<T, K> {...props} disabled={state.disabled} error={showError ? state.error : undefined}> <input name={String(name)} type={type} onChange={(e) => { - onChange(fromString(e.currentTarget.value)); + setText(e.currentTarget.value) }} placeholder={placeholder ? placeholder : undefined} - value={toString(value) ?? ""} + value={text} + onBlur={() => { + onChange(fromString(text)); + }} // defaultValue={toString(value)} disabled={state.disabled} aria-invalid={showError} |