Unify Draggable opts with DnD (#282)

* unify draggable opts * refactor base opts * add overflow-x method
dflex-js · Jul 13, 2021 · 94f06d8 · 94f06d8
1 parent c1db275
commit 94f06d8
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 15 deletions.
diff --git a/packages/dnd/src/DnD.ts b/packages/dnd/src/DnD.ts
@@ -13,10 +13,9 @@ import store from "./DnDStore";
 
 import type { ElmTree } from "./DnDStore";
 
-import type { DndOpts } from "./types";
-import { DraggableOpts } from "./Draggable/types";
+import type { DndOpts, FinalDndOpts } from "./types";
 
-const defaultOpts = Object.freeze({
+const defaultOpts: DndOpts = Object.freeze({
   thresholds: {
     vertical: 60,
     horizontal: 60,
@@ -28,6 +27,12 @@ const defaultOpts = Object.freeze({
     allowLeavingFromLeft: true,
     allowLeavingFromRight: true,
   },
+
+  scroll: {
+    enable: true,
+    speed: 10,
+    threshold: 50,
+  },
 });
 
 class DnD extends Droppable {
@@ -69,7 +74,7 @@ class DnD extends Droppable {
       elmCoreInstanceWithTree,
       siblingsBoundaries,
       initCoordinates,
-      options as DraggableOpts
+      options as FinalDndOpts
     );
 
     super(draggable);

diff --git a/packages/dnd/src/Draggable/Base.ts b/packages/dnd/src/Draggable/Base.ts
@@ -19,8 +19,8 @@ import type {
   DraggableBaseInterface,
   ThresholdPercentages,
   LayoutThresholds,
-  DraggableOpts,
 } from "./types";
+import { FinalDndOpts } from "../types";
 
 /**
  * Base element.
@@ -35,7 +35,7 @@ class Base
 
   operationID: string;
 
-  opts: DraggableOpts;
+  opts: FinalDndOpts;
 
   parentsList: ELmBranch;
 
@@ -55,7 +55,7 @@ class Base
     elmTree: ElmTree,
     siblingsBoundaries: BoundariesOffset,
     initCoordinates: MouseCoordinates,
-    opts: DraggableOpts
+    opts: FinalDndOpts
   ) {
     const {
       element,
@@ -204,6 +204,15 @@ class Base
     $.maxRight = left + horizontal;
   }
 
+  isParenOverflowX() {
+    const parentBottom =
+      this.activeParent!.offset.top + this.activeParent!.offset.height;
+
+    const elemOverflowX = parentBottom > window.innerHeight;
+
+    return elemOverflowX;
+  }
+
   /**
    * Assigns new ACTIVE_PARENT: parent who contains dragged
    *
@@ -221,6 +230,12 @@ class Base
      * transformed and which is not.
      */
     this.isOutActiveParent = false;
+
+    if (this.opts.scroll.enable) {
+      this.opts.scroll.enable = this.opts.scroll.enable
+        ? this.isParenOverflowX()
+        : false;
+    }
   }
 }
 

diff --git a/packages/dnd/src/Draggable/Draggable.ts b/packages/dnd/src/Draggable/Draggable.ts
@@ -16,8 +16,8 @@ import type {
   TempOffset,
   Threshold,
   TempTranslate,
-  DraggableOpts,
 } from "./types";
+import type { FinalDndOpts } from "../types";
 
 class Draggable extends Base implements DraggableDnDInterface {
   private innerOffsetX: number;
@@ -46,7 +46,7 @@ class Draggable extends Base implements DraggableDnDInterface {
     elmTree: ElmTree,
     siblingsBoundaries: BoundariesOffset,
     initCoordinates: MouseCoordinates,
-    opts: DraggableOpts
+    opts: FinalDndOpts
   ) {
     super(elmTree, siblingsBoundaries, initCoordinates, opts);
 

diff --git a/packages/dnd/src/Draggable/types.ts b/packages/dnd/src/Draggable/types.ts
@@ -8,6 +8,7 @@
 import type { CoreInstanceInterface } from "@dflex/core-instance";
 import type { ELmBranch } from "@dflex/dom-gen";
 import type { AbstractDraggableInterface } from "@dflex/draggable";
+import type { FinalDndOpts } from "../types";
 
 export interface ThresholdPercentages {
   vertical: number;
@@ -43,17 +44,12 @@ export interface Restrictions {
   allowLeavingFromRight: boolean;
 }
 
-export interface DraggableOpts {
-  restrictions: Restrictions;
-  thresholds: ThresholdPercentages;
-}
-
 export interface DraggableBaseInterface
   extends AbstractDraggableInterface<CoreInstanceInterface> {
   tempIndex: number;
   operationID: string;
 
-  opts: DraggableOpts;
+  opts: FinalDndOpts;
 
   parentsList: ELmBranch | null;
   siblingsList: string[] | null;

diff --git a/packages/dnd/src/types.ts b/packages/dnd/src/types.ts
@@ -6,7 +6,23 @@
  */
 import type { ThresholdPercentages, Restrictions } from "./Draggable";
 
+export interface ScrollOpt {
+  speed: number;
+  threshold: number;
+}
+
+export interface Scroll extends ScrollOpt {
+  enable: boolean;
+}
+
+export interface FinalDndOpts {
+  thresholds: ThresholdPercentages;
+  restrictions: Restrictions;
+  scroll: Scroll;
+}
+
 export interface DndOpts {
   thresholds?: Partial<ThresholdPercentages>;
   restrictions?: Partial<Restrictions>;
+  scroll?: Partial<Scroll>;
 }