[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] 01/05: add remove image button
From: |
gnunet |
Subject: |
[taler-merchant-backoffice] 01/05: add remove image button |
Date: |
Fri, 20 May 2022 18:47:16 +0200 |
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.
- [taler-merchant-backoffice] branch master updated (b28ef10 -> 68a315b), gnunet, 2022/05/20
- [taler-merchant-backoffice] 01/05: add remove image button,
gnunet <=
- [taler-merchant-backoffice] 04/05: fix: allow 0, gnunet, 2022/05/20
- [taler-merchant-backoffice] 03/05: fix: age as number, gnunet, 2022/05/20
- [taler-merchant-backoffice] 05/05: feat: add logo, email, website, gnunet, 2022/05/20
- [taler-merchant-backoffice] 02/05: undefined when there is no number, gnunet, 2022/05/20