@elliemae/ds-treeview 2.2.0 → 2.2.2

package/cjs/utils/useDnDHelpers.js

@@ -1,220 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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 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;
-    const {
-      isBefore,
-      isAfter,
-      item: overItem,
-      isValid
-    } = relativeMouseCord;
-
-    if (draggedItem && tree && treeRoot && overItem) {
-      let newItems = lodash.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 = dndHelpers.inferKeyboardKinshipDrop({
-          items: visibleItems,
-          newIndex
-        });
-        newNestedIndex = kinship.newNestedIndex;
-        newParentNode = kinship.newParentNode;
-      } else {
-        const kinship = dndHelpers.inferHoverItemKinshipDrop({
-          isBefore,
-          isAfter,
-          overItem,
-          movementDirection,
-          draggedItem
-        });
-        newNestedIndex = kinship.newNestedIndex;
-        newParentNode = kinship.newParentNode;
-      }
-
-      const newMovedItemNode = tree.parse(draggedItem.node.model);
-      treeHelpers.getNodeById(treeRoot, draggedItem.id).drop();
-
-      if (newParentNode && typeof newNestedIndex === 'number') {
-        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]);
-  const onSortStart = React.useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
-  // console.log('node :>> ', node);
-  // console.log('isKeySorting :>> ', isKeySorting);
-  // console.log('event :>> ', event);
-  // const item = collection?.[index] || visibleItems[index];
-  // setIsDragging(true);
-  // setDraggedItem(item);
-  // },
-  []);
-  const updateBeforeSortStart = React.useCallback(beforeStartArgs => new Promise(resolve => {
-    const {
-      index,
-      isKeySorting
-    } = beforeStartArgs;
-    const item = visibleItems[index];
-    const {
-      isExpanded
-    } = item.node.model;
-
-    if (isExpanded) {
-      item.node.model.isExpanded = false;
-      triggerTreeRerender();
-    }
-
-    setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
-    setIsKeyboardDragging(isKeySorting);
-    setIsDragging(true);
-    setDraggedItem(item);
-    treeHelpers.focusItem(null);
-    setFocusedItem(null);
-    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
-
-  const onMouseDragOverItem = React.useCallback(_ref2 => {
-    let {
-      event,
-      item,
-      itemIndex,
-      setIsDraggingOverThis,
-      openFolderOnHoverTimeout
-    } = _ref2;
-    const {
-      node
-    } = item;
-    const {
-      nodeItemRef
-    } = node.model;
-
-    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 = dndHelpers.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(TreeViewContext.defaultRelativeMouseCoord);
-    }
-  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
-  return {
-    updateBeforeSortStart,
-    onSortStart,
-    onSortEnd,
-    onMouseDragOverItem
-  };
-};
-
-exports.useDnDHelpers = useDnDHelpers;

package/esm/utils/dnd-helpers.js

@@ -1,132 +0,0 @@
-import { getItemsParentNode, itemsShareSameParent } from './tree-helpers.js';
-
-/* eslint-disable max-lines */
-const keyCodes = {
-  lift: [32, 13],
-  drop: [32, 13],
-  cancel: [27],
-  up: [38, 37],
-  down: [40, 39]
-};
-const sameParentAsHoverItemDrop = _ref => {
-  let {
-    isBefore,
-    isAfter,
-    draggedItem,
-    overItem,
-    movementDirection
-  } = _ref;
-  const hoveredItemNodeNestedIndex = overItem.node.getIndex();
-  let newParentNode = getItemsParentNode([overItem], true);
-  const {
-    treeDepth: draggedItemTreeDepth
-  } = draggedItem;
-  const {
-    treeDepth: overItemTreeDepth
-  } = overItem;
-  const directionOffset = // we don't apply the offset for direction
-  //  if moving from less nested to more nested
-  //  or moving bottom to top
-  // the offset is required when moving elemnts down in their nest level
-  draggedItemTreeDepth <= overItemTreeDepth && movementDirection === 'topToBottom' ? -1 : 0;
-  let newNestedIndex;
-  if (isBefore) newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;else if (isAfter) newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;else {
-    newNestedIndex = overItem.children.length; // append as last child of the group
-
-    newParentNode = overItem.node;
-  }
-  if (newNestedIndex < 0) newNestedIndex = 0;
-  return {
-    newNestedIndex,
-    newParentNode
-  };
-};
-const inferHoverItemKinshipDrop = _ref2 => {
-  let {
-    isBefore,
-    isAfter,
-    draggedItem,
-    overItem,
-    movementDirection
-  } = _ref2;
-  const hoverItemModel = overItem.node.model;
-  const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
-
-  if (isAfter && isGroupAndIsExpanded) {
-    return {
-      newNestedIndex: 0,
-      // append after the group, so basically as first child
-      newParentNode: overItem.node
-    };
-  }
-
-  if (isBefore || isAfter && !isGroupAndIsExpanded) {
-    return sameParentAsHoverItemDrop({
-      isBefore,
-      isAfter,
-      draggedItem,
-      overItem,
-      movementDirection
-    });
-  } // drop inside
-
-
-  return {
-    newNestedIndex: overItem.children.length,
-    // append as last child of the group
-    newParentNode: overItem.node
-  };
-};
-const isDropValid = _ref3 => {
-  let {
-    isBefore,
-    isAfter,
-    draggedItem,
-    overItem,
-    restrictDragAndDrop
-  } = _ref3;
-  const {
-    id: movedId
-  } = draggedItem;
-  const {
-    id: hoverId
-  } = overItem;
-  const isInside = !isBefore && !isAfter;
-  if (movedId === hoverId) return false;
-
-  if (isInside && !overItem.isGroup) {
-    return false; // we can't drop inside an item that isn't a group
-  }
-
-  if (restrictDragAndDrop) {
-    if (isInside) return false; // in this mode we can't drop inside another element
-
-    const sameParent = itemsShareSameParent([draggedItem, overItem]);
-    if (overItem.node.model.isExpanded && isAfter) return false;
-    if (!sameParent) return false;
-  }
-
-  return true;
-};
-const inferKeyboardKinshipDrop = _ref4 => {
-  let {
-    items,
-    newIndex
-  } = _ref4;
-  const kinship = {};
-  const itemBefore = items[newIndex];
-  const itemBeforeModel = itemBefore.node.model;
-  const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
-
-  if (isGroupAndIsExpanded) {
-    kinship.newParentNode = itemBefore.node;
-    kinship.newNestedIndex = 0;
-  } else {
-    kinship.newParentNode = getItemsParentNode([itemBefore], true);
-    kinship.newNestedIndex = itemBefore.node.getIndex();
-  }
-
-  return kinship;
-};
-
-export { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid, keyCodes, sameParentAsHoverItemDrop };

package/esm/utils/useDnDHelpers.js

@@ -1,216 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.constructor.js';
-import 'core-js/modules/esnext.async-iterator.drop.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.drop.js';
-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';
-
-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(_ref => {
-    let {
-      oldIndex,
-      newIndex,
-      isKeySorting
-    } = _ref;
-    const {
-      isBefore,
-      isAfter,
-      item: overItem,
-      isValid
-    } = 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 (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]);
-  const onSortStart = useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
-  // console.log('node :>> ', node);
-  // console.log('isKeySorting :>> ', isKeySorting);
-  // console.log('event :>> ', event);
-  // const item = collection?.[index] || visibleItems[index];
-  // setIsDragging(true);
-  // setDraggedItem(item);
-  // },
-  []);
-  const updateBeforeSortStart = useCallback(beforeStartArgs => new Promise(resolve => {
-    const {
-      index,
-      isKeySorting
-    } = beforeStartArgs;
-    const item = 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);
-    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
-
-  const onMouseDragOverItem = useCallback(_ref2 => {
-    let {
-      event,
-      item,
-      itemIndex,
-      setIsDraggingOverThis,
-      openFolderOnHoverTimeout
-    } = _ref2;
-    const {
-      node
-    } = item;
-    const {
-      nodeItemRef
-    } = node.model;
-
-    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, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
-  return {
-    updateBeforeSortStart,
-    onSortStart,
-    onSortEnd,
-    onMouseDragOverItem
-  };
-};
-
-export { useDnDHelpers };

package/types/utils/dnd-helpers.d.ts

@@ -1,39 +0,0 @@
-import type { DSTreeviewT } from '../react-desc-prop-types';
-import type { DSTreeviewInternalsT } from '../sharedTypes';
-interface MetaInfoT {
-    isBefore: boolean;
-    isAfter: boolean;
-    draggedItem: DSTreeviewT.Item;
-    overItem: DSTreeviewT.Item;
-}
-interface KinshipT {
-    newParentNode: DSTreeviewT.Item['node'];
-    newNestedIndex: number;
-}
-export declare const keyCodes: {
-    lift: number[];
-    drop: number[];
-    cancel: number[];
-    up: number[];
-    down: number[];
-};
-export declare const sameParentAsHoverItemDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
-    movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
-}) => {
-    newNestedIndex: number;
-    newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
-};
-export declare const inferHoverItemKinshipDrop: ({ isBefore, isAfter, draggedItem, overItem, movementDirection, }: MetaInfoT & {
-    movementDirection: DSTreeviewInternalsT.DnDMovementDirectionT;
-}) => {
-    newNestedIndex: number;
-    newParentNode: import("tree-model/types").Node<DSTreeviewT.Item>;
-};
-export declare const isDropValid: ({ isBefore, isAfter, draggedItem, overItem, restrictDragAndDrop, }: MetaInfoT & {
-    restrictDragAndDrop: boolean;
-}) => boolean;
-export declare const inferKeyboardKinshipDrop: ({ items, newIndex, }: {
-    items: DSTreeviewT.Item[];
-    newIndex: number;
-}) => Partial<KinshipT>;
-export {};

package/types/utils/useDnDHelpers.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="node" />
-/// <reference types="mocha" />
-/// <reference types="webpack-env" />
-/// <reference types="styled-components" />
-import React from 'react';
-import type { DSTreeviewT } from '../react-desc-prop-types';
-import type { DSTreeviewInternalsT } from '../sharedTypes';
-export declare const useDnDHelpers: () => {
-    updateBeforeSortStart: (beforeStartArgs: {
-        index: number;
-        isKeySorting: boolean;
-    }) => Promise<unknown>;
-    onSortStart: () => void;
-    onSortEnd: ({ oldIndex, newIndex, isKeySorting }: {
-        oldIndex: number;
-        newIndex: number;
-        isKeySorting: boolean;
-    }) => void;
-    onMouseDragOverItem: ({ event, item, itemIndex, setIsDraggingOverThis, openFolderOnHoverTimeout, }: {
-        event: React.MouseEvent<HTMLLIElement>;
-        item: DSTreeviewT.Item;
-        itemIndex: number;
-        setIsDraggingOverThis: DSTreeviewInternalsT.StateSetter<boolean>;
-        openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;
-    }) => void;
-};