refactor: abstract findNearestFormGroup function

Author: SalihuDickson

packages/ecc-utils-design/src/components/form/formGroup.ts

@@ -3,7 +3,12 @@ import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import * as _ from "lodash-es";
-import { noKeyWarning, renderInTooltip, generateUniqueKey } from "./utils.js";
+import {
+  noKeyWarning,
+  renderInTooltip,
+  generateUniqueKey,
+  findNearestFormGroup,
+} from "./utils.js";
 import "@shoelace-style/shoelace/dist/components/details/details.js";
 import "@shoelace-style/shoelace/dist/components/button/button.js";
 import formStyles from "./form.styles.js";
@@ -35,7 +40,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
   }> = [];
 
   @state() private content = "";
-  @state() private path = "";
+  @state() private path: string | null = "";
 
   declare setHTMLUnsafe: (htmlString: string) => void;
   protected firstUpdated(): void {
@@ -58,30 +63,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
       this.key = _.camelCase(this.label);
     }
 
-    this.findNearestFormGroup();
-  }
-
-  private findNearestFormGroup(element: HTMLElement | null = this): void {
-    if (!element) return;
-
-    if (element.matches("ecc-d-form")) {
-      return;
-    }
-
-    const { parentElement } = element;
-    if (!parentElement) return;
-
-    const specialAttributes = ["ecc-array", "ecc-group", "ecc-form"];
-    const hasSpecialAttribute = specialAttributes.some((attr) =>
-      parentElement.hasAttribute(attr)
-    );
-
-    if (hasSpecialAttribute) {
-      const parentPath = parentElement.getAttribute("path");
-      this.path = parentPath ? `${parentPath}.${this.key}` : this.key;
-    }
-
-    this.findNearestFormGroup(parentElement);
+    this.path = findNearestFormGroup(this.key, this, true);
   }
 
   private renderGroupTemplate(): TemplateResult {

packages/ecc-utils-design/src/components/form/formInput.ts

@@ -2,7 +2,11 @@ import * as _ from "lodash-es";
 import { html, LitElement, TemplateResult } from "lit";
 import { property, state, query } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { renderInTooltip, noKeyWarning } from "./utils.js";
+import {
+  renderInTooltip,
+  noKeyWarning,
+  findNearestFormGroup,
+} from "./utils.js";
 import "@shoelace-style/shoelace/dist/components/alert/alert.js";
 import "@shoelace-style/shoelace/dist/components/icon/icon.js";
 import "@shoelace-style/shoelace/dist/components/input/input.js";
@@ -54,7 +58,7 @@ export default class EccUtilsDesignFormInput extends LitElement {
   @state() private alertText = "Something went wrong";
   @state() private alertType: AlertType = "info";
   @state() private showAlert = false;
-  @state() path = "";
+  @state() path: string | null = "";
 
   @query("sl-input") input!: HTMLInputElement;
 
@@ -63,38 +67,14 @@ export default class EccUtilsDesignFormInput extends LitElement {
     if (!this.key) {
       noKeyWarning("ecc-d-form-group", this.label);
       this.key = _.camelCase(this.label);
+      this.setAttribute("key", this.key);
     }
 
-    this.findNearestFormGroup();
+    this.path = findNearestFormGroup(this.key, this);
 
     if (this.value) {
       this.handleFireChangeEvent();
     }
-
-    // console.log("just connected");
-  }
-
-  private findNearestFormGroup(element: HTMLElement | null = this): void {
-    if (!element) return;
-
-    if (element.matches("ecc-d-form") || element.matches("ecc-d-form-group")) {
-      return;
-    }
-
-    const { parentElement } = element;
-    if (!parentElement) return;
-
-    const specialAttributes = ["ecc-array", "ecc-group", "ecc-form"];
-    const hasSpecialAttribute = specialAttributes.some((attr) =>
-      parentElement.hasAttribute(attr)
-    );
-
-    if (hasSpecialAttribute) {
-      const parentPath = parentElement.getAttribute("path");
-      this.path = parentPath ? `${parentPath}.${this.key}` : this.key;
-    }
-
-    this.findNearestFormGroup(parentElement);
   }
 
   private handleDismissAlert() {
@@ -140,8 +120,6 @@ export default class EccUtilsDesignFormInput extends LitElement {
     const target = e.target as HTMLInputElement;
     this.value = this.type === "switch" ? target.checked : target.value;
 
-    console.log("this.value", this.value, target);
-
     this.handleFireChangeEvent();
     this.requestUpdate();
   }

packages/ecc-utils-design/src/components/form/utils.ts

@@ -30,3 +30,37 @@ export function noKeyWarning(Element: string, label: string): void {
 export function generateUniqueKey() {
   return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
+
+export const findNearestFormGroup = (
+  key: string,
+  element: HTMLElement | null,
+  isGroup = false
+): string | null => {
+  if (!element) return null;
+
+  if (
+    element.matches("ecc-d-form") ||
+    (!isGroup && element.matches("ecc-d-form-group"))
+  ) {
+    return null;
+  }
+
+  const { parentElement } = element;
+  if (!parentElement) return null;
+
+  const specialAttributes = ["ecc-array", "ecc-group", "ecc-form"];
+  const hasSpecialAttribute = specialAttributes.some((attr) =>
+    parentElement.hasAttribute(attr)
+  );
+
+  if (hasSpecialAttribute) {
+    const parentPath = parentElement.getAttribute("path");
+    const path = parentPath ? `${parentPath}.${key}` : key;
+
+    console.log("the key", key);
+
+    return path;
+  }
+
+  return findNearestFormGroup(key, parentElement, isGroup);
+};