@progress/kendo-react-treeview 6.1.1 → 7.0.0-develop.2

package/dist/es/TreeViewDragAnalyzer.js

@@ -1,186 +0,0 @@
-import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
-var DROPZONE_BOUNDARY_DELTA = 6;
-/**
- * A class which provides an API for analyzing the `drag` events
- * of the TreeView.
- *
- * @example
- * ```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'));
- * ```
- */
-var TreeViewDragAnalyzer = /** @class */ (function () {
-    /**
-     * @param event - The event that will be analyzed.
-     */
-    function TreeViewDragAnalyzer(event) {
-        this.event = event;
-        this.initialized = false;
-        this.destItemId = '';
-        this.destTreeViewGuid = '';
-        this.itemId = event.itemHierarchicalIndex;
-        this.treeViewGuid = event.target.guid;
-    }
-    /**
-     * The method which initializes the analyzer.
-     * Invoke the method before you call any other methods.
-     *
-     * @returns - The analyzer object of the `drag` event.
-     */
-    TreeViewDragAnalyzer.prototype.init = function () {
-        if (!this.initialized) {
-            this.setDestimationMeta(document.elementFromPoint(this.event.clientX, this.event.clientY));
-            this.initialized = true;
-        }
-        return this;
-    };
-    Object.defineProperty(TreeViewDragAnalyzer.prototype, "isDropAllowed", {
-        /**
-         * Returns `true` if dropping is allowed. Otherwise, returns `false`.
-         */
-        get: function () {
-            if (this.initialized && this.destItemId && this.destTreeViewGuid) {
-                // Disallow circular references.
-                return !(("".concat(this.destTreeViewGuid, "_").concat(this.destItemId, "_")).
-                    startsWith("".concat(this.treeViewGuid, "_").concat(this.itemId, "_")));
-            }
-            else {
-                return false;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TreeViewDragAnalyzer.prototype, "destinationMeta", {
-        /**
-         * 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: function () {
-            return { itemHierarchicalIndex: this.destItemId, treeViewGuid: this.destTreeViewGuid };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Returns the specific drop operation.
-     *
-     * @returns - The following values are returned:
-     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
-     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
-     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
-     * * `undefined`&mdash;Indicates that dropping is not allowed.
-     */
-    TreeViewDragAnalyzer.prototype.getDropOperation = function () {
-        if (this.initialized && this.isDropAllowed) {
-            var _a = this.destDomNodeWithMeta.getBoundingClientRect(), top_1 = _a.top, height = _a.height;
-            if (top_1 + height - this.event.clientY < DROPZONE_BOUNDARY_DELTA) {
-                return 'after';
-            }
-            else if (this.event.clientY - top_1 < DROPZONE_BOUNDARY_DELTA) {
-                return 'before';
-            }
-            else {
-                return 'child';
-            }
-        }
-        else {
-            return undefined;
-        }
-    };
-    TreeViewDragAnalyzer.prototype.setDestimationMeta = function (element) {
-        var node = element;
-        while (node && !node[DOM_KENDO_ITEM_ID_FIELD]) {
-            node = node.parentNode;
-        }
-        if (node && node[DOM_KENDO_ITEM_ID_FIELD]) {
-            this.destDomNodeWithMeta = node;
-            this.destItemId = node[DOM_KENDO_ITEM_ID_FIELD];
-            this.destTreeViewGuid = node[DOM_KENDO_TREEVIEW_GUID_FIELD];
-        }
-    };
-    return TreeViewDragAnalyzer;
-}());
-export { TreeViewDragAnalyzer };

package/dist/es/TreeViewDragClue.d.ts

@@ -1,144 +0,0 @@
-import * as React from 'react';
-/**
- * Represents the props of the KendoReact TreeViewDragClue component.
- */
-export interface TreeViewDragClueProps {
-    /**
-     * Sets custom CSS styles to the component.
-     * When specified, the default CSS styles are removed.
-     */
-    style?: React.CSSProperties;
-}
-/**
- * @hidden
- */
-export interface TreeViewDragClueState {
-    visible?: boolean;
-    top?: number;
-    left?: number;
-    text?: string;
-    operationClassName?: string;
-}
-/**
- * Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
- *
- * @example
- * ```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'));
- * ```
- */
-export declare class TreeViewDragClue extends React.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        style: {
-            display: string;
-            position: string;
-            zIndex: number;
-            padding: string;
-        };
-    };
-    /**
-     * @hidden
-     */
-    readonly state: TreeViewDragClueState;
-    /**
-     * @hidden
-     */
-    render(): false | JSX.Element | undefined;
-    /**
-     * Displays the TreeViewDragClue component.
-     *
-     * @param top - The `top` CSS position of the component.
-     * @param left - The `left` CSS position of the component.
-     * @param text - The text of the component.
-     * @param operationClassName - The CSS class name which is related to the specific drop operation.
-     */
-    show(top: number, left: number, text: string, operationClassName: string): void;
-    /**
-     * Hides the TreeViewDragClue component.
-     */
-    hide(): void;
-}

package/dist/es/TreeViewDragClue.js

@@ -1,171 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import { IconWrap, classNames, toIconName } from '@progress/kendo-react-common';
-import { cancelIcon, insertBottomIcon, insertMiddleIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
-/**
- * Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
- *
- * @example
- * ```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'));
- * ```
- */
-var TreeViewDragClue = /** @class */ (function (_super) {
-    __extends(TreeViewDragClue, _super);
-    function TreeViewDragClue() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {
-            visible: false,
-            top: 0,
-            left: 0,
-            text: '',
-            operationClassName: 'cancel'
-        };
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    TreeViewDragClue.prototype.render = function () {
-        var dynamicStyle = { top: this.state.top + 'px', left: this.state.left + 'px' };
-        return this.state.visible && (React.createElement("div", { className: "k-header k-drag-clue", style: __assign(__assign({}, this.props.style), dynamicStyle) },
-            React.createElement(IconWrap, { className: classNames('k-drag-status'), name: this.state.operationClassName && toIconName(this.state.operationClassName), icon: this.state.operationClassName === 'k-i-plus' ? plusIcon
-                    : this.state.operationClassName === 'k-i-insert-up' ? insertTopIcon
-                        : this.state.operationClassName === 'k-i-insert-up' ? insertBottomIcon
-                            : this.state.operationClassName === 'k-i-insert-middle' ? insertMiddleIcon
-                                : cancelIcon }),
-            this.state.text));
-    };
-    /**
-     * Displays the TreeViewDragClue component.
-     *
-     * @param top - The `top` CSS position of the component.
-     * @param left - The `left` CSS position of the component.
-     * @param text - The text of the component.
-     * @param operationClassName - The CSS class name which is related to the specific drop operation.
-     */
-    TreeViewDragClue.prototype.show = function (top, left, text, operationClassName) {
-        this.setState({ visible: true, top: top, left: left, text: text, operationClassName: operationClassName });
-    };
-    /**
-     * Hides the TreeViewDragClue component.
-     */
-    TreeViewDragClue.prototype.hide = function () {
-        this.setState({ visible: false });
-    };
-    /**
-     * @hidden
-     */
-    TreeViewDragClue.defaultProps = { style: { display: 'block', position: 'absolute', zIndex: 20000, padding: '4px 6px' } };
-    return TreeViewDragClue;
-}(React.PureComponent));
-export { TreeViewDragClue };

package/dist/es/TreeViewItem.d.ts

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { TreeFieldsService } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export declare const TreeViewItemPropsContext: React.Context<(props: TreeViewItemProps) => TreeViewItemProps>;
-/**
- * @hidden
- */
-export interface TreeViewItemProps {
-    item: any;
-    itemId: string;
-    treeGuid: string;
-    animate: boolean;
-    focusedItemId?: string;
-    tabbableItemId: string;
-    fieldsService: TreeFieldsService;
-    itemUI?: React.ComponentType<{
-        item: any;
-        itemHierarchicalIndex: string;
-    }>;
-    ariaMultiSelectable: boolean;
-    onItemClick: any;
-    expandIcons?: boolean;
-    onExpandChange: any;
-    onCheckChange: any;
-    checkboxes?: boolean;
-    onFocusDomElNeeded: any;
-    draggable?: boolean;
-    onPress: any;
-    onDrag: any;
-    onRelease: any;
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * @hidden
-     *
-     * Internal usage!!!
-     */
-    position?: 'top' | 'mid' | 'bot';
-    /**
-     * Currently for internal usage only! Replicates the current behavior which disables all children
-     * if the parent is disabled, which was previously achieved only though the kendo-themes,
-     * but due to rendering changes had to be replicated programmatically!
-     *
-     * @hidden
-     */
-    disabled?: boolean;
-    /**
-     * @hidden
-     */
-    isRtl?: boolean;
-    /**
-     * @hidden
-     */
-    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any, itemId: string) => void;
-}
-/**
- * @hidden
- */
-declare class TreeViewItemWithoutContext extends React.Component<TreeViewItemProps> {
-    private itemElement;
-    private checkboxElement;
-    private itemGuid;
-    static defaultProps: {
-        position: string;
-    };
-    render(): JSX.Element;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: TreeViewItemProps): void;
-    private renderCheckbox;
-    private renderExpandIcon;
-    private renderSubitemsIfApplicable;
-    private renderItemInPart;
-    private onCheckChange;
-    private onExpandChange;
-    private onItemClick;
-    private onPress;
-    private onDrag;
-    private onRelease;
-    private onContextMenu;
-    private get fieldsSvc();
-    private get itemId();
-    private get item();
-    private get tabIndex();
-    private get ariaExpanded();
-    private get disabled();
-    private get ariaChecked();
-    private get ariaSelected();
-    private getIconProps;
-    private assignDraggableMeta;
-}
-/**
- * @hidden
- */
-export declare const TreeViewItem: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<TreeViewItemWithoutContext>>;
-export {};