@progress/kendo-react-grid 6.1.1 → 7.0.0-develop.1

package/dist/es/drag/ColumnResize.js

@@ -1,234 +0,0 @@
-// offsetWidth() is slowly transition to reporting double instead of integet in all browsers
-// during this process (which is a bit back-and-forth) we need to make sure we are working across all browsers and versions
-var OFFSET_ROUND = 1;
-var LOCK_COLUMN_BUFFER = 20;
-/**
- * @hidden
- */
-var ColumnResize = /** @class */ (function () {
-    function ColumnResize(triggerResize) {
-        var _this = this;
-        // Typings. `col` and `colgroup` do not differ, both represent a `HTMLTableColElement`.
-        // Implemented as `any`.
-        this.columns = [];
-        /**
-         * The settings for resizing the Grid.
-         */
-        this.resizable = false;
-        this.isRtl = false;
-        this.setIsRtl = function (isRtl) {
-            _this.isRtl = isRtl;
-        };
-        this.dragHandler = function (event, column, dragCue, end) {
-            var e = event.originalEvent;
-            if (!end) {
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-            }
-            var thElement = dragCue.closest('th');
-            if (!thElement || !thElement) {
-                return;
-            }
-            var oldWidth = thElement.clientWidth;
-            var newWidth = oldWidth;
-            if (_this.isRtl) {
-                newWidth += (dragCue.getBoundingClientRect().right - (dragCue.offsetWidth / 2)) - event.clientX;
-            }
-            else {
-                newWidth += event.clientX - dragCue.getBoundingClientRect().left - (dragCue.offsetWidth / 2);
-            }
-            if (!end && Math.abs(newWidth - oldWidth) < 1) {
-                return;
-            }
-            _this.fixateInitialWidths(thElement.parentElement.clientWidth);
-            _this.setWidths(column, Math.floor(newWidth) / oldWidth);
-            var index = _this.columns.filter(function (c) { return !c.children.length; }).findIndex(function (c) { return c.id === column.id; });
-            _this.onResize(index, oldWidth, newWidth, e, end, column.id);
-        };
-        this.dblClickHandler = function (event, columnIds) {
-            var columns = _this.columns.filter(function (c) { return columnIds.indexOf(c.id) > -1; });
-            if (!_this.colGroupMain || !columns.length) {
-                return;
-            }
-            var leafsForAdjust = {};
-            var stack = columns;
-            while (stack.length > 0) {
-                var currentCol = stack.pop();
-                if (!currentCol) {
-                    break;
-                }
-                if (currentCol.children.length) {
-                    stack.push.apply(stack, currentCol.children);
-                }
-                else {
-                    leafsForAdjust[currentCol.id] = currentCol;
-                }
-            }
-            var leafs = _this.columns.filter(function (c) { return !c.children.length; });
-            var indexesForAdjust = [];
-            leafs.forEach(function (currentColumn, index) {
-                if (leafsForAdjust[currentColumn.id]) {
-                    indexesForAdjust.push(index);
-                }
-            });
-            var tables = [_this.colGroupMain.parentElement];
-            var colgroups = [_this.colGroupMain];
-            if (_this.colGroupHeader) {
-                tables.push(_this.colGroupHeader.parentElement);
-                colgroups.push(_this.colGroupHeader);
-            }
-            if (_this.colGroupFooter) {
-                tables.push(_this.colGroupFooter.parentElement);
-                colgroups.push(_this.colGroupFooter);
-            }
-            tables.forEach(function (table) { return table.classList.add('k-autofitting'); });
-            var maxWidths = [];
-            colgroups.forEach(function (colgroup) {
-                indexesForAdjust.forEach(function (columnIndex) {
-                    if (colgroup.children[columnIndex]) {
-                        colgroup.children[columnIndex].width = '';
-                        maxWidths[columnIndex] = Math.max(maxWidths[columnIndex] || 0, colgroup.children[columnIndex].offsetWidth + OFFSET_ROUND);
-                    }
-                });
-            });
-            colgroups.forEach(function (colgroup) {
-                indexesForAdjust.forEach(function (columnIndex) {
-                    if (colgroup.children[columnIndex]) {
-                        colgroup.children[columnIndex].width = maxWidths[columnIndex] + 'px';
-                        leafs[columnIndex].width = maxWidths[columnIndex];
-                    }
-                });
-            });
-            tables.forEach(function (table) { return table.classList.remove('k-autofitting'); });
-            _this.onResize(indexesForAdjust[0], 0, 0, event, true, columnIds[0]);
-        };
-        this.updateColElements = function (affectedColumns) {
-            var leafColumns = _this.columns.filter(function (c) { return !c.children.length; });
-            var difference = 1e-10;
-            var _loop_1 = function (i) {
-                var currentColumn = affectedColumns[i];
-                var colIndex = leafColumns.findIndex(function (c) { return c.id === currentColumn.id; });
-                var currentColumnFloatWidth = parseFloat((currentColumn.width || 0).toString());
-                var currentColumnFloorWidth = Math.floor(currentColumnFloatWidth);
-                difference += currentColumnFloatWidth - currentColumnFloorWidth;
-                var currentWidth = currentColumnFloorWidth + Math.floor(difference);
-                difference -= Math.floor(difference);
-                if (_this.colGroupMain && _this.colGroupMain.children[colIndex]) {
-                    var mainWidth = parseInt(_this.colGroupMain.children[colIndex].width, 10);
-                    _this.colGroupMain.children[colIndex].width = currentWidth + 'px';
-                    _this.updateNextLockedCol(_this.colGroupMain.parentElement, currentColumn, mainWidth - currentWidth);
-                }
-                if (_this.colGroupHeader && _this.colGroupHeader.children[colIndex]) {
-                    var headerWidth = parseInt(_this.colGroupHeader.children[colIndex].width, 10);
-                    // static headers
-                    _this.colGroupHeader.children[colIndex].width = currentWidth + 'px';
-                    _this.updateNextLockedCol(_this.colGroupHeader.parentElement, currentColumn, headerWidth - currentWidth);
-                }
-                if (_this.colGroupFooter && _this.colGroupFooter.children[colIndex]) {
-                    var footerWidth = parseInt(_this.colGroupFooter.children[colIndex].width, 10);
-                    // static footers
-                    _this.colGroupFooter.children[colIndex].width = currentWidth + 'px';
-                    _this.updateNextLockedCol(_this.colGroupFooter.parentElement, currentColumn, footerWidth - currentWidth);
-                }
-            };
-            for (var i = 0; i < affectedColumns.length; i++) {
-                _loop_1(i);
-            }
-        };
-        this.onResize = triggerResize;
-    }
-    ColumnResize.prototype.fixateInitialWidths = function (width) {
-        var columns = this.columns.filter(function (c) { return !c.children.length; });
-        var remainingCount = 0;
-        var cols = this.colGroupMain ? this.colGroupMain.children : [];
-        for (var i = 0; i < cols.length; i++) {
-            if (cols[i].width) {
-                width -= parseFloat(cols[i].width);
-            }
-            else {
-                remainingCount++;
-            }
-        }
-        if (remainingCount === 0) {
-            return;
-        }
-        var perCol = Math.floor(width / remainingCount);
-        for (var i = 0; i < cols.length; i++) {
-            var col = cols[i];
-            if (!col.width) {
-                col.width = perCol;
-                columns[i].width = perCol.toString();
-                if (this.colGroupHeader) {
-                    this.colGroupHeader.children[i].width = perCol;
-                }
-                if (this.colGroupFooter) {
-                    this.colGroupFooter.children[i].width = perCol;
-                }
-            }
-        }
-    };
-    ColumnResize.prototype.setWidths = function (column, coef) {
-        var indexInOriginal = this.columns.findIndex(function (c) { return c.id === column.id; });
-        var toAdjust = [];
-        var more = column.children.length;
-        for (var i = indexInOriginal + 1; more > 0 && i < this.columns.length; i++, more--) {
-            var cc = this.columns[i];
-            if (!cc.children.length) {
-                toAdjust.push(cc);
-            }
-            else {
-                more += cc.children.length;
-            }
-        }
-        if (toAdjust.length === 0) {
-            toAdjust.push(column);
-        }
-        toAdjust.forEach(function (colToAdjust) {
-            var targetWidth = colToAdjust.width ? parseFloat(colToAdjust.width.toString()) * coef : 0;
-            var min = colToAdjust.minResizableWidth === undefined ? 10 : colToAdjust.minResizableWidth;
-            if (targetWidth < min) {
-                targetWidth = min;
-            }
-            colToAdjust.width = targetWidth;
-        });
-        this.updateColElements(toAdjust);
-        return toAdjust;
-    };
-    ColumnResize.prototype.updateNextLockedCol = function (element, current, deltaWidth) {
-        var _this = this;
-        var currentIndex = current.index;
-        var gridWrapperEl = this.colGroupMain.parentElement.closest('.k-grid');
-        var maxWidth = gridWrapperEl === null || gridWrapperEl === void 0 ? void 0 : gridWrapperEl.clientWidth;
-        var widthOfLocked = this.columns.filter(function (c) { return c.locked; }).map(function (e) { return parseInt(e.width + '', 10); }).reduce(function (a, b) { return a + b; }, 0);
-        if (!current.locked || maxWidth <= widthOfLocked + LOCK_COLUMN_BUFFER) {
-            return;
-        }
-        this.columns.forEach(function (nColumn) {
-            if ((nColumn === null || nColumn === void 0 ? void 0 : nColumn.locked) && deltaWidth) {
-                var allColumnEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[aria-colindex="' + nColumn.ariaColumnIndex + '"]');
-                allColumnEls === null || allColumnEls === void 0 ? void 0 : allColumnEls.forEach(function (el) {
-                    var currentStyle = el.style;
-                    if (_this.isRtl) {
-                        if (nColumn.index > currentIndex && currentStyle && currentStyle.right) {
-                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
-                        }
-                        if (nColumn.index < currentIndex && currentStyle && currentStyle.left) {
-                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
-                        }
-                    }
-                    else {
-                        if (nColumn.index > currentIndex && currentStyle && currentStyle.left) {
-                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
-                        }
-                        if (nColumn.index < currentIndex && currentStyle && currentStyle.right) {
-                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
-                        }
-                    }
-                });
-            }
-        });
-    };
-    return ColumnResize;
-}());
-export { ColumnResize };

package/dist/es/drag/CommonDragLogic.js

@@ -1,209 +0,0 @@
-import * as React from 'react';
-import { getIndex } from '@progress/kendo-react-data-tools';
-/**
- * @hidden
- */
-var CommonDragLogic = /** @class */ (function () {
-    function CommonDragLogic(columnReorder, groupReorder, columnToGroup) {
-        var _this = this;
-        this.refDragElementClue = React.createRef();
-        this.refDropElementClue = React.createRef();
-        this.columns = [];
-        this.reorderable = false;
-        this.groupable = false;
-        this.startColumn = -1;
-        this.startGroup = -1;
-        this.currentColumn = -1;
-        this.currentGroup = -1;
-        this.groupPanelDivElement = null;
-        this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = (e && e.children) ? e.children[0] : e;
-        };
-        this.pressHandler = function (event, element) {
-            var startColumn = _this.getColumnIndex(event, element);
-            _this.startGroup = _this.getGroupIndex(event);
-            if (startColumn >= 0) {
-                var col = _this.columns[startColumn];
-                if (col.reorderable && _this.reorderable || col.groupable && _this.groupable) {
-                    _this.startColumn = startColumn;
-                }
-            }
-        };
-        this.dragHandler = function (event, element) {
-            if (!event.isTouch) {
-                event.originalEvent.preventDefault();
-            }
-            event.originalEvent.stopPropagation();
-            if (_this.startColumn === -1 && _this.startGroup === -1) {
-                return;
-            }
-            _this.currentColumn = _this.getColumnIndex(event, element);
-            var groupPanelChildren = _this.groupPanelDivElement && _this.groupPanelDivElement.children;
-            _this.currentGroup = _this.isTargetGroupingContainer(event)
-                ? groupPanelChildren && groupPanelChildren.length
-                    ? groupPanelChildren.length
-                    : 0
-                : _this.getGroupIndex(event);
-            var invalidIndex = !_this.isValid();
-            if (invalidIndex) {
-                _this.currentColumn = -1;
-                _this.currentGroup = -1;
-            }
-            var targetElement = (_this.currentColumn >= 0) ?
-                element.children[_this.columns[_this.currentColumn].index] :
-                _this.isTargetGroupingContainer(event)
-                    ? event.originalEvent.target
-                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
-            _this.updateDragElementClue(event, element, targetElement, invalidIndex);
-            _this.updateDropElementClue(event, element, targetElement, invalidIndex);
-        };
-        this.releaseHandler = function (event) {
-            var prevColumnIndex = _this.startColumn;
-            var nextColumnIndex = _this.currentColumn;
-            var prevGroupIndex = _this.startGroup;
-            var nextGroupIndex = _this.currentGroup;
-            event.originalEvent.preventDefault();
-            if (_this.dropElementClue) {
-                _this.dropElementClue.setState({ visible: false });
-            }
-            if (_this.dragElementClue) {
-                _this.dragElementClue.setState({ visible: false });
-            }
-            var isValid = _this.isValid();
-            _this.startColumn = _this.startGroup = _this.currentColumn = _this.currentGroup = -1;
-            if (!isValid) {
-                return;
-            }
-            if (prevColumnIndex >= 0 && nextColumnIndex >= 0) {
-                _this.columnReorder(prevColumnIndex, nextColumnIndex, event.originalEvent);
-            }
-            else if (prevGroupIndex >= 0 && nextGroupIndex >= 0) {
-                _this.groupReorder(prevGroupIndex, nextGroupIndex, event.originalEvent);
-            }
-            else if (prevColumnIndex >= 0 && nextGroupIndex >= 0) {
-                _this.columnToGroup(prevColumnIndex, nextGroupIndex, event.originalEvent);
-            }
-        };
-        this.columnReorder = columnReorder;
-        this.groupReorder = groupReorder;
-        this.columnToGroup = columnToGroup;
-    }
-    Object.defineProperty(CommonDragLogic.prototype, "dragClueRef", {
-        get: function () {
-            return this.refDragElementClue;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CommonDragLogic.prototype, "dropClueRef", {
-        get: function () {
-            return this.refDropElementClue;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CommonDragLogic.prototype, "dragElementClue", {
-        get: function () {
-            return this.refDragElementClue.current;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CommonDragLogic.prototype, "dropElementClue", {
-        get: function () {
-            return this.refDropElementClue.current;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CommonDragLogic.prototype.getColumnIndex = function (event, parent) {
-        if (!parent || (parent.parentElement === this.groupPanelDivElement)) {
-            return -1;
-        }
-        var index = getIndex(event, parent);
-        if (index === -1) {
-            return -1;
-        }
-        var _loop_1 = function (i) {
-            if (parent.parentNode.children[i] === parent) {
-                return { value: this_1.columns.findIndex(function (c) { return ((c.index === index) && (c.depth === i)); }) };
-            }
-        };
-        var this_1 = this;
-        for (var i = 0; i < parent.parentNode.children.length; i++) {
-            var state_1 = _loop_1(i);
-            if (typeof state_1 === "object")
-                return state_1.value;
-        }
-        return -1;
-    };
-    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
-        var target = event.originalEvent.target;
-        return target.className.indexOf
-            ? target.className.indexOf('k-grouping-drop-container') !== -1
-            : false;
-    };
-    CommonDragLogic.prototype.getGroupIndex = function (event) {
-        return getIndex(event, this.groupPanelDivElement);
-    };
-    CommonDragLogic.prototype.isValid = function () {
-        if (this.startGroup >= 0) {
-            // group can be moved into group only
-            return this.currentGroup >= 0 && this.currentGroup !== this.startGroup;
-        }
-        if (this.startColumn === -1) {
-            return false;
-        }
-        if (this.currentGroup >= 0) {
-            // column to group is possible
-            return this.columns[this.startColumn].groupable === true && this.groupable === true;
-        }
-        // reorder is possible
-        return this.reorderable === true &&
-            this.currentColumn >= 0 &&
-            this.currentColumn !== this.startColumn &&
-            this.columns[this.startColumn].reorderable === true &&
-            this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
-    };
-    CommonDragLogic.prototype.updateDragElementClue = function (event, element, targetElement, invalidIndex) {
-        if (!this.dragElementClue) {
-            return;
-        }
-        var innerText = this.startColumn >= 0 ?
-            element.children[this.columns[this.startColumn].index].innerText :
-            element.innerText;
-        this.dragElementClue.setState({
-            visible: true,
-            top: (event.pageY + 10),
-            left: event.pageX,
-            innerText: innerText,
-            status: (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-plus'
-        });
-    };
-    CommonDragLogic.prototype.updateDropElementClue = function (event, element, targetElement, invalidIndex) {
-        if (!this.dropElementClue) {
-            return;
-        }
-        if (invalidIndex || !targetElement) {
-            this.dropElementClue.setState({ visible: false });
-            return;
-        }
-        var rect = targetElement.getBoundingClientRect();
-        var groupElement = targetElement.closest('.k-grouping-header');
-        var rectParent = (groupElement || targetElement).getBoundingClientRect();
-        var left = rect.left + event.pageX - event.clientX - 6;
-        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
-            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
-            left += rect.width;
-        }
-        var top = rectParent.top + event.pageY - event.clientY;
-        this.dropElementClue.setState({
-            visible: true,
-            top: top,
-            left: left,
-            height: (this.currentColumn >= 0) ? element.clientHeight : rectParent.height
-        });
-    };
-    return CommonDragLogic;
-}());
-export { CommonDragLogic };

package/dist/es/drag/GroupingIndicator.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export interface GroupingIndicatorProps {
-    index: number;
-    title: string;
-    dir: 'asc' | 'desc';
-    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onSortChange?: (event: React.MouseEvent<HTMLDivElement>, dir: string) => void;
-    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any) => void;
-    onDrag?: (draggableEvent: any, element: HTMLDivElement) => void;
-    onPress?: (draggableEvent: any, element: HTMLDivElement) => void;
-    onRelease?: (draggableEvent: any) => void;
-}
-/**
- * @hidden
- */
-export declare class GroupingIndicator extends React.Component<GroupingIndicatorProps, {}> {
-    private draggable;
-    /**
-     * @hidden
-     */
-    onPress: (data: any) => void;
-    /**
-     * @hidden
-     */
-    onDrag: (data: any) => void;
-    /**
-     * @hidden
-     */
-    onRelease: (data: any) => void;
-    sortChange: (event: React.MouseEvent<HTMLDivElement>) => void;
-    groupRemove: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
-    render(): JSX.Element;
-}

package/dist/es/drag/GroupingIndicator.js

@@ -1,107 +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 { Draggable, IconWrap } from '@progress/kendo-react-common';
-import { registerForLocalization } from '@progress/kendo-react-intl';
-import { sortAscSmallIcon, sortDescSmallIcon, xCircleIcon } from '@progress/kendo-svg-icons';
-/**
- * @hidden
- */
-var GroupingIndicator = /** @class */ (function (_super) {
-    __extends(GroupingIndicator, _super);
-    function GroupingIndicator() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.draggable = null;
-        /**
-         * @hidden
-         */
-        _this.onPress = function (data) {
-            var element = _this.draggable && _this.draggable.element;
-            if (element && _this.props.onPress) {
-                _this.props.onPress(data.event, element);
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onDrag = function (data) {
-            var element = _this.draggable && _this.draggable.element;
-            if (element && _this.props.onDrag) {
-                _this.props.onDrag(data.event, element);
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onRelease = function (data) {
-            var element = _this.draggable && _this.draggable.element;
-            if (element && _this.props.onRelease) {
-                _this.props.onRelease(data.event);
-            }
-        };
-        _this.sortChange = function (event) {
-            event.preventDefault();
-            if (_this.props.onSortChange) {
-                var sort = (_this.props.dir === 'asc') ? 'desc' : 'asc';
-                _this.props.onSortChange(event, sort);
-            }
-        };
-        _this.groupRemove = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (_this.props.onRemove) {
-                _this.props.onRemove(event);
-            }
-        };
-        _this.onContextMenu = function (event) {
-            var dataItem = {
-                title: _this.props.title,
-                dir: _this.props.dir,
-                index: _this.props.index
-            };
-            if (_this.props.onContextMenu) {
-                _this.props.onContextMenu.call(undefined, event, { dataItem: __assign({}, dataItem) });
-            }
-        };
-        return _this;
-    }
-    GroupingIndicator.prototype.render = function () {
-        var _this = this;
-        var dir = this.props.dir;
-        return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
-            React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, onContextMenu: this.onContextMenu, role: "button", style: { touchAction: 'none' } },
-                React.createElement("span", null,
-                    React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon, size: 'small' })),
-                React.createElement("span", { className: 'k-chip-content' }, this.props.title),
-                React.createElement("span", { className: "k-chip-actions" },
-                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove },
-                        React.createElement(IconWrap, { name: 'x-circle', icon: xCircleIcon, size: 'small' }))))));
-    };
-    return GroupingIndicator;
-}(React.Component));
-export { GroupingIndicator };
-registerForLocalization(GroupingIndicator);