@elliemae/ds-treeview 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/utils/useDnDHelpers.js

@@ -1,39 +1,44 @@
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useCallback } from 'react';
 import { cloneDeep } from 'lodash';
 import TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext.js';
 import { getNodeById, focusItem } from './tree-helpers.js';
 import { inferKeyboardKinshipDrop, inferHoverItemKinshipDrop, isDropValid } from './dnd-helpers.js';
-import './string-helpers.js';
-
-var useDnDHelpers = function useDnDHelpers() {
-  var ctx = useContext(TreeViewContext);
-  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 = useCallback(function (_ref) {
-    var oldIndex = _ref.oldIndex,
-        newIndex = _ref.newIndex,
-        isKeySorting = _ref.isKeySorting;
-    var newItems = cloneDeep(data);
-    var isBefore = relativeMouseCord.isBefore,
-        isAfter = relativeMouseCord.isAfter,
-        overItem = relativeMouseCord.item,
-        isValid = relativeMouseCord.isValid; // if dropping in same position do nothing
+
+const useDnDHelpers = () => {
+  const ctx = useContext(TreeViewContext);
+  const {
+    props: {
+      data,
+      onOrderChange,
+      restrictDragAndDrop
+    },
+    relativeMouseCord,
+    setRelativeMouseCord,
+    visibleItems,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    setDraggedItem,
+    setFocusedItem,
+    triggerTreeRerender,
+    tree,
+    treeRoot,
+    draggedItem
+  } = ctx;
+  const onSortEnd = useCallback(({
+    oldIndex,
+    newIndex,
+    isKeySorting
+  }) => {
+    let newItems = 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) {
@@ -45,39 +50,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 = inferKeyboardKinshipDrop({
+      const kinship = inferKeyboardKinshipDrop({
         items: visibleItems,
-        newIndex: newIndex,
-        movementDirection: movementDirection
+        newIndex,
+        movementDirection
       });
       newNestedIndex = kinship.newNestedIndex;
       newParentNode = kinship.newParentNode;
     } else {
-      var _kinship = inferHoverItemKinshipDrop({
-        isBefore: isBefore,
-        isAfter: isAfter,
-        overItem: overItem,
-        movementDirection: movementDirection,
-        draggedItem: draggedItem
+      const kinship = 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);
+    const newMovedItemNode = tree.parse(draggedItem.node.model);
     getNodeById(treeRoot, draggedItem.id).drop();
     newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
 
     if (newParentNode.isRoot()) {
-      newItems = _toConsumableArray(newParentNode.model.children);
+      newItems = [...newParentNode.model.children];
     } else {
-      newItems = _toConsumableArray(treeRoot.model.children);
+      newItems = [...treeRoot.model.children];
     }
 
     onOrderChange(newItems, data, draggedItem);
@@ -85,7 +89,7 @@ var useDnDHelpers = function useDnDHelpers() {
     setDraggedItem(null);
     triggerTreeRerender();
   }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem, setRelativeMouseCord]);
-  var onSortStart = useCallback(function () {}, // ({ node, index, collection, isKeySorting }, event) => {
+  const onSortStart = useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
   // console.log('node :>> ', node);
   // console.log('isKeySorting :>> ', isKeySorting);
   // console.log('event :>> ', event);
@@ -94,72 +98,81 @@ var useDnDHelpers = function useDnDHelpers() {
   // setDraggedItem(item);
   // },
   []);
-  var updateBeforeSortStart = 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 = 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(defaultRelativeMouseCoord);
-      setIsKeyboardDragging(isKeySorting);
-      setIsDragging(true);
-      setDraggedItem(item);
-      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(defaultRelativeMouseCoord);
+    setIsKeyboardDragging(isKeySorting);
+    setIsDragging(true);
+    setDraggedItem(item);
+    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 = 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 = useCallback(({
+    event,
+    item,
+    itemIndex,
+    setIsDraggingOverThis,
+    openFolderOnHoverTimeout
+  }) => {
+    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 = 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 = 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
       });
@@ -169,7 +182,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();
@@ -180,12 +193,11 @@ var useDnDHelpers = function useDnDHelpers() {
     }
   }, [isDragging, setRelativeMouseCord, draggedItem, restrictDragAndDrop, isKeyboardDragging]);
   return {
-    updateBeforeSortStart: updateBeforeSortStart,
-    onSortStart: onSortStart,
-    onSortEnd: onSortEnd,
-    onMouseDragOverItem: onMouseDragOverItem
+    updateBeforeSortStart,
+    onSortStart,
+    onSortEnd,
+    onMouseDragOverItem
   };
 };
 
 export { useDnDHelpers };
-//# sourceMappingURL=useDnDHelpers.js.map

package/esm/utils/useInstanceRefActions.js

@@ -1,76 +1,68 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { focusItem } from './tree-helpers.js';
 import { toggleExpandAllHelper } from './group-expands-helpers.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import './string-helpers.js';
 
-var useInstanceRefActions = function useInstanceRefActions(_ref, ctx) {
-  var actions = _ref.actions;
-  var onItemFocus = ctx.props.onItemFocus,
-      virtualListHelpers = ctx.virtualListHelpers,
-      treeRoot = ctx.treeRoot,
-      visibleItems = ctx.visibleItems,
-      triggerTreeRerender = ctx.triggerTreeRerender,
-      setSelectedItem = ctx.setSelectedItem,
-      setFocusedItem = ctx.setFocusedItem,
-      setLatestToggledItem = ctx.setLatestToggledItem;
-
-  var _useRef = useRef({}),
-      promises = _useRef.current;
-
-  var _useMemo = useMemo(function () {
-    return virtualListHelpers;
-  }, [virtualListHelpers]),
-      scrollToIndex = _useMemo.scrollToIndex;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandPromise = _useState2[0],
-      setPromise = _useState2[1];
-
-  useEffect(function () {
+const useInstanceRefActions = ({
+  actions
+}, ctx) => {
+  const {
+    props: {
+      onItemFocus
+    },
+    virtualListHelpers,
+    treeRoot,
+    visibleItems,
+    triggerTreeRerender,
+    setSelectedItem,
+    setFocusedItem,
+    setLatestToggledItem
+  } = ctx;
+  const {
+    current: promises
+  } = useRef({});
+  const {
+    scrollToIndex
+  } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
+  const [expandPromise, setPromise] = useState();
+  useEffect(() => {
     if (expandPromise && promises.expandResolve) {
       promises.expandResolve(visibleItems);
       promises.expandResolve = null;
       setPromise(null);
     }
   }, [visibleItems, expandPromise, promises]);
-  actions.toggleExpandAll = useCallback(function (isExpand) {
-    var p = new Promise(function (resolve) {
+  actions.toggleExpandAll = useCallback(isExpand => {
+    const p = new Promise(resolve => {
       promises.expandResolve = resolve;
       toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem);
     });
     setPromise(p);
     return p;
   }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem]);
-  actions.scrollTo = useCallback(function (indx) {
-    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      align: 'start'
-    };
+  actions.scrollTo = useCallback((indx, opts = {
+    align: 'start'
+  }) => {
     if (scrollToIndex) scrollToIndex(indx, opts);
   }, [scrollToIndex]);
-  actions.setSelectedItemByVirtualIndex = useCallback(function (index) {
-    var itemByIndex = visibleItems[index];
+  actions.setSelectedItemByVirtualIndex = useCallback(index => {
+    const itemByIndex = visibleItems[index];
     setSelectedItem(itemByIndex);
   }, [visibleItems, setSelectedItem]);
-  actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
-    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      align: 'start',
-      withScroll: false
-    };
-    var itemByIndex = visibleItems[index];
-    var onItemFocusParams = {
+  actions.setFocusedItemByVirtualIndex = useCallback((index, opts = {
+    align: 'start',
+    withScroll: false
+  }) => {
+    const itemByIndex = visibleItems[index];
+    const onItemFocusParams = {
       itemIndex: itemByIndex.virtualIndex,
-      scrollToItem: function scrollToItem() {
-        return scrollToIndex(index, opts);
-      },
+      scrollToItem: () => scrollToIndex(index, opts),
       item: itemByIndex
     };
 
     if (opts.withScroll && scrollToIndex) {
       scrollToIndex(index, opts);
-      setTimeout(function () {
+      setTimeout(() => {
         setFocusedItem(itemByIndex);
         focusItem(itemByIndex);
         onItemFocus(onItemFocusParams);
@@ -85,4 +77,3 @@ var useInstanceRefActions = function useInstanceRefActions(_ref, ctx) {
 };
 
 export { useInstanceRefActions };
-//# sourceMappingURL=useInstanceRefActions.js.map

package/esm/utils/useTree.js

@@ -1,35 +1,26 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import TreeModel from 'tree-model';
 import { cloneDeep } from 'lodash';
 import { enrichNodeModelInPlace, walkVisibles } from './tree-helpers.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import './string-helpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var useTree = function useTree(data, props, states) {
-  var setExpandedGroups = states.setExpandedGroups;
-  var unfrozenData = useMemo(function () {
-    return cloneDeep(data);
-  }, [data]); // convert data into a TreeModel with extra isExpanded prop
+const useTree = (data, props, states) => {
+  const {
+    setExpandedGroups
+  } = states;
+  const unfrozenData = useMemo(() => cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
 
-  var tree = useMemo(function () {
-    return new TreeModel();
-  }, []);
-
-  var _useState = useState({
+  const tree = useMemo(() => new TreeModel(), []);
+  const [treeData, setTreeData] = useState({
     name: '__root',
     isExpanded: true,
     children: unfrozenData
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      treeData = _useState2[0],
-      setTreeData = _useState2[1];
-
-  useEffect(function () {
+  });
+  useEffect(() => {
     setTreeData({
       name: '__root',
       isExpanded: true,
@@ -38,43 +29,32 @@ var useTree = function useTree(data, props, states) {
   }, [unfrozenData]); // expose a way to rerender the tree
   //   used for expand functionality
 
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rerenderItems = _useState4[0],
-      setRerenderItems = _useState4[1];
-
-  var triggerTreeRerender = useCallback(function () {
+  const [rerenderItems, setRerenderItems] = useState({});
+  const triggerTreeRerender = useCallback(() => {
     setRerenderItems({});
   }, []); // when re-rendering we re-parse the list
 
-  var _useState5 = useState(tree.parse(treeData)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      treeRoot = _useState6[0],
-      setTreeRoot = _useState6[1];
-
-  useEffect(function () {
+  const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
+  useEffect(() => {
     setTreeRoot(tree.parse(treeData));
   }, [treeData, rerenderItems]);
-
-  var _useState7 = useState([]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      visibleItems = _useState8[0],
-      setVisibleItems = _useState8[1];
-
-  var searchQuery = props.searchQuery,
-      highlightOnlyQuery = props.highlightOnlyQuery,
-      onVisibleItemsChange = props.onVisibleItemsChange,
-      selection = props.selection;
-  useEffect(function () {
-    var parsedVisibleItems = [];
-    var newExpandedHashMap = {};
-    treeRoot.walk(function (node) {
+  const [visibleItems, setVisibleItems] = useState([]);
+  const {
+    searchQuery,
+    highlightOnlyQuery,
+    onVisibleItemsChange,
+    selection
+  } = props;
+  useEffect(() => {
+    const parsedVisibleItems = [];
+    const newExpandedHashMap = {};
+    treeRoot.walk(node => {
       enrichNodeModelInPlace(node, searchQuery, selection);
       if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
     });
-    walkVisibles(treeRoot, function (node) {
+    walkVisibles(treeRoot, node => {
       parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
-        node: node
+        node
       }));
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
@@ -82,13 +62,12 @@ var useTree = function useTree(data, props, states) {
     setExpandedGroups(newExpandedHashMap);
   }, [treeRoot, rerenderItems, searchQuery]);
   return {
-    visibleItems: visibleItems,
-    tree: tree,
-    treeRoot: treeRoot,
-    rerenderItems: rerenderItems,
-    triggerTreeRerender: triggerTreeRerender
+    visibleItems,
+    tree,
+    treeRoot,
+    rerenderItems,
+    triggerTreeRerender
   };
 };
 
 export { useTree };
-//# sourceMappingURL=useTree.js.map