From 96d110379e9bfbffedfeebf44c1c972b12fffff4 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 13 Mar 2023 11:12:46 -0300
Subject: some fixes and validations

---
 .../src/components/form/InputSelector.tsx          | 24 ++++++++++------------
 .../src/components/form/InputWithAddon.tsx         |  2 +-
 .../src/components/form/useField.tsx               |  5 +++--
 3 files changed, 15 insertions(+), 16 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/components')

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,
-- 
cgit v1.2.3