From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
---
 .../components/commons/FormElements/Input/Input.js | 31 +++++++++++++
 .../commons/FormElements/TextArea/TextArea.js      | 52 ++++++++++++++++++++++
 .../src/components/commons/FormElements/index.js   |  4 ++
 3 files changed, 87 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/Input/Input.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/TextArea/TextArea.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/index.js

(limited to 'public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements')

diff --git a/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/Input/Input.js b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/Input/Input.js
new file mode 100644
index 0000000..7d8cb45
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/Input/Input.js
@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+
+function Input(
+  {
+    type = "text",
+    name,
+    value,
+    onChangeHandler,
+    onBlurHandler,
+    additionalClasses,
+  },
+  ref
+) {
+  const classNames = additionalClasses
+    ? `form__input ${additionalClasses}`
+    : "form__input";
+
+  return (
+    <input
+      ref={ref}
+      type={type}
+      name={name}
+      className={classNames}
+      value={value}
+      onChange={onChangeHandler}
+      onBlur={onBlurHandler}
+    />
+  );
+}
+
+export default forwardRef(Input);
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/TextArea/TextArea.js b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/TextArea/TextArea.js
new file mode 100644
index 0000000..ca2a52e
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/TextArea/TextArea.js
@@ -0,0 +1,52 @@
+import { forwardRef, useEffect, useState } from "react";
+
+function autoGrow(field, initialValue = null) {
+  let fieldHeight = initialValue ?? field.style.height;
+  if (field.scrollHeight > field.clientHeight) {
+    fieldHeight = field.scrollHeight + "px";
+  }
+  return fieldHeight;
+}
+
+function isSetHeightNeeded(e) {
+  const key = e.key;
+  const isBackspace = key === "Backspace";
+  const isDelete = key === "Delete";
+  const isCtrlZ = e.ctrlKey && e.key === "z";
+  const isCut = e.ctrlKey && e.key === "x";
+  return isBackspace || isDelete || isCtrlZ || isCut;
+}
+
+function TextArea(
+  { value, name, onBlurHandler, onChangeHandler, additionalClasses },
+  ref
+) {
+  const [fieldHeight, setFieldHeight] = useState();
+  const classNames = additionalClasses
+    ? `form__textarea ${additionalClasses}`
+    : "form__textarea";
+
+  useEffect(() => {
+    ref && setFieldHeight(autoGrow(ref.current));
+  }, [ref]);
+
+  return (
+    <textarea
+      ref={ref}
+      className={classNames}
+      name={name}
+      value={value}
+      onChange={(e) => {
+        onChangeHandler(e);
+        setFieldHeight(autoGrow(e.target));
+      }}
+      onKeyDown={(e) => {
+        if (isSetHeightNeeded(e)) setFieldHeight(autoGrow(e.target, "auto"));
+      }}
+      onBlur={onBlurHandler}
+      style={{ height: fieldHeight }}
+    />
+  );
+}
+
+export default forwardRef(TextArea);
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/index.js b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/index.js
new file mode 100644
index 0000000..1d1f610
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/index.js
@@ -0,0 +1,4 @@
+import Input from "./Input/Input";
+import TextArea from "./TextArea/TextArea";
+
+export { Input, TextArea };
-- 
cgit v1.2.3