diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form')
3 files changed, 15 insertions, 16 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx index 021977dfe..495c93897 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx @@ -24,8 +24,7 @@ import { InputProps, useField } from "./useField.js"; interface Props<T> extends InputProps<T> { readonly?: boolean; expand?: boolean; - values: string[]; - convert?: (v: string) => any; + values: any[]; toStr?: (v?: any) => string; fromStr?: (s: string) => any; } @@ -42,11 +41,11 @@ export function InputSelector<T>({ label, help, values, - convert, + fromStr = defaultFromString, toStr = defaultToString, }: Props<keyof T>): VNode { const { error, value, onChange } = useField<T>(name); - + console.log(error); return ( <div class="field is-horizontal"> <div class="field-label is-normal"> @@ -68,18 +67,17 @@ export function InputSelector<T>({ disabled={readonly} readonly={readonly} onChange={(e) => { - const v = convert - ? convert(e.currentTarget.value) - : e.currentTarget.value; - onChange(v); + onChange(fromStr(e.currentTarget.value)); }} > {placeholder && <option>{placeholder}</option>} - {values.map((v, i) => ( - <option key={i} value={v} selected={value === v}> - {toStr(v)} - </option> - ))} + {values.map((v, i) => { + return ( + <option key={i} value={v} selected={value === v}> + {toStr(v)} + </option> + ); + })} </select> {help} </p> diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx index dbf4e2409..34feec202 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx @@ -96,7 +96,6 @@ export function InputWithAddon<T>({ <i class="mdi mdi-alert" /> </span> )} - {help} {children} </p> {addonAfter && ( @@ -106,6 +105,7 @@ export function InputWithAddon<T>({ )} </div> {error && <p class="help is-danger">{error}</p>} + <span class="has-text-grey">{help}</span> </div> {side} </div> diff --git a/packages/merchant-backoffice-ui/src/components/form/useField.tsx b/packages/merchant-backoffice-ui/src/components/form/useField.tsx index dffb0cc66..c7559faae 100644 --- a/packages/merchant-backoffice-ui/src/components/form/useField.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/useField.tsx @@ -20,6 +20,7 @@ */ import { ComponentChildren, VNode } from "preact"; +import { useState } from "preact/hooks"; import { useFormContext } from "./FormProvider.js"; interface Use<V> { @@ -37,10 +38,11 @@ export function useField<T>(name: keyof T): Use<T[typeof name]> { useFormContext<T>(); type P = typeof name; type V = T[P]; - + const [isDirty, setDirty] = useState(false); const updateField = (field: P) => (value: V): void => { + setDirty(true); return valueHandler((prev) => { return setValueDeeper(prev, String(field).split("."), value); }); @@ -50,7 +52,6 @@ export function useField<T>(name: keyof T): Use<T[typeof name]> { const defaultFromString = (v: string): V => v as any; const value = readField(object, String(name)); const initial = readField(initialObject, String(name)); - const isDirty = value !== initial; const hasError = readField(errors, String(name)); return { error: isDirty ? hasError : undefined, |