Merge pull request #72 from NadavShaar/drag-and-drop

Author: NadavShaar

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nadavshaar/react-grid-table",
-    "version": "0.2.2",
+    "version": "0.3",
     "description": "A modular table, based on a CSS grid layout, optimized for customization.",
     "author": "Nadav Shaar",
     "license": "MIT",
@@ -62,7 +62,8 @@
     },
     "peerDependencies": {
         "react": "^17.0.1",
-        "react-dom": "^17.0.1"
+        "react-dom": "^17.0.1",
+        "prop-types": "^15.7.2"
     },
     "devDependencies": {
         "@babel/core": "^7.12.3",
@@ -74,6 +75,7 @@
         "cross-env": "^7.0.3",
         "css-loader": "^5.0.1",
         "gh-pages": "^3.1.0",
+        "prop-types": "^15.7.2",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-is": "^17.0.1",
@@ -86,7 +88,6 @@
         "dist"
     ],
     "dependencies": {
-        "react-sortable-hoc": "^1.11.0",
         "react-virtual": "^2.3.0"
     }
 }

src/components/HeaderCellContainer.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { SortableElement, SortableHandle } from '../drag-and-drop';
 
-const SortableItem = SortableElement(({children, columnId, className}) => (
-    <div className={className} data-column-id={columnId}>{children}</div>
-));
+const SortableItem = SortableElement(React.forwardRef(({children, columnId, className}, ref) => (
+    <div ref={ref} className={className} data-column-id={columnId}>{children}</div>
+)));
 
 const SortableDragHandle = SortableHandle(({children, index}) => (
     <React.Fragment>{children}</React.Fragment>

src/drag-and-drop/AutoScroller/index.js

@@ -0,0 +1,89 @@
+export default class AutoScroller {
+  constructor(container, onScrollCallback) {
+    this.container = container;
+    this.onScrollCallback = onScrollCallback;
+  }
+
+  clear() {
+    if (this.interval == null) {
+      return;
+    }
+
+    clearInterval(this.interval);
+    this.interval = null;
+  }
+
+  update({translate, minTranslate, maxTranslate, width, height}) {
+    const direction = {
+      x: 0,
+      y: 0,
+    };
+    const speed = {
+      x: 1,
+      y: 1,
+    };
+    const acceleration = {
+      x: 10,
+      y: 10,
+    };
+
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+    } = this.container;
+
+    const isTop = scrollTop === 0;
+    const isBottom = scrollHeight - scrollTop - clientHeight === 0;
+    const isLeft = scrollLeft === 0;
+    const isRight = scrollWidth - scrollLeft - clientWidth === 0;
+
+    if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
+      // Scroll Down
+      direction.y = 1;
+      speed.y =
+        acceleration.y *
+        Math.abs((maxTranslate.y - height / 2 - translate.y) / height);
+    } else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
+      // Scroll Right
+      direction.x = 1;
+      speed.x =
+        acceleration.x *
+        Math.abs((maxTranslate.x - width / 2 - translate.x) / width);
+    } else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
+      // Scroll Up
+      direction.y = -1;
+      speed.y =
+        acceleration.y *
+        Math.abs((translate.y - height / 2 - minTranslate.y) / height);
+    } else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
+      // Scroll Left
+      direction.x = -1;
+      speed.x =
+        acceleration.x *
+        Math.abs((translate.x - width / 2 - minTranslate.x) / width);
+    }
+
+    if (this.interval) {
+      this.clear();
+      this.isAutoScrolling = false;
+    }
+
+    if (direction.x !== 0 || direction.y !== 0) {
+      this.interval = setInterval(() => {
+        this.isAutoScrolling = true;
+        const offset = {
+          left: speed.x * direction.x,
+          top: speed.y * direction.y,
+        };
+        this.container.scrollTop += offset.top;
+        this.container.scrollLeft += offset.left;
+
+        this.onScrollCallback(offset);
+      }, 5);
+    }
+  }
+}

src/drag-and-drop/Manager/index.js

@@ -0,0 +1,53 @@
+export default class Manager {
+  refs = {};
+
+  add(collection, ref) {
+    if (!this.refs[collection]) {
+      this.refs[collection] = [];
+    }
+
+    this.refs[collection].push(ref);
+  }
+
+  remove(collection, ref) {
+    const index = this.getIndex(collection, ref);
+
+    if (index !== -1) {
+      this.refs[collection].splice(index, 1);
+    }
+  }
+
+  isActive() {
+    return this.active;
+  }
+
+  getActive() {
+    return this.refs[this.active.collection].find(
+      // eslint-disable-next-line eqeqeq
+      ({node}) => node.sortableInfo.index == this.active.index,
+    );
+  }
+
+  getIndex(collection, ref) {
+    return this.refs[collection].indexOf(ref);
+  }
+
+  getOrderedRefs(collection = this.active.collection) {
+    return this.refs[collection].sort(sortByIndex);
+  }
+}
+
+function sortByIndex(
+  {
+    node: {
+      sortableInfo: {index: index1},
+    },
+  },
+  {
+    node: {
+      sortableInfo: {index: index2},
+    },
+  },
+) {
+  return index1 - index2;
+}

src/drag-and-drop/SortableContainer/defaultGetHelperDimensions.js

@@ -0,0 +1,6 @@
+export default function defaultGetHelperDimensions({node}) {
+  return {
+    height: node.offsetHeight,
+    width: node.offsetWidth,
+  };
+}

src/drag-and-drop/SortableContainer/defaultShouldCancelStart.js

@@ -0,0 +1,23 @@
+import {NodeType, closest} from '../utils';
+
+export default function defaultShouldCancelStart(event) {
+  // Cancel sorting if the event target is an `input`, `textarea`, `select` or `option`
+  const interactiveElements = [
+    NodeType.Input,
+    NodeType.Textarea,
+    NodeType.Select,
+    NodeType.Option,
+    NodeType.Button,
+  ];
+
+  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
+    // Return true to cancel sorting
+    return true;
+  }
+
+  if (closest(event.target, (el) => el.contentEditable === 'true')) {
+    return true;
+  }
+
+  return false;
+}