TreeViewDragAnalyzer

Premium

A class which provides an API for analyzing the drag events of the TreeView.

jsx

class App extends React.Component {
    dragClue;
    state = { tree };

    render() {
        return (
            <div>
                <TreeView data={this.state.tree} draggable={true}
                    onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
                <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
            </div>
        );
    }

    onItemDragOver = (event) => {
        this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
    }
    onItemDragEnd = (event) => {
        this.dragClue.hide();
        const eventAnalyzer = new TreeViewDragAnalyzer(event).init();

        if (eventAnalyzer.isDropAllowed) {
            const updatedTree = moveTreeViewItem(
                event.itemHierarchicalIndex,
                this.state.tree,
                eventAnalyzer.getDropOperation(),
                eventAnalyzer.destinationMeta.itemHierarchicalIndex,
            );

            this.setState({ tree: updatedTree });
        }
    }
    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, this.state.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';
    }
}

function 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 SEPARATOR = '_';
const tree = [{
    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 }]
}];

ReactDOM.render(<App />, document.querySelector('my-app'));

Name	Type	Default	Description
destinationMeta	{ itemHierarchicalIndex: string; treeViewGuid: string; }		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).
isDropAllowed	boolean		Returns true if dropping is allowed. Otherwise, returns false.

Constructors

TreeViewDragAnalyzer

(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent)

Parameters

event

TreeViewItemDragOverEvent | TreeViewItemDragEndEvent

The event that will be analyzed.

Methods

getDropOperation
Returns the specific drop operation.
Returns undefined | "child" | "after" | "before" 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.

init
The method which initializes the analyzer. Invoke the method before you call any other methods.
Returns TreeViewDragAnalyzer The analyzer object of the drag event.