refactor: more code cleanup

formkit · Dec 15, 2023 · aa585e9 · aa585e9
1 parent 57663f2
commit aa585e9
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 68 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -328,6 +328,7 @@ export function nodeDragEvent(e: DragEvent): void {
         ? draggedConfig.dragstart(eventData, state, dragstart)
         : dragstart(eventData, state);
       break;
+
     case "dragover":
       eventData.event.preventDefault();
 
@@ -346,6 +347,7 @@ export function nodeDragEvent(e: DragEvent): void {
           : transferReturn(eventData, state);
       }
       break;
+
     case "dragend":
       draggedConfig?.end
         ? draggedConfig.end(eventData, state, end)
@@ -412,6 +414,7 @@ function nodeTouchEvent(e: TouchEvent): void {
         ? config.touchstart(touchEvent, state, touchstart)
         : touchstart(touchEvent, state);
       break;
+
     case "touchmove":
       config?.touchmove
         ? config.touchmove(touchEvent, state, touchmove)
@@ -485,6 +488,7 @@ function dzDragEvent(e: DragEvent): void {
 
         state.leftParent = false;
       }
+
       break;
     case "dragleave":
       event.event.preventDefault();
@@ -515,6 +519,7 @@ function dzDragEvent(e: DragEvent): void {
         //  state.leftParent = false;
         //}
       }
+
       break;
     case "drop":
       if (event.targetParent == event.draggedParent) {
@@ -538,23 +543,18 @@ function handleSort(
     "touchedNode" in event
       ? event.event.touches[0].clientY
       : event.event.clientY;
-  if (state.lastValue === event.targetNodeData.value) {
-    if (state.direction !== 1) {
-      return;
-    }
 
-    if (
-      clientY >= state.lastCoordinates.y - 20 &&
-      clientX >=
-        state.lastCoordinates.x -
-          event.targetNode.getBoundingClientRect().width / 20
-    ) {
-      return;
-    }
-  }
-  if (!validateSort(event)) {
+  if (
+    state.lastValue === event.targetNodeData.value &&
+    (state.direction !== 1 ||
+      (clientY >= state.lastCoordinates.y - 20 &&
+        clientX >=
+          state.lastCoordinates.x -
+            event.targetNode.getBoundingClientRect().width / 20))
+  )
     return;
-  }
+
+  if (!validateSort(event)) return;
 
   state.lastValue = event.targetNodeData.value;
 

diff --git a/src/state.ts b/src/state.ts
@@ -2,13 +2,13 @@ import type { DNDState, Node, ParentData, NodeData } from "./types";
 
 export const state: DNDState = {
   activeNode: undefined,
-  enterCount: 0,
   clonedDraggedNodes: Array<HTMLElement>(),
   direction: undefined,
   draggedNode: undefined,
   draggedNodes: Array<Node>(),
   dropZones: new WeakMap<HTMLElement, HTMLElement>(),
   dropped: false,
+  enterCount: 0,
   hiddenNodes: new WeakMap<HTMLElement, Array<Node>>(),
   initialParent: undefined,
   initialParentValues: [],

diff --git a/src/utils.ts b/src/utils.ts
@@ -70,21 +70,25 @@ export function cleanUp(
   );
 
   state.touchedNode?.remove();
-  state.touchedNode = undefined;
-  state.lastParent = undefined;
-  state.draggedNode = undefined;
-  state.draggedNodes = [];
-  state.selectedNodes = [];
-  state.selectedValues = [];
-  state.touchStartTop = state.touchedNode = undefined;
-  state.touchStartLeft = 0;
-  state.lastValue = undefined;
+
+  state.touchedNode =
+    state.lastParent =
+    state.draggedNode =
+    state.touchStartTop =
+    state.touchStartLeft =
+    state.lastValue =
+    state.direction =
+      undefined;
+
+  state.draggedNodes = state.selectedNodes = state.selectedValues = [];
+
   state.touchMoving = false;
+
   state.lastCoordinates = {
     x: 0,
     y: 0,
   };
-  state.direction = undefined;
+
   if (state.scrollParent) {
     state.scrollParent.style.overflow = state.scrollParentOverflow || "";
     state.scrollParent = undefined;
@@ -102,15 +106,15 @@ export function dragTransfer(): DragTransfer | undefined {
   const lastParentData = state.parentData.get(state.lastParent);
 
   if (!draggedNodeData || !draggedParentData || !lastParentData) return;
-  else
-    return {
-      draggedNode: state.draggedNode,
-      draggedNodeData,
-      draggedParent: state.initialParent,
-      draggedParentData,
-      lastParent: state.lastParent,
-      lastParentData,
-    };
+
+  return {
+    draggedNode: state.draggedNode,
+    draggedNodeData,
+    draggedParent: state.initialParent,
+    draggedParentData,
+    lastParent: state.lastParent,
+    lastParentData,
+  };
 }
 
 export function touchTransfer(): TouchTransfer | undefined {
@@ -422,15 +426,13 @@ export function splitClass(className: string): Array<string> {
 export function getScrollParent(
   node: HTMLElement | null
 ): HTMLElement | undefined {
-  if (node == null) {
-    return undefined;
-  }
+  if (node == null) return undefined;
 
   if (node.scrollHeight > node.clientHeight) {
     return node;
-  } else {
-    if (node.parentNode instanceof HTMLElement)
-      return getScrollParent(node.parentNode);
+  } else if (node.parentNode instanceof HTMLElement) {
+    return getScrollParent(node.parentNode);
   }
+
   return undefined;
 }
diff --git a/src/vue/dropZone.ts b/src/vue/dropZone.ts
@@ -3,6 +3,7 @@ import { isBrowser } from "../utils";
 import type { Ref } from "vue";
 import { watch } from "vue";
 import type { TransferEvent, DropEvent } from "../types";
+import { getEl } from "./utils";
 
 interface DropZoneConfigVue {
   group?: string;
@@ -34,10 +35,13 @@ export function dropZone(dzConfig: DropZoneConfigVue = {}) {
   return {
     setUp(parent: HTMLElement, config: any) {
       const enabledDZs = [];
+
       if (dzConfig.dropZones && isBrowser) {
         const dropZones = dzConfig.dropZones;
+
         for (const dz of dropZones) {
           const el = getEl(dz.element);
+
           if (el instanceof HTMLElement) enabledDZs.push(el);
           else {
             const stop = watch(dz.element, (newEl) => {
@@ -49,24 +53,17 @@ export function dropZone(dzConfig: DropZoneConfigVue = {}) {
             });
           }
         }
+
         delete dzConfig.dropZones;
       }
+
       dzConfig.validDropZones = enabledDZs;
+
       return setUpDropZone(dzConfig, parent, config);
     },
+
     tearDown(parent: HTMLElement) {
       return tearDownDropZone(parent);
     },
   };
 }
-
-function getEl(el: HTMLElement | Ref<HTMLElement | null>) {
-  if (el instanceof HTMLElement) {
-    return el;
-  } else if (el.value instanceof HTMLElement) {
-    return el.value;
-  } else if ("$el" in el && el.$el instanceof HTMLElement) {
-    return el.$el;
-  }
-  return false;
-}
diff --git a/src/vue/index.ts b/src/vue/index.ts
@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import initParent from "../index";
 import { isBrowser } from "../utils";
 import type { VueDND, VueDNDCollection } from "./types";
+import { getEl } from "./utils";
 
 /**
  * Global store for parent values.
@@ -57,14 +58,14 @@ export function dragAndDrop(data: VueDND | VueDNDCollection): void {
   if (!Array.isArray(data)) data = [data];
 
   data.forEach((dnd) => {
-    const validParent = isEl(dnd.parent);
+    const validParent = getEl(dnd.parent);
 
     if (validParent) initialize(validParent, dnd);
     else {
       const stop = watch(dnd.parent, (newParent) => {
         if (!newParent) return;
 
-        const validParent = isEl(newParent);
+        const validParent = getEl(newParent);
 
         if (!validParent) console.warn("Invalid parent element", newParent);
         else initialize(validParent, dnd);
@@ -93,17 +94,3 @@ function initialize(parent: HTMLElement, dnd: VueDND): void {
     config: dnd.config,
   });
 }
-
-/**
- * Checks if the given element is an HTMLElement.
- *
- * @param dnd - The drag and drop configuration.
- */
-export function isEl(
-  parent: HTMLElement | Ref<HTMLElement | null>
-): HTMLElement | undefined {
-  if (parent instanceof HTMLElement) return parent;
-  else if (parent.value instanceof HTMLElement) return parent.value;
-  else if ("$el" in parent && parent.$el instanceof HTMLElement)
-    return parent.$el;
-}
diff --git a/src/vue/utils.ts b/src/vue/utils.ts
@@ -0,0 +1,15 @@
+import type { Ref } from "vue";
+
+/**
+ * Checks if the given element is an HTMLElement.
+ *
+ * @param dnd - The drag and drop configuration.
+ */
+export function getEl(
+  parent: HTMLElement | Ref<HTMLElement | null>
+): HTMLElement | undefined {
+  if (parent instanceof HTMLElement) return parent;
+  else if (parent.value instanceof HTMLElement) return parent.value;
+  else if ("$el" in parent && parent.$el instanceof HTMLElement)
+    return parent.$el;
+}