From 6138846050563e0dca95b0b6d792776925e4c35f Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 20 Nov 2023 12:38:16 -0300
Subject: new forms api

---
 .../aml-backoffice-ui/src/handlers/InputFile.tsx   | 88 +++++++++++-----------
 1 file changed, 46 insertions(+), 42 deletions(-)

(limited to 'packages/aml-backoffice-ui/src/handlers/InputFile.tsx')

diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
index 0d89a98a3..d9af03f86 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx
@@ -42,40 +42,42 @@ export function InputFile<T extends object, K extends keyof T>(
                 clip-rule="evenodd"
               />
             </svg>
-            <div class="my-2 flex text-sm leading-6 text-gray-600">
-              <label
-                for="file-upload"
-                class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
-              >
-                <span>Upload a file</span>
-                <input
-                  id="file-upload"
-                  name="file-upload"
-                  type="file"
-                  class="sr-only"
-                  accept={accept}
-                  onChange={(e) => {
-                    const f: FileList | null = e.currentTarget.files;
-                    if (!f || f.length != 1) {
-                      return onChange(undefined!);
-                    }
-                    if (f[0].size > maxBites) {
-                      return onChange(undefined!);
-                    }
-                    return f[0].arrayBuffer().then((b) => {
-                      const b64 = window.btoa(
-                        new Uint8Array(b).reduce(
-                          (data, byte) => data + String.fromCharCode(byte),
-                          "",
-                        ),
-                      );
-                      return onChange(`data:${f[0].type};base64,${b64}` as any);
-                    });
-                  }}
-                />
-              </label>
-              {/* <p class="pl-1">or drag and drop</p> */}
-            </div>
+            {!state.disabled &&
+              <div class="my-2 flex text-sm leading-6 text-gray-600">
+                <label
+                  for="file-upload"
+                  class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
+                >
+                  <span>Upload a file</span>
+                  <input
+                    id="file-upload"
+                    name="file-upload"
+                    type="file"
+                    class="sr-only"
+                    accept={accept}
+                    onChange={(e) => {
+                      const f: FileList | null = e.currentTarget.files;
+                      if (!f || f.length != 1) {
+                        return onChange(undefined!);
+                      }
+                      if (f[0].size > maxBites) {
+                        return onChange(undefined!);
+                      }
+                      return f[0].arrayBuffer().then((b) => {
+                        const b64 = window.btoa(
+                          new Uint8Array(b).reduce(
+                            (data, byte) => data + String.fromCharCode(byte),
+                            "",
+                          ),
+                        );
+                        return onChange(`data:${f[0].type};base64,${b64}` as any);
+                      });
+                    }}
+                  />
+                </label>
+                {/* <p class="pl-1">or drag and drop</p> */}
+              </div>
+            }
           </div>
         </div>
       ) : (
@@ -85,14 +87,16 @@ export function InputFile<T extends object, K extends keyof T>(
             class=" h-24 w-full object-cover relative"
           />
 
-          <div
-            class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer "
-            onClick={() => {
-              onChange(undefined!);
-            }}
-          >
-            Clear
-          </div>
+          {!state.disabled &&
+            <div
+              class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer "
+              onClick={() => {
+                onChange(undefined!);
+              }}
+            >
+              Clear
+            </div>
+          }
         </div>
       )}
       {help && <p class="text-xs leading-5 text-gray-600 mt-2">{help}</p>}
-- 
cgit v1.2.3