Initial

2022-01-29 20:48:35 +01:00
commit 01907eb338
144 changed files with 11275 additions and 0 deletions
--- a/components/forms/formfields.jsx
+++ b/components/forms/formfields.jsx
@@ -0,0 +1,110 @@
+import React from "react";
+
+export function TextInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <input
+          disabled={props.isSubmitting || props.rescode === 200}
+          type={props.type}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function TextareaInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <textarea
+          disabled={props.isSubmitting || props.rescode === 200}
+          style={{ height: "100px", resize: "none" }}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function SelectInput(props) {
+  return (
+    <>
+      <div className="form-floating">
+        <select
+          disabled={props.isSubmitting || props.rescode === 200}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          className={`form-control ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+        >
+          <option defaultValue></option>
+          {props.options.map(function (option) {
+            return (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            );
+          })}
+        </select>
+        <label>{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function CheckInput(props) {
+  return (
+    <>
+      <div className="form-check text-start">
+        <input
+          disabled={props.isSubmitting || props.rescode === 200}
+          type={props.type || "checkbox"}
+          className={`form-check-input ${
+            props.error && props.touched ? "is-invalid" : ""
+          } ${!props.error && props.touched ? "is-valid" : ""}`}
+          onChange={props.onChange}
+          onBlur={props.onBlur}
+          value={props.value}
+        />
+        <label className="form-check-label">{props.label}</label>
+      </div>
+      {props.error && props.touched ? (
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.error}
+        </div>
+      ) : null}
+    </>
+  );
+}