[taler-merchant-backoffice] 01/05: add remove image button

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

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

    add remove image button
---
 .../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
index 55a6b66..6cc9b9d 100644
--- 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>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.