/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events.js'; /** * A class which provides an API for analyzing the `drag` events * of the TreeView. * * @example * ```jsx * const App = () => { * const dragClueRef = React.useRef(null); * const [tree, setTree] = React.useState([{ * text: 'Furniture', expanded: true, items: [ * { text: 'Tables & Chairs', expanded: true }, * { text: 'Sofas', expanded: true }, * { text: 'Occasional Furniture', expanded: true }] * }, { * text: 'Decor', expanded: true, items: [ * { text: 'Bed Linen', expanded: true }, * { text: 'Curtains & Blinds', expanded: true }, * { text: 'Carpets', expanded: true }] * }]); * * const SEPARATOR = '_'; * * const getSiblings = (itemIndex, data) => { * let result = data; * const indices = itemIndex.split(SEPARATOR).map(index => Number(index)); * for (let i = 0; i < indices.length - 1; i++) { * result = result[indices[i]].items; * } * return result; * }; * * const getClueClassName = (event) => { * const eventAnalyzer = new TreeViewDragAnalyzer(event).init(); * const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex; * * if (eventAnalyzer.isDropAllowed) { * switch (eventAnalyzer.getDropOperation()) { * case 'child': * return 'k-i-plus'; * case 'before': * return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ? * 'k-i-insert-up' : 'k-i-insert-middle'; * case 'after': * const siblings = getSiblings(itemIndex, tree); * const lastIndex = Number(itemIndex.split(SEPARATOR).pop()); * * return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down'; * default: * break; * } * } * * return 'k-i-cancel'; * }; * * const onItemDragOver = (event) => { * dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event)); * }; * * const onItemDragEnd = (event) => { * dragClueRef.current.hide(); * const eventAnalyzer = new TreeViewDragAnalyzer(event).init(); * * if (eventAnalyzer.isDropAllowed) { * const updatedTree = moveTreeViewItem( * event.itemHierarchicalIndex, * tree, * eventAnalyzer.getDropOperation(), * eventAnalyzer.destinationMeta.itemHierarchicalIndex, * ); * * setTree(updatedTree); * } * }; * * return ( *
* * *
* ); * } * ``` */ export declare class TreeViewDragAnalyzer { private event; private itemId; private treeViewGuid; private initialized; private destDomNodeWithMeta; private destItemId; private destTreeViewGuid; /** * @param event - The event that will be analyzed. */ constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent); /** * The method which initializes the analyzer. * Invoke the method before you call any other methods. * * @returns - The analyzer object of the `drag` event. */ init(): this; /** * Returns `true` if dropping is allowed. Otherwise, returns `false`. */ get isDropAllowed(): boolean; /** * Returns an object which contains: * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and * * The `guid` of the destination TreeView (the TreeView which renders the destination item). */ get destinationMeta(): { itemHierarchicalIndex: string; treeViewGuid: string; }; /** * Returns the specific drop operation. * * @returns - The following values are returned: * * `before`—Indicates that the dragged item is positioned at the beginning of the destination item. * * `after`—Indicates that the dragged item is positioned at the end of the destination item. * * `child`—Indicates that the dragged item is positioned in the middle of the destination item. * * `undefined`—Indicates that dropping is not allowed. */ getDropOperation(): "child" | "after" | "before" | undefined; private setDestimationMeta; }