@elliemae/ds-treeview 2.0.2 → 2.1.0-rc.4

package/esm/utils/useDnDHelpers.js

@@ -37,63 +37,68 @@ const useDnDHelpers = () => {
       newIndex,
       isKeySorting
     } = _ref;
-    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
+    } = relativeMouseCord;
+
+    if (draggedItem && tree && treeRoot && overItem) {
+      let newItems = cloneDeep(data); // if dropping in same position do nothing
+      // if the drop is not allowed do nothing
+
+      if (oldIndex === newIndex || !isValid) {
+        // onOrderChange(newItems, data);
+        setIsDragging(false);
+        setDraggedItem(null);
+        triggerTreeRerender();
+        return;
+      } // if we are moving from topToBottom the offset changes
+
+
+      const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
+      let newNestedIndex;
+      let newParentNode;
+
+      if (isKeySorting) {
+        const kinship = inferKeyboardKinshipDrop({
+          items: visibleItems,
+          newIndex
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      } else {
+        const kinship = inferHoverItemKinshipDrop({
+          isBefore,
+          isAfter,
+          overItem,
+          movementDirection,
+          draggedItem
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      }
+
+      const newMovedItemNode = tree.parse(draggedItem.node.model);
+      getNodeById(treeRoot, draggedItem.id).drop();
+
+      if (newParentNode && typeof newNestedIndex === 'number') {
+        newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
 
-    if (oldIndex === newIndex || !isValid) {
-      // onOrderChange(newItems, data);
+        if (newParentNode.isRoot()) {
+          newItems = [...newParentNode.model.children];
+        } else {
+          newItems = [...treeRoot.model.children];
+        }
+      }
+
+      onOrderChange(newItems, data, draggedItem);
       setIsDragging(false);
       setDraggedItem(null);
       triggerTreeRerender();
-      return;
-    } // if we are moving from topToBottom the offset changes
-
-
-    const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
-    let newNestedIndex;
-    let newParentNode;
-
-    if (isKeySorting) {
-      const kinship = inferKeyboardKinshipDrop({
-        items: visibleItems,
-        newIndex,
-        movementDirection
-      });
-      newNestedIndex = kinship.newNestedIndex;
-      newParentNode = kinship.newParentNode;
-    } else {
-      const kinship = inferHoverItemKinshipDrop({
-        isBefore,
-        isAfter,
-        overItem,
-        movementDirection,
-        draggedItem
-      });
-      newNestedIndex = kinship.newNestedIndex;
-      newParentNode = kinship.newParentNode;
     }
-
-    const newMovedItemNode = tree.parse(draggedItem.node.model);
-    getNodeById(treeRoot, draggedItem.id).drop();
-    newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
-
-    if (newParentNode.isRoot()) {
-      newItems = [...newParentNode.model.children];
-    } else {
-      newItems = [...treeRoot.model.children];
-    }
-
-    onOrderChange(newItems, data, draggedItem);
-    setIsDragging(false);
-    setDraggedItem(null);
-    triggerTreeRerender();
-  }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem, setRelativeMouseCord]);
+  }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem]);
   const onSortStart = useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
   // console.log('node :>> ', node);
   // console.log('isKeySorting :>> ', isKeySorting);
@@ -106,10 +111,9 @@ const useDnDHelpers = () => {
   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 item = visibleItems[index];
     const {
       isExpanded
     } = item.node.model;
@@ -125,9 +129,9 @@ const useDnDHelpers = () => {
     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
+    if (document.activeElement && typeof document.activeElement.blur === 'function') document.activeElement.blur();
+    resolve(true);
+  }), [visibleItems, setRelativeMouseCord, setIsKeyboardDragging, setIsDragging, setDraggedItem, setFocusedItem, triggerTreeRerender]); // 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
 
@@ -146,58 +150,61 @@ const useDnDHelpers = () => {
       nodeItemRef
     } = node.model;
 
-    if (isDragging && !isKeyboardDragging) {
-      const rect = nodeItemRef.current.getBoundingClientRect();
-      const x = event.clientX - rect.left; // x 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
-
-      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
-      });
-      setRelativeMouseCord({
-        isBefore,
-        isAfter,
-        isInside,
-        isValid,
-        item,
-        x,
-        y,
-        relativeElementDOMRect: rect,
-        relativeElementIndex: itemIndex
-      });
-      setIsDraggingOverThis(true);
-
-      if (!(openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) && // only set the interval if it wasn't set already once
-      (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(() => {
-          item.node.model.isExpanded = true;
-          openFolderOnHoverTimeout.current = null;
-          triggerTreeRerender();
-        }, 1000);
+    if (isDragging && !isKeyboardDragging && draggedItem) {
+      var _nodeItemRef$current;
+
+      const rect = nodeItemRef === null || nodeItemRef === void 0 ? void 0 : (_nodeItemRef$current = nodeItemRef.current) === null || _nodeItemRef$current === void 0 ? void 0 : _nodeItemRef$current.getBoundingClientRect();
+
+      if (rect) {
+        const x = event.clientX - rect.left; // x 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
+
+        const {
+          height: elementHeight
+        } = rect;
+        const dropBeforeMaxY = elementHeight * 0.25;
+        const dropAfterMinY = elementHeight - elementHeight * 0.25;
+        const isBefore = y < dropBeforeMaxY;
+        const isAfter = y > dropAfterMinY;
+        const isValid = isDropValid({
+          isBefore,
+          isAfter,
+          draggedItem,
+          overItem: item,
+          restrictDragAndDrop
+        });
+        setRelativeMouseCord({
+          isBefore,
+          isAfter,
+          isValid,
+          item,
+          x,
+          y,
+          relativeElementDOMRect: rect,
+          relativeElementIndex: itemIndex
+        });
+        setIsDraggingOverThis(true);
+
+        if (!(openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) && // only set the interval if it wasn't set already once
+        (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(() => {
+            item.node.model.isExpanded = true;
+            openFolderOnHoverTimeout.current = null;
+            triggerTreeRerender();
+          }, 1000);
+        }
       }
     } else {
       setRelativeMouseCord(defaultRelativeMouseCoord);
     }
-  }, [isDragging, setRelativeMouseCord, draggedItem, restrictDragAndDrop, isKeyboardDragging]);
+  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
   return {
     updateBeforeSortStart,
     onSortStart,

package/esm/utils/useInstanceRefActions.js

@@ -15,6 +15,7 @@ const useInstanceRefActions = (_ref, ctx) => {
     treeRoot,
     visibleItems,
     triggerTreeRerender,
+    updateUserExpandedState,
     setSelectedItem,
     setFocusedItem,
     setLatestToggledItem
@@ -36,11 +37,11 @@ const useInstanceRefActions = (_ref, ctx) => {
   actions.toggleExpandAll = useCallback(isExpand => {
     const p = new Promise(resolve => {
       promises.expandResolve = resolve;
-      toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem);
+      if (treeRoot) toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     });
     setPromise(p);
     return p;
-  }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem]);
+  }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
   actions.scrollTo = useCallback(function (indx) {
     let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'start'

package/esm/utils/useTree.js

@@ -9,6 +9,7 @@ import { useMemo, useState, useEffect, useCallback } from 'react';
 import TreeModel from 'tree-model';
 import { cloneDeep } from 'lodash';
 import { enrichNodeModelInPlace, walkVisibles } from './tree-helpers.js';
+import { updateExpandedState } from './group-expands-helpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,15 +19,19 @@ const useTree = (data, props, states) => {
     setExpandedGroups
   } = states;
   const unfrozenData = useMemo(() => cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
+  // root element type is an exception, children model is based on what the dev passed on
+  // since root is an excepcion we must typecast
 
   const tree = useMemo(() => new TreeModel(), []);
   const [treeData, setTreeData] = useState({
+    id: '__ds_tree_root',
     name: '__root',
     isExpanded: true,
     children: unfrozenData
   });
   useEffect(() => {
     setTreeData({
+      id: '__ds_tree_root',
       name: '__root',
       isExpanded: true,
       children: unfrozenData
@@ -42,20 +47,32 @@ const useTree = (data, props, states) => {
   const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
   useEffect(() => {
     setTreeRoot(tree.parse(treeData));
-  }, [treeData, rerenderItems]);
+  }, [treeData, rerenderItems, tree]);
   const [visibleItems, setVisibleItems] = useState([]);
   const {
     searchQuery,
     highlightOnlyQuery,
     onVisibleItemsChange,
-    selection
+    selection,
+    expanded,
+    onExpandChange
   } = props;
+  const updateUserExpandedState = useCallback(() => {
+    updateExpandedState(treeRoot, onExpandChange);
+  }, [treeRoot, onExpandChange]); // we add missing properties to the received Items
+  //   not the best of the patterns, but it works
+  //   this is where we convert "SimpleItems" to "Items"
+  //   this was done to avoid breaking changes back in v1
+
   useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
     treeRoot.walk(node => {
-      enrichNodeModelInPlace(node, searchQuery, selection);
+      const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+      enrichNodeModelInPlace(node, searchQuery, selection, expanded);
       if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
+      return shouldContinueWalking;
     });
     walkVisibles(treeRoot, node => {
       parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
@@ -64,14 +81,16 @@ const useTree = (data, props, states) => {
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
     onVisibleItemsChange(parsedVisibleItems);
-    setExpandedGroups(newExpandedHashMap);
-  }, [treeRoot, rerenderItems, searchQuery]);
+    setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
+  ]);
   return {
     visibleItems,
     tree,
     treeRoot,
     rerenderItems,
-    triggerTreeRerender
+    triggerTreeRerender,
+    updateUserExpandedState
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.0.2",
+  "version": "2.1.0-rc.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -67,6 +67,10 @@
       "import": "./esm/TreeView.js",
       "require": "./cjs/TreeView.js"
     },
+    "./sharedTypes": {
+      "import": "./esm/sharedTypes.js",
+      "require": "./cjs/sharedTypes.js"
+    },
     "./related-components/TreeViewSearchBar": {
       "import": "./esm/related-components/TreeViewSearchBar.js",
       "require": "./cjs/related-components/TreeViewSearchBar.js"
@@ -75,10 +79,6 @@
       "import": "./esm/react-desc-prop-types.js",
       "require": "./cjs/react-desc-prop-types.js"
     },
-    "./prop-types": {
-      "import": "./esm/prop-types.js",
-      "require": "./cjs/prop-types.js"
-    },
     "./plugins/virtualization/TreeVirtualizationPlugin": {
       "import": "./esm/plugins/virtualization/TreeVirtualizationPlugin.js",
       "require": "./cjs/plugins/virtualization/TreeVirtualizationPlugin.js"
@@ -175,117 +175,9 @@
       "import": "./esm/parts/CheckboxSelectable.js",
       "require": "./cjs/parts/CheckboxSelectable.js"
     },
-    "./deprecated/TreeView": {
-      "import": "./esm/deprecated/TreeView.js",
-      "require": "./cjs/deprecated/TreeView.js"
-    },
-    "./deprecated/renderers": {
-      "import": "./esm/deprecated/renderers.js",
-      "require": "./cjs/deprecated/renderers.js"
-    },
-    "./deprecated/plugins/virtualization/TreeVirtualizationPlugin": {
-      "import": "./esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js",
-      "require": "./cjs/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js"
-    },
-    "./deprecated/plugins/virtualization": {
-      "import": "./esm/deprecated/plugins/virtualization/index.js",
-      "require": "./cjs/deprecated/plugins/virtualization/index.js"
-    },
-    "./deprecated/plugins/tree/walkTreeStrategy": {
-      "import": "./esm/deprecated/plugins/tree/walkTreeStrategy.js",
-      "require": "./cjs/deprecated/plugins/tree/walkTreeStrategy.js"
-    },
-    "./deprecated/plugins/tree/utils": {
-      "import": "./esm/deprecated/plugins/tree/utils.js",
-      "require": "./cjs/deprecated/plugins/tree/utils.js"
-    },
-    "./deprecated/plugins/tree/useExpandTreeState": {
-      "import": "./esm/deprecated/plugins/tree/useExpandTreeState.js",
-      "require": "./cjs/deprecated/plugins/tree/useExpandTreeState.js"
-    },
-    "./deprecated/plugins/tree/TreeDataPlugin": {
-      "import": "./esm/deprecated/plugins/tree/TreeDataPlugin.js",
-      "require": "./cjs/deprecated/plugins/tree/TreeDataPlugin.js"
-    },
-    "./deprecated/plugins/tree": {
-      "import": "./esm/deprecated/plugins/tree/index.js",
-      "require": "./cjs/deprecated/plugins/tree/index.js"
-    },
-    "./deprecated/plugins/toolbar/TreeToolbarPlugin": {
-      "import": "./esm/deprecated/plugins/toolbar/TreeToolbarPlugin.js",
-      "require": "./cjs/deprecated/plugins/toolbar/TreeToolbarPlugin.js"
-    },
-    "./deprecated/plugins/toolbar": {
-      "import": "./esm/deprecated/plugins/toolbar/index.js",
-      "require": "./cjs/deprecated/plugins/toolbar/index.js"
-    },
-    "./deprecated/plugins/selectable/utils": {
-      "import": "./esm/deprecated/plugins/selectable/utils.js",
-      "require": "./cjs/deprecated/plugins/selectable/utils.js"
-    },
-    "./deprecated/plugins/selectable/SelectablePluginTree": {
-      "import": "./esm/deprecated/plugins/selectable/SelectablePluginTree.js",
-      "require": "./cjs/deprecated/plugins/selectable/SelectablePluginTree.js"
-    },
-    "./deprecated/plugins/selectable": {
-      "import": "./esm/deprecated/plugins/selectable/index.js",
-      "require": "./cjs/deprecated/plugins/selectable/index.js"
-    },
-    "./deprecated/plugins/selectable/helper": {
-      "import": "./esm/deprecated/plugins/selectable/helper.js",
-      "require": "./cjs/deprecated/plugins/selectable/helper.js"
-    },
-    "./deprecated/plugins/searchable/utils": {
-      "import": "./esm/deprecated/plugins/searchable/utils.js",
-      "require": "./cjs/deprecated/plugins/searchable/utils.js"
-    },
-    "./deprecated/plugins/searchable/SearchableTreePlugin": {
-      "import": "./esm/deprecated/plugins/searchable/SearchableTreePlugin.js",
-      "require": "./cjs/deprecated/plugins/searchable/SearchableTreePlugin.js"
-    },
-    "./deprecated/plugins/searchable": {
-      "import": "./esm/deprecated/plugins/searchable/index.js",
-      "require": "./cjs/deprecated/plugins/searchable/index.js"
-    },
-    "./deprecated/plugins/roving/TreeRovingPlugin": {
-      "import": "./esm/deprecated/plugins/roving/TreeRovingPlugin.js",
-      "require": "./cjs/deprecated/plugins/roving/TreeRovingPlugin.js"
-    },
-    "./deprecated/plugins/roving": {
-      "import": "./esm/deprecated/plugins/roving/index.js",
-      "require": "./cjs/deprecated/plugins/roving/index.js"
-    },
-    "./deprecated/plugins": {
-      "import": "./esm/deprecated/plugins/index.js",
-      "require": "./cjs/deprecated/plugins/index.js"
-    },
-    "./deprecated/plugins/dnd/utils": {
-      "import": "./esm/deprecated/plugins/dnd/utils.js",
-      "require": "./cjs/deprecated/plugins/dnd/utils.js"
-    },
-    "./deprecated/plugins/dnd/TreeDndPlugin": {
-      "import": "./esm/deprecated/plugins/dnd/TreeDndPlugin.js",
-      "require": "./cjs/deprecated/plugins/dnd/TreeDndPlugin.js"
-    },
-    "./deprecated/plugins/dnd/renderers/DroppableList": {
-      "import": "./esm/deprecated/plugins/dnd/renderers/DroppableList.js",
-      "require": "./cjs/deprecated/plugins/dnd/renderers/DroppableList.js"
-    },
-    "./deprecated/plugins/dnd/renderers/DraggableItem": {
-      "import": "./esm/deprecated/plugins/dnd/renderers/DraggableItem.js",
-      "require": "./cjs/deprecated/plugins/dnd/renderers/DraggableItem.js"
-    },
-    "./deprecated/plugins/dnd": {
-      "import": "./esm/deprecated/plugins/dnd/index.js",
-      "require": "./cjs/deprecated/plugins/dnd/index.js"
-    },
-    "./deprecated": {
-      "import": "./esm/deprecated/index.js",
-      "require": "./cjs/deprecated/index.js"
-    },
-    "./deprecated/__testUtils__/utils": {
-      "import": "./esm/deprecated/__testUtils__/utils.js",
-      "require": "./cjs/deprecated/__testUtils__/utils.js"
+    "./config/useTreeview": {
+      "import": "./esm/config/useTreeview.js",
+      "require": "./cjs/config/useTreeview.js"
     },
     "./config/cssClassesConstants": {
       "import": "./esm/config/cssClassesConstants.js",
@@ -319,22 +211,19 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.2",
-    "@elliemae/ds-circular-progress-indicator": "2.0.2",
-    "@elliemae/ds-classnames": "2.0.2",
-    "@elliemae/ds-form": "2.0.2",
-    "@elliemae/ds-icons": "2.0.2",
-    "@elliemae/ds-shared": "2.0.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.2",
-    "@elliemae/ds-utilities": "2.0.2",
+    "@elliemae/ds-button": "2.1.0-rc.4",
+    "@elliemae/ds-circular-progress-indicator": "2.1.0-rc.4",
+    "@elliemae/ds-classnames": "2.1.0-rc.4",
+    "@elliemae/ds-form": "2.1.0-rc.4",
+    "@elliemae/ds-icons": "2.1.0-rc.4",
+    "@elliemae/ds-props-helpers": "2.1.0-rc.4",
+    "@elliemae/ds-shared": "2.1.0-rc.4",
+    "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.4",
+    "@elliemae/ds-utilities": "2.1.0-rc.4",
     "@elliemae/react-sortable-hoc": "^1.0.0",
-    "@john-osullivan/react-window-dynamic-fork": "1.9.0-alpha.1",
-    "prop-types": "~15.7.2",
-    "react-beautiful-dnd": "~13.0.0",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.3.2",
-    "resize-observer-polyfill": "~1.5.1",
     "tree-model": "~1.0.7",
     "uuid": "~8.3.2"
   },