merchant-backoffice

commit 9ac34bfec497cf15f3d8835b42bd7de4dbb6720e
parent b28ef10bdda552ab77ff71b9f275a6e6f294ebc7
Author: Sebastian <sebasjm@gmail.com>
Date:   Fri, 20 May 2022 13:45:46 -0300

add remove image button

Diffstat:
M
packages/merchant-backoffice/src/components/form/InputImage.tsx
 | 
14
+++++++++++---

1 file changed, 11 insertions(+), 3 deletions(-)
diff --git a/packages/merchant-backoffice/src/components/form/InputImage.tsx b/packages/merchant-backoffice/src/components/form/InputImage.tsx
@@ -50,7 +50,9 @@ export function InputImage<T>({ name, readonly, placeholder, tooltip, label, hel
     <div class="field-body is-flex-grow-3">
       <div class="field">
         <p class={expand ? "control is-expanded" : "control"}>
-          <img src={!value ? emptyImage : value} style={{ width: 200, height: 200 }} onClick={() => image.current?.click()} />
+          {value &&
+            <img src={value} style={{ width: 200, height: 200 }} onClick={() => image.current?.click()} />
+          }
           <input
             ref={image} style={{ display: 'none' }}
             type="file" name={String(name)}
@@ -58,11 +60,11 @@ export function InputImage<T>({ name, readonly, placeholder, tooltip, label, hel
             onChange={e => {
               const f: FileList | null = e.currentTarget.files
               if (!f || f.length != 1) {
-                return onChange(emptyImage)
+                return onChange(undefined!)
               }
               if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
                 setSizeError(true)
-                return onChange(emptyImage)
+                return onChange(undefined!)
               }
               setSizeError(false)
               return f[0].arrayBuffer().then(b => {
@@ -80,6 +82,12 @@ export function InputImage<T>({ name, readonly, placeholder, tooltip, label, hel
         {sizeError && <p class="help is-danger">
           <Translate>Image should be smaller than 1 MB</Translate>
         </p>}
+        {!value &&
+          <button class="button" onClick={() => image.current?.click()} ><Translate>Add</Translate></button>
+        }
+        {value &&
+          <button class="button" onClick={() => onChange(undefined!)} ><Translate>Remove</Translate></button>
+        }
       </div>
     </div>
   </div>