@elliemae/ds-treeview 1.60.0 → 2.0.0-alpha.12

package/cjs/utils/tree-helpers.js

@@ -2,133 +2,131 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.every.js');
 var React = require('react');
-var utils_stringHelpers = require('./string-helpers.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-
-var walkVisibles = function walkVisibles(node, callback) {
-  var skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var children = node.children,
-      model = node.model;
-  var name = model.name,
-      isExpanded = model.isExpanded,
-      childrenMatchesSearchQuery = model.childrenMatchesSearchQuery,
-      matchesSearchQuery = model.matchesSearchQuery;
-  var shouldSkipBecauseIsRoot = skipRoot && name === '__root';
-  var queryRestrictionsPassed = highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery;
+var stringHelpers = require('./string-helpers.js');
+
+const walkVisibles = function (node, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const {
+    children,
+    model
+  } = node;
+  const {
+    name,
+    isExpanded,
+    childrenMatchesSearchQuery,
+    matchesSearchQuery
+  } = model;
+  const shouldSkipBecauseIsRoot = skipRoot && name === '__root';
+  const queryRestrictionsPassed = highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery;
   if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);
-  var shouldWalkChildren = children.length && isExpanded && queryRestrictionsPassed;
+  const shouldWalkChildren = children.length && isExpanded && queryRestrictionsPassed;
 
   if (shouldWalkChildren) {
-    children.forEach(function (childNode) {
+    children.forEach(childNode => {
       walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);
     });
   }
 };
-var walkParents = function walkParents(nodePath, callback) {
-  var skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
-  var parents = _toConsumableArray__default['default'](nodePath).reverse();
-
+const walkParents = function (nodePath, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const parents = [...nodePath].reverse();
   parents.shift(); // remove current node from the parents array
 
   if (skipRoot) parents.pop(); // remove the root from the parents if skipping root
 
   parents.forEach(callback);
 };
-var walkAllNodeChildren = function walkAllNodeChildren(node, callback) {
-  var isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var _node$children = node.children,
-      children = _node$children === void 0 ? [] : _node$children;
-  var shouldWalkChildren = children.length;
+const walkAllNodeChildren = function (node, callback) {
+  let isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const {
+    children = []
+  } = node;
+  const shouldWalkChildren = children.length;
   if (!isFirst) callback(node);
 
   if (shouldWalkChildren) {
-    children.forEach(function (childNode) {
+    children.forEach(childNode => {
       walkAllNodeChildren(childNode, callback, false);
     });
   }
 };
-var getNodeById = function getNodeById(treeRoot, id) {
-  var nodes = treeRoot.all(function (node) {
-    return node.model.id === id;
-  });
+const getNodeById = (treeRoot, id) => {
+  const nodes = treeRoot.all(node => node.model.id === id);
   return nodes[0];
 };
-var cloneNode = function cloneNode(tree, node) {
-  return tree.parse(node.model);
-};
-var getItemsParentNode = function getItemsParentNode() {
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+const cloneNode = (tree, node) => tree.parse(node.model);
+const getItemsParentNode = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (items.length === 0) throw new Error("Received empty items, can't retrieve parent"); // in case we already know the items compared shares the same parent
 
   if (!skipSameParentCheck) if (!itemsShareSameParent(items)) // if we don't know (default, we don't) check if they share the parent
     throw new Error("Received items don't share the same parent, can't retrieve parent"); // when moving in first position we receive [undefined,...{items}]
   // when moving in last position we receive [...{items}, undefined]
 
-  var firstExistingItem = items.find(function (item) {
-    return !!item;
-  });
+  const firstExistingItem = items.find(item => !!item);
   if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
-  var firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
   // length -1 is the current-node
   // length -2 is the parent-node
   // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
 
-  var directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
+  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
   return directParentNode;
 };
-var itemsShareSameParent = function itemsShareSameParent() {
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+const itemsShareSameParent = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   if (items.length === 0) throw new Error('Received empty items for comparison');
   if (items.length === 1) return true; // when moving in first position we receive [undefined,...{items}]
   // when moving in last position we receive [...{items}, undefined]
 
-  var firstExistingItem = items.find(function (item) {
-    return !!item;
-  });
+  const firstExistingItem = items.find(item => !!item);
   if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
-  var firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
   // length -1 is the current-node
   // length -2 is the parent-node
   // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
 
-  var directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
-  return items.every(function (item) {
+  const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
+  return items.every(item => {
     // undefined nodes count as having the same parent
     if (!item) return true;
-    var itemPath = item.node.getPath();
-    var itemDirectParent = itemPath[itemPath.length - 2];
+    const itemPath = item.node.getPath();
+    const itemDirectParent = itemPath[itemPath.length - 2];
     return directParentNode === itemDirectParent;
   });
 };
-var getNodeMatchesSearchQuery = function getNodeMatchesSearchQuery(node) {
-  var searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var standardizedName = utils_stringHelpers.standardizeSearchQueryString(node.model.name);
-  var standardizedSearchQuery = utils_stringHelpers.standardizeSearchQueryString(searchQuery);
+const getNodeMatchesSearchQuery = function (node) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const standardizedName = stringHelpers.standardizeSearchQueryString(node.model.name);
+  const standardizedSearchQuery = stringHelpers.standardizeSearchQueryString(searchQuery);
   return standardizedName.includes(standardizedSearchQuery);
 };
-var getChildrenMatchesSearchQuery = function getChildrenMatchesSearchQuery(parentNode) {
-  var searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var anyChildMatch = false;
-  walkAllNodeChildren(parentNode, function (node) {
+const getChildrenMatchesSearchQuery = function (parentNode) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let anyChildMatch = false;
+  walkAllNodeChildren(parentNode, node => {
     if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
   });
   return anyChildMatch;
 };
-var enrichNodeModelInPlace = function enrichNodeModelInPlace(node) {
+const enrichNodeModelInPlace = function (node) {
   var _node$model, _node$model$children;
 
-  var searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var path = node.getPath();
-  var depth = path.length - 1;
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  const path = node.getPath();
+  const depth = path.length - 1;
   node.model.nodePath = path;
   node.model.treeDepth = depth;
 
@@ -162,7 +160,7 @@ var enrichNodeModelInPlace = function enrichNodeModelInPlace(node) {
     node.model.isChecked = selection[node.model.id];
   }
 };
-var focusItem = function focusItem(item) {
+const focusItem = item => {
   var _item$nodeItemRef, _item$nodeItemRef$cur;
 
   item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
@@ -179,4 +177,3 @@ exports.itemsShareSameParent = itemsShareSameParent;
 exports.walkAllNodeChildren = walkAllNodeChildren;
 exports.walkParents = walkParents;
 exports.walkVisibles = walkVisibles;
-//# sourceMappingURL=tree-helpers.js.map

package/cjs/utils/useDnDHelpers.js

@@ -2,46 +2,52 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.drop.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.drop.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var lodash = require('lodash');
 var TreeViewContext = require('../TreeViewContext.js');
-var utils_treeHelpers = require('./tree-helpers.js');
-var utils_dndHelpers = require('./dnd-helpers.js');
-require('./string-helpers.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-
-var useDnDHelpers = function useDnDHelpers() {
-  var ctx = React.useContext(TreeViewContext['default']);
-  var _ctx$props = ctx.props,
-      data = _ctx$props.data,
-      onOrderChange = _ctx$props.onOrderChange,
-      restrictDragAndDrop = _ctx$props.restrictDragAndDrop,
-      relativeMouseCord = ctx.relativeMouseCord,
-      setRelativeMouseCord = ctx.setRelativeMouseCord,
-      visibleItems = ctx.visibleItems,
-      isDragging = ctx.isDragging,
-      setIsDragging = ctx.setIsDragging,
-      isKeyboardDragging = ctx.isKeyboardDragging,
-      setIsKeyboardDragging = ctx.setIsKeyboardDragging,
-      setDraggedItem = ctx.setDraggedItem,
-      setFocusedItem = ctx.setFocusedItem,
-      triggerTreeRerender = ctx.triggerTreeRerender,
-      tree = ctx.tree,
-      treeRoot = ctx.treeRoot,
-      draggedItem = ctx.draggedItem;
-  var onSortEnd = React.useCallback(function (_ref) {
-    var oldIndex = _ref.oldIndex,
-        newIndex = _ref.newIndex,
-        isKeySorting = _ref.isKeySorting;
-    var newItems = lodash.cloneDeep(data);
-    var isBefore = relativeMouseCord.isBefore,
-        isAfter = relativeMouseCord.isAfter,
-        overItem = relativeMouseCord.item,
-        isValid = relativeMouseCord.isValid; // if dropping in same position do nothing
+var treeHelpers = require('./tree-helpers.js');
+var dndHelpers = require('./dnd-helpers.js');
+
+const useDnDHelpers = () => {
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      data,
+      onOrderChange,
+      restrictDragAndDrop
+    },
+    relativeMouseCord,
+    setRelativeMouseCord,
+    visibleItems,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    setDraggedItem,
+    setFocusedItem,
+    triggerTreeRerender,
+    tree,
+    treeRoot,
+    draggedItem
+  } = ctx;
+  const onSortEnd = React.useCallback(_ref => {
+    let {
+      oldIndex,
+      newIndex,
+      isKeySorting
+    } = _ref;
+    let newItems = lodash.cloneDeep(data);
+    const {
+      isBefore,
+      isAfter,
+      item: overItem,
+      isValid
+    } = relativeMouseCord; // if dropping in same position do nothing
     // if the drop is not allowed do nothing
 
     if (oldIndex === newIndex || !isValid) {
@@ -53,39 +59,38 @@ var useDnDHelpers = function useDnDHelpers() {
     } // if we are moving from topToBottom the offset changes
 
 
-    var movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
-    var newNestedIndex;
-    var newParentNode;
+    const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
+    let newNestedIndex;
+    let newParentNode;
 
     if (isKeySorting) {
-      var kinship = utils_dndHelpers.inferKeyboardKinshipDrop({
+      const kinship = dndHelpers.inferKeyboardKinshipDrop({
         items: visibleItems,
-        newIndex: newIndex,
-        movementDirection: movementDirection
+        newIndex,
+        movementDirection
       });
       newNestedIndex = kinship.newNestedIndex;
       newParentNode = kinship.newParentNode;
     } else {
-      var _kinship = utils_dndHelpers.inferHoverItemKinshipDrop({
-        isBefore: isBefore,
-        isAfter: isAfter,
-        overItem: overItem,
-        movementDirection: movementDirection,
-        draggedItem: draggedItem
+      const kinship = dndHelpers.inferHoverItemKinshipDrop({
+        isBefore,
+        isAfter,
+        overItem,
+        movementDirection,
+        draggedItem
       });
-
-      newNestedIndex = _kinship.newNestedIndex;
-      newParentNode = _kinship.newParentNode;
+      newNestedIndex = kinship.newNestedIndex;
+      newParentNode = kinship.newParentNode;
     }
 
-    var newMovedItemNode = tree.parse(draggedItem.node.model);
-    utils_treeHelpers.getNodeById(treeRoot, draggedItem.id).drop();
+    const newMovedItemNode = tree.parse(draggedItem.node.model);
+    treeHelpers.getNodeById(treeRoot, draggedItem.id).drop();
     newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
 
     if (newParentNode.isRoot()) {
-      newItems = _toConsumableArray__default['default'](newParentNode.model.children);
+      newItems = [...newParentNode.model.children];
     } else {
-      newItems = _toConsumableArray__default['default'](treeRoot.model.children);
+      newItems = [...treeRoot.model.children];
     }
 
     onOrderChange(newItems, data, draggedItem);
@@ -93,7 +98,7 @@ var useDnDHelpers = function useDnDHelpers() {
     setDraggedItem(null);
     triggerTreeRerender();
   }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem, setRelativeMouseCord]);
-  var onSortStart = React.useCallback(function () {}, // ({ node, index, collection, isKeySorting }, event) => {
+  const onSortStart = React.useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
   // console.log('node :>> ', node);
   // console.log('isKeySorting :>> ', isKeySorting);
   // console.log('event :>> ', event);
@@ -102,72 +107,82 @@ var useDnDHelpers = function useDnDHelpers() {
   // setDraggedItem(item);
   // },
   []);
-  var updateBeforeSortStart = React.useCallback(function (beforeStartArgs) {
-    return new Promise(function (resolve) {
-      var index = beforeStartArgs.index,
-          collection = beforeStartArgs.collection,
-          isKeySorting = beforeStartArgs.isKeySorting;
-      var item = (collection === null || collection === void 0 ? void 0 : collection[index]) || visibleItems[index];
-      var isExpanded = item.node.model.isExpanded;
-
-      if (isExpanded) {
-        item.node.model.isExpanded = false;
-        triggerTreeRerender();
-      }
+  const updateBeforeSortStart = React.useCallback(beforeStartArgs => new Promise(resolve => {
+    const {
+      index,
+      collection,
+      isKeySorting
+    } = beforeStartArgs;
+    const item = (collection === null || collection === void 0 ? void 0 : collection[index]) || visibleItems[index];
+    const {
+      isExpanded
+    } = item.node.model;
+
+    if (isExpanded) {
+      item.node.model.isExpanded = false;
+      triggerTreeRerender();
+    }
 
-      setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
-      setIsKeyboardDragging(isKeySorting);
-      setIsDragging(true);
-      setDraggedItem(item);
-      utils_treeHelpers.focusItem(null);
-      setFocusedItem(null);
-      document.activeElement.blur();
-      resolve();
-    });
-  }, [visibleItems, isKeyboardDragging, setFocusedItem, setIsKeyboardDragging, setRelativeMouseCord]); // tracks mouse coords relative to an element to check if the drop happens
+    setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
+    setIsKeyboardDragging(isKeySorting);
+    setIsDragging(true);
+    setDraggedItem(item);
+    treeHelpers.focusItem(null);
+    setFocusedItem(null);
+    document.activeElement.blur();
+    resolve();
+  }), [visibleItems, isKeyboardDragging, setFocusedItem, setIsKeyboardDragging, setRelativeMouseCord]); // tracks mouse coords relative to an element to check if the drop happens
   // at the top/center/bottom of an element to choose where to move the element
   // requested in the specs
 
-  var onMouseDragOverItem = React.useCallback(function (_ref2) {
-    var event = _ref2.event,
-        item = _ref2.item,
-        itemIndex = _ref2.itemIndex,
-        setIsDraggingOverThis = _ref2.setIsDraggingOverThis,
-        openFolderOnHoverTimeout = _ref2.openFolderOnHoverTimeout;
-    var node = item.node;
-    var nodeItemRef = node.model.nodeItemRef;
+  const onMouseDragOverItem = React.useCallback(_ref2 => {
+    let {
+      event,
+      item,
+      itemIndex,
+      setIsDraggingOverThis,
+      openFolderOnHoverTimeout
+    } = _ref2;
+    const {
+      node
+    } = item;
+    const {
+      nodeItemRef
+    } = node.model;
 
     if (isDragging && !isKeyboardDragging) {
-      var rect = nodeItemRef.current.getBoundingClientRect();
-      var x = event.clientX - rect.left; // x position within the element.
+      const rect = nodeItemRef.current.getBoundingClientRect();
+      const x = event.clientX - rect.left; // x position within the element.
 
-      var y = event.clientY - rect.top; // y position within the element.
+      const y = event.clientY - rect.top; // y position within the element.
       // by spec we need to track where the drop will happens
       // if drop happens on top 25% drop before
       // if drop happens on bottom of 25% drop after
       // if drop happens in the middle 50% either invalid or drop into children
 
-      var elementHeight = rect.height;
-      var dropBeforeMaxY = elementHeight * 0.25;
-      var dropAfterMinY = elementHeight - elementHeight * 0.25;
-      var isBefore = y < dropBeforeMaxY;
-      var isAfter = y > dropAfterMinY;
-      var isInside = !isBefore && !isAfter;
-      var isValid = utils_dndHelpers.isDropValid({
-        isBefore: isBefore,
-        isAfter: isAfter,
-        draggedItem: draggedItem,
+      const {
+        height: elementHeight
+      } = rect;
+      const dropBeforeMaxY = elementHeight * 0.25;
+      const dropAfterMinY = elementHeight - elementHeight * 0.25;
+      const isBefore = y < dropBeforeMaxY;
+      const isAfter = y > dropAfterMinY;
+      const isInside = !isBefore && !isAfter;
+      const isValid = dndHelpers.isDropValid({
+        isBefore,
+        isAfter,
+        draggedItem,
         overItem: item,
-        restrictDragAndDrop: restrictDragAndDrop
+        restrictDragAndDrop
       });
       setRelativeMouseCord({
-        isBefore: isBefore,
-        isAfter: isAfter,
-        isInside: isInside,
-        isValid: isValid,
-        item: item,
-        x: x,
-        y: y,
+        isBefore,
+        isAfter,
+        isInside,
+        isValid,
+        item,
+        x,
+        y,
         relativeElementDOMRect: rect,
         relativeElementIndex: itemIndex
       });
@@ -177,7 +192,7 @@ var useDnDHelpers = function useDnDHelpers() {
       (draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.id) !== (item === null || item === void 0 ? void 0 : item.id) && ( // don't open ghost element
       item.isGroup || item.children.length > 0) && // only open groups
       !restrictDragAndDrop) {
-        openFolderOnHoverTimeout.current = setTimeout(function () {
+        openFolderOnHoverTimeout.current = setTimeout(() => {
           item.node.model.isExpanded = true;
           openFolderOnHoverTimeout.current = null;
           triggerTreeRerender();
@@ -188,12 +203,11 @@ var useDnDHelpers = function useDnDHelpers() {
     }
   }, [isDragging, setRelativeMouseCord, draggedItem, restrictDragAndDrop, isKeyboardDragging]);
   return {
-    updateBeforeSortStart: updateBeforeSortStart,
-    onSortStart: onSortStart,
-    onSortEnd: onSortEnd,
-    onMouseDragOverItem: onMouseDragOverItem
+    updateBeforeSortStart,
+    onSortStart,
+    onSortEnd,
+    onMouseDragOverItem
   };
 };
 
 exports.useDnDHelpers = useDnDHelpers;
-//# sourceMappingURL=useDnDHelpers.js.map