updat web utils

1 files changed, 50 insertions, 45 deletions

diff --git a/packages/web-util/src/forms/InputFile.tsx b/packages/web-util/src/forms/InputFile.tsx
index 0d89a98a3..bc460f370 100644
--- a/packages/web-util/src/forms/InputFile.tsx
+++ b/packages/web-util/src/forms/InputFile.tsx
@@ -1,6 +1,7 @@
 import { Fragment, VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { UIFormProps, BehaviorResult } from "./FormProvider.js";
 
 export function InputFile<T extends object, K extends keyof T>(
   props: { maxBites: number; accept?: string } & UIFormProps<T, K>,
@@ -11,12 +12,12 @@ export function InputFile<T extends object, K extends keyof T>(
     placeholder,
     tooltip,
     required,
-    help,
+    help: propsHelp,
     maxBites,
     accept,
   } = props;
   const { value, onChange, state } = useField<T, K>(name);
-
+  const help = propsHelp ?? state.help
   if (state.hidden) {
     return <div />;
   }
@@ -42,40 +43,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 +88,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>}