TreeViewDragClue

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 (
        <div>
            <TreeView data={tree} draggable={true}
                onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
            <TreeViewDragClue ref={dragClueRef} />
        </div>
    );
}