From a62deeef5d0cbe5fa98be390eac0e03bcae0f0b5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 Nov 2021 10:20:52 -0300
Subject: prettier

---
 .../src/components/fields/DateInput.tsx            | 104 +++++++++++----------
 .../src/components/fields/EmailInput.tsx           |  49 +++++-----
 .../src/components/fields/FileInput.tsx            |  92 +++++++++---------
 .../src/components/fields/ImageInput.tsx           |  96 ++++++++++---------
 .../src/components/fields/TextInput.tsx            |  45 +++++----
 5 files changed, 214 insertions(+), 172 deletions(-)

(limited to 'packages/anastasis-webui/src/components/fields')

diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx
index 3148c953f..0b6a7e316 100644
--- a/packages/anastasis-webui/src/components/fields/DateInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx
@@ -19,56 +19,66 @@ export function DateInput(props: DateInputProps): VNode {
       inputRef.current?.focus();
     }
   }, [props.grabFocus]);
-  const [opened, setOpened] = useState(false)
+  const [opened, setOpened] = useState(false);
 
   const value = props.bind[0] || "";
-  const [dirty, setDirty] = useState(false)
-  const showError = dirty && props.error
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
 
-  const calendar = subYears(new Date(), 30)
-  
-  return <div class="field">
-    <label class="label">
-      {props.label}
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control">
-      <div class="field has-addons">
-        <p class="control">
-          <input
-            type="text"
-            class={showError ? 'input is-danger' : 'input'}
-            value={value}
-            onInput={(e) => {
-              const text = e.currentTarget.value
-              setDirty(true)
-              props.bind[1](text);
-            }}
-            ref={inputRef} />
-        </p>
-        <p class="control">
-          <a class="button" onClick={() => { setOpened(true) }}>
-            <span class="icon"><i class="mdi mdi-calendar" /></span>
-          </a>
-        </p>
+  const calendar = subYears(new Date(), 30);
+
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <div class="field has-addons">
+          <p class="control">
+            <input
+              type="text"
+              class={showError ? "input is-danger" : "input"}
+              value={value}
+              onInput={(e) => {
+                const text = e.currentTarget.value;
+                setDirty(true);
+                props.bind[1](text);
+              }}
+              ref={inputRef}
+            />
+          </p>
+          <p class="control">
+            <a
+              class="button"
+              onClick={() => {
+                setOpened(true);
+              }}
+            >
+              <span class="icon">
+                <i class="mdi mdi-calendar" />
+              </span>
+            </a>
+          </p>
+        </div>
       </div>
+      <p class="help">Using the format yyyy-mm-dd</p>
+      {showError && <p class="help is-danger">{props.error}</p>}
+      <DatePicker
+        opened={opened}
+        initialDate={calendar}
+        years={props.years}
+        closeFunction={() => setOpened(false)}
+        dateReceiver={(d) => {
+          setDirty(true);
+          const v = format(d, "yyyy-MM-dd");
+          props.bind[1](v);
+        }}
+      />
     </div>
-    <p class="help">Using the format yyyy-mm-dd</p>
-    {showError && <p class="help is-danger">{props.error}</p>}
-    <DatePicker
-      opened={opened}
-      initialDate={calendar}
-      years={props.years}
-      closeFunction={() => setOpened(false)}
-      dateReceiver={(d) => {
-        setDirty(true)
-        const v = format(d, 'yyyy-MM-dd')
-        props.bind[1](v);
-      }}
-    />
-  </div>
-    ;
-
+  );
 }
diff --git a/packages/anastasis-webui/src/components/fields/EmailInput.tsx b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
index e21418fea..fe676f284 100644
--- a/packages/anastasis-webui/src/components/fields/EmailInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
@@ -18,27 +18,34 @@ export function EmailInput(props: TextInputProps): VNode {
     }
   }, [props.grabFocus]);
   const value = props.bind[0];
-  const [dirty, setDirty] = useState(false)
-  const showError = dirty && props.error
-  return (<div class="field">
-    <label class="label">
-      {props.label}
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control has-icons-right">
-      <input
-        value={value}
-        required
-        placeholder={props.placeholder}
-        type="email"
-        class={showError ? 'input is-danger' : 'input'}
-        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
-        ref={inputRef}
-        style={{ display: "block" }} />
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <input
+          value={value}
+          required
+          placeholder={props.placeholder}
+          type="email"
+          class={showError ? "input is-danger" : "input"}
+          onInput={(e) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          ref={inputRef}
+          style={{ display: "block" }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
     </div>
-    {showError && <p class="help is-danger">{props.error}</p>}
-  </div>
   );
 }
diff --git a/packages/anastasis-webui/src/components/fields/FileInput.tsx b/packages/anastasis-webui/src/components/fields/FileInput.tsx
index 8b144ea43..52d6eab4a 100644
--- a/packages/anastasis-webui/src/components/fields/FileInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/FileInput.tsx
@@ -15,14 +15,14 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { h, VNode } from "preact";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { TextInputProps } from "./TextInput";
 
-const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
 export function FileInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -34,48 +34,54 @@ export function FileInput(props: TextInputProps): VNode {
 
   const value = props.bind[0];
   // const [dirty, setDirty] = useState(false)
-  const image = useRef<HTMLInputElement>(null)
-  const [sizeError, setSizeError] = useState(false)
+  const image = useRef<HTMLInputElement>(null);
+  const [sizeError, setSizeError] = useState(false);
   function onChange(v: string): void {
     // setDirty(true);
     props.bind[1](v);
   }
-  return <div class="field">
-    <label class="label">
-      <a onClick={() => image.current?.click()}>
-        {props.label}
-      </a>
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control">
-      <input
-        ref={image} style={{ display: 'none' }}
-        type="file" name={String(name)}
-        onChange={e => {
-          const f: FileList | null = e.currentTarget.files
-          if (!f || f.length != 1) {
-            return onChange("")
-          }
-          if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
-            setSizeError(true)
-            return onChange("")
-          }
-          setSizeError(false)
-          return f[0].arrayBuffer().then(b => {
-            const b64 = btoa(
-              new Uint8Array(b)
-                .reduce((data, byte) => data + String.fromCharCode(byte), '')
-            )
-            return onChange(`data:${f[0].type};base64,${b64}` as any)
-          })
-        }} />
-      {props.error && <p class="help is-danger">{props.error}</p>}
-      {sizeError && <p class="help is-danger">
-        File should be smaller than 1 MB
-      </p>}
+  return (
+    <div class="field">
+      <label class="label">
+        <a onClick={() => image.current?.click()}>{props.label}</a>
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <input
+          ref={image}
+          style={{ display: "none" }}
+          type="file"
+          name={String(name)}
+          onChange={(e) => {
+            const f: FileList | null = e.currentTarget.files;
+            if (!f || f.length != 1) {
+              return onChange("");
+            }
+            if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+              setSizeError(true);
+              return onChange("");
+            }
+            setSizeError(false);
+            return f[0].arrayBuffer().then((b) => {
+              const b64 = btoa(
+                new Uint8Array(b).reduce(
+                  (data, byte) => data + String.fromCharCode(byte),
+                  "",
+                ),
+              );
+              return onChange(`data:${f[0].type};base64,${b64}` as any);
+            });
+          }}
+        />
+        {props.error && <p class="help is-danger">{props.error}</p>}
+        {sizeError && (
+          <p class="help is-danger">File should be smaller than 1 MB</p>
+        )}
+      </div>
     </div>
-  </div>
+  );
 }
-
diff --git a/packages/anastasis-webui/src/components/fields/ImageInput.tsx b/packages/anastasis-webui/src/components/fields/ImageInput.tsx
index d5bf643d4..3f8cc58dd 100644
--- a/packages/anastasis-webui/src/components/fields/ImageInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/ImageInput.tsx
@@ -15,15 +15,15 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { h, VNode } from "preact";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import emptyImage from "../../assets/empty.png";
 import { TextInputProps } from "./TextInput";
 
-const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
 export function ImageInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -35,47 +35,59 @@ export function ImageInput(props: TextInputProps): VNode {
 
   const value = props.bind[0];
   // const [dirty, setDirty] = useState(false)
-  const image = useRef<HTMLInputElement>(null)
-  const [sizeError, setSizeError] = useState(false)
+  const image = useRef<HTMLInputElement>(null);
+  const [sizeError, setSizeError] = useState(false);
   function onChange(v: string): void {
     // setDirty(true);
     props.bind[1](v);
   }
-  return <div class="field">
-    <label class="label">
-      {props.label}
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control">
-      <img src={!value ? emptyImage : value} style={{ width: 200, height: 200 }} onClick={() => image.current?.click()} />
-      <input
-        ref={image} style={{ display: 'none' }}
-        type="file" name={String(name)}
-        onChange={e => {
-          const f: FileList | null = e.currentTarget.files
-          if (!f || f.length != 1) {
-            return onChange(emptyImage)
-          }
-          if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
-            setSizeError(true)
-            return onChange(emptyImage)
-          }
-          setSizeError(false)
-          return f[0].arrayBuffer().then(b => {
-            const b64 = btoa(
-              new Uint8Array(b)
-                .reduce((data, byte) => data + String.fromCharCode(byte), '')
-            )
-            return onChange(`data:${f[0].type};base64,${b64}` as any)
-          })
-        }} />
-      {props.error && <p class="help is-danger">{props.error}</p>}
-      {sizeError && <p class="help is-danger">
-        Image should be smaller than 1 MB
-      </p>}
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control">
+        <img
+          src={!value ? emptyImage : value}
+          style={{ width: 200, height: 200 }}
+          onClick={() => image.current?.click()}
+        />
+        <input
+          ref={image}
+          style={{ display: "none" }}
+          type="file"
+          name={String(name)}
+          onChange={(e) => {
+            const f: FileList | null = e.currentTarget.files;
+            if (!f || f.length != 1) {
+              return onChange(emptyImage);
+            }
+            if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+              setSizeError(true);
+              return onChange(emptyImage);
+            }
+            setSizeError(false);
+            return f[0].arrayBuffer().then((b) => {
+              const b64 = btoa(
+                new Uint8Array(b).reduce(
+                  (data, byte) => data + String.fromCharCode(byte),
+                  "",
+                ),
+              );
+              return onChange(`data:${f[0].type};base64,${b64}` as any);
+            });
+          }}
+        />
+        {props.error && <p class="help is-danger">{props.error}</p>}
+        {sizeError && (
+          <p class="help is-danger">Image should be smaller than 1 MB</p>
+        )}
+      </div>
     </div>
-  </div>
+  );
 }
-
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx
index c093689c5..fd0c658ed 100644
--- a/packages/anastasis-webui/src/components/fields/TextInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx
@@ -18,25 +18,32 @@ export function TextInput(props: TextInputProps): VNode {
     }
   }, [props.grabFocus]);
   const value = props.bind[0];
-  const [dirty, setDirty] = useState(false)
-  const showError = dirty && props.error
-  return (<div class="field">
-    <label class="label">
-      {props.label}
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control has-icons-right">
-      <input
-        value={value}
-        placeholder={props.placeholder}
-        class={showError ? 'input is-danger' : 'input'}
-        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
-        ref={inputRef}
-        style={{ display: "block" }} />
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <input
+          value={value}
+          placeholder={props.placeholder}
+          class={showError ? "input is-danger" : "input"}
+          onInput={(e) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          ref={inputRef}
+          style={{ display: "block" }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
     </div>
-    {showError && <p class="help is-danger">{props.error}</p>}
-  </div>
   );
 }
-- 
cgit v1.2.3