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

package/dist/es/selection/TableSelection.js

@@ -1,155 +0,0 @@
-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 * as ReactDOM from 'react-dom';
-import { Draggable, useDocument } from '@progress/kendo-react-common';
-import { closestTagName, getColumnIndex, getOffset, getRowIndex, getSelectionOptions, relativeContextElement } from './utils';
-import { TABLE_PREVENT_SELECTION_ELEMENT } from './constants';
-/** @hidden */
-export var TableSelection = function (props) {
-    var _a;
-    var onRelease = props.onRelease, childRef = props.childRef;
-    var _b = getSelectionOptions(props.selectable), selectionEnabled = _b.enabled, selectionDrag = _b.drag, selectionMode = _b.mode, selectionCell = _b.cell;
-    var draggableRef = React.useRef(null);
-    var overlayElementRef = React.useRef(null);
-    var dragStartRef = React.useRef({ clientX: 0, clientY: 0 });
-    var _c = React.useState(null), overlaySettings = _c[0], setOverlaySettings = _c[1];
-    var offsetParentRef = React.useRef();
-    var isDraggedRef = React.useRef(false);
-    var isPreventedRef = React.useRef(false);
-    var onPressHandler = React.useCallback(function (eventData) {
-        var event = eventData.event;
-        isPreventedRef.current = event.originalEvent.target.hasAttribute(TABLE_PREVENT_SELECTION_ELEMENT);
-        if (isPreventedRef.current || !draggableRef.current) {
-            return;
-        }
-        offsetParentRef.current = relativeContextElement(draggableRef.current.element);
-        dragStartRef.current = {
-            clientY: event.clientY,
-            clientX: event.clientX
-        };
-    }, []);
-    var onDragHandler = React.useCallback(function (eventData) {
-        var event = eventData.event;
-        var _a = dragStartRef.current, clientX = _a.clientX, clientY = _a.clientY;
-        if (isPreventedRef.current) {
-            return;
-        }
-        if (!selectionDrag || selectionMode === 'single') {
-            return;
-        }
-        if (Math.abs(clientY - event.clientY) > 5 || Math.abs(clientX - event.clientX) > 5) {
-            isDraggedRef.current = true;
-        }
-        if (isDraggedRef.current) {
-            var offset = getOffset(offsetParentRef.current);
-            setOverlaySettings({
-                top: Math.min(clientY, event.clientY) - offset.top,
-                left: Math.min(clientX, event.clientX) - offset.left,
-                width: Math.abs(event.clientX - clientX),
-                height: Math.abs(event.clientY - clientY)
-            });
-        }
-    }, [setOverlaySettings, selectionDrag, selectionMode]);
-    var onReleaseHandler = React.useCallback(function (eventData) {
-        var event = eventData.event;
-        var _a = dragStartRef.current, clientX = _a.clientX, clientY = _a.clientY;
-        if (isPreventedRef.current || !draggableRef.current) {
-            return;
-        }
-        var currentDocument = draggableRef.current.element && draggableRef.current.element.ownerDocument;
-        if (!currentDocument) {
-            return;
-        }
-        if (!isDraggedRef.current) {
-            var startElement = currentDocument.elementFromPoint(clientX, clientY);
-            if (!startElement) {
-                return;
-            }
-            var tdElement = closestTagName(startElement, 'TD');
-            var trElement = closestTagName(startElement, 'TR');
-            var colIndex = getColumnIndex(tdElement);
-            var rowIndex = getRowIndex(trElement);
-            if (tdElement && trElement && rowIndex !== undefined && colIndex !== undefined) {
-                onRelease({
-                    nativeEvent: event.originalEvent,
-                    startRowIndex: rowIndex,
-                    startColIndex: colIndex,
-                    endRowIndex: rowIndex,
-                    endColIndex: colIndex,
-                    altKey: event.altKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    metaKey: event.metaKey,
-                    mode: selectionMode,
-                    cell: selectionCell,
-                    isDrag: false
-                });
-            }
-        }
-        else {
-            var top_1 = Math.min(clientY, event.clientY);
-            var left = Math.min(clientX, event.clientX);
-            var bottom = Math.max(clientY, event.clientY);
-            var right = Math.max(clientX, event.clientX);
-            var overlayElement = overlayElementRef.current;
-            if (!overlayElement) {
-                return;
-            }
-            overlayElement.style.visibility = 'hidden';
-            var startElement = currentDocument.elementFromPoint(left, top_1);
-            var endElement = currentDocument.elementFromPoint(right, bottom);
-            overlayElement.style.visibility = '';
-            if (!startElement || !endElement) {
-                return;
-            }
-            var startTdElement = closestTagName(startElement, 'TD');
-            var startTrElement = closestTagName(startTdElement, 'TR');
-            var endTdElement = closestTagName(endElement, 'TD');
-            var endTrElement = closestTagName(endTdElement, 'TR');
-            var startColIndex = getColumnIndex(startTdElement);
-            var startRowIndex = getRowIndex(startTrElement);
-            var endColIndex = getColumnIndex(endTdElement);
-            var endRowIndex = getRowIndex(endTrElement);
-            if (startColIndex !== undefined &&
-                startRowIndex !== undefined &&
-                endColIndex !== undefined &&
-                endRowIndex !== undefined) {
-                onRelease({
-                    nativeEvent: event.originalEvent,
-                    startRowIndex: startRowIndex,
-                    startColIndex: startColIndex,
-                    endRowIndex: endRowIndex,
-                    endColIndex: endColIndex,
-                    altKey: event.altKey,
-                    shiftKey: event.shiftKey,
-                    ctrlKey: event.ctrlKey,
-                    metaKey: event.metaKey,
-                    mode: selectionMode,
-                    cell: selectionCell,
-                    isDrag: true
-                });
-            }
-        }
-        setOverlaySettings(null);
-        isDraggedRef.current = false;
-        dragStartRef.current = { clientX: 0, clientY: 0 };
-    }, [setOverlaySettings, selectionMode, selectionCell, onRelease]);
-    var getDocument = useDocument(overlayElementRef);
-    if (!selectionEnabled) {
-        return (React.cloneElement(React.Children.only(props.children), { ref: childRef }));
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Draggable, { onPress: onPressHandler, onDrag: onDragHandler, onRelease: onReleaseHandler, ref: draggableRef, childRef: childRef }, props.children),
-        overlaySettings &&
-            ReactDOM.createPortal(React.createElement("div", { ref: overlayElementRef, style: __assign(__assign({}, overlaySettings), { position: 'fixed' }), className: 'k-marquee k-marquee-color' }), (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.body)));
-};

package/dist/es/selection/constants.d.ts

@@ -1,6 +0,0 @@
-/** @hidden */
-export declare const TABLE_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
-/** @hidden */
-export declare const TABLE_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
-/** @hidden */
-export declare const TABLE_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";

package/dist/es/selection/constants.js

@@ -1,6 +0,0 @@
-/** @hidden */
-export var TABLE_ROW_INDEX_ATTRIBUTE = 'data-grid-row-index';
-/** @hidden */
-export var TABLE_COL_INDEX_ATTRIBUTE = 'data-grid-col-index';
-/** @hidden */
-export var TABLE_PREVENT_SELECTION_ELEMENT = 'data-prevent-selection';

package/dist/es/selection/events.js

@@ -1 +0,0 @@
-export {};

package/dist/es/selection/utils.js

@@ -1,237 +0,0 @@
-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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { extendDataItem, getter, Keys, mapTree, hasRelativeStackingContext } from '@progress/kendo-react-common';
-import { TABLE_COL_INDEX_ATTRIBUTE, TABLE_ROW_INDEX_ATTRIBUTE } from './constants';
-var GROUP_SUBITEMS_COLLECTION = 'items';
-var LAST_SELECTION_STATE = {};
-var getCellSelection = function (currentSelection, selectedColumn) {
-    if (!currentSelection || (Array.isArray(currentSelection) && currentSelection.length === 0)) {
-        return [selectedColumn];
-    }
-    else {
-        var foundIndex = currentSelection.findIndex(function (columnIndex) { return columnIndex === selectedColumn; });
-        if (foundIndex > -1) {
-            return currentSelection.filter(function (columnIndex) { return columnIndex !== selectedColumn; });
-        }
-        else {
-            return __spreadArray(__spreadArray([], currentSelection, true), [selectedColumn], false);
-        }
-    }
-};
-/** @hidden */
-export var closestTagName = function (target, tagName) {
-    var currentTarget = target;
-    while (currentTarget) {
-        if (currentTarget.tagName === tagName) {
-            return currentTarget;
-        }
-        else if (currentTarget.tagName === 'TABLE') {
-            return null;
-        }
-        currentTarget = currentTarget.parentElement;
-    }
-    return null;
-};
-/** @hidden */
-export var getRowIndex = function (element) {
-    if (!element) {
-        return;
-    }
-    var rowIndex = element.getAttribute(TABLE_ROW_INDEX_ATTRIBUTE);
-    return rowIndex ? parseInt(rowIndex, 10) : undefined;
-};
-/** @hidden */
-export var getColumnIndex = function (element) {
-    if (!element) {
-        return;
-    }
-    var colIndex = element.getAttribute(TABLE_COL_INDEX_ATTRIBUTE);
-    return colIndex ? parseInt(colIndex, 10) : undefined;
-};
-/**
- * @hidden
- *
- * Apply the selected field to the data items based on the selected state.
- *
- * @param {{data: any, selectedState:  {[id: string]: boolean | number[]}, dataItemKey: string; selectedField: string; subItemsField?: string; }} options
- * @returns {any[]}
- */
-export var setSelectedState = function (options) {
-    var subItemsField = options.subItemsField || GROUP_SUBITEMS_COLLECTION;
-    var idGetter = getter(options.dataItemKey);
-    return mapTree(options.data, subItemsField, function (item) {
-        var _a;
-        return extendDataItem(item, subItemsField, (_a = {},
-            _a[options.selectedField] = options.selectedState[idGetter(item)],
-            _a));
-    });
-};
-/**
- * Get selected state from the component KeyDown event.
- *
- * @param {{event: TableKeyDownEvent, selectedState:  {[id: string]: boolean | number[]}, dataItemKey: string}} options
- * @returns {{[id: string]: boolean | number[]}} - The new selected state.
- */
-export var getSelectedStateFromKeyDown = function (options) {
-    var event = options.event, dataItemKey = options.dataItemKey, selectedState = options.selectedState;
-    var syntheticEvent = event.syntheticEvent, nativeEvent = event.nativeEvent, dataItems = event.dataItems, componentId = event.componentId, mode = event.mode, cell = event.cell, selectedField = event.selectedField;
-    var target = nativeEvent.target, ctrlKey = nativeEvent.ctrlKey, metaKey = nativeEvent.metaKey, altKey = nativeEvent.altKey, shiftKey = nativeEvent.shiftKey;
-    if (syntheticEvent.isDefaultPrevented() || nativeEvent.keyCode !== Keys.enter) {
-        return selectedState;
-    }
-    var tdElement = closestTagName(target, 'TD');
-    var trElement = closestTagName(target, 'TR');
-    var colIndex = getColumnIndex(tdElement);
-    var rowIndex = getRowIndex(trElement);
-    var selectionState = {};
-    if (tdElement && trElement && rowIndex !== undefined && colIndex !== undefined) {
-        selectionState = getSelectedState({
-            selectedState: selectedState,
-            dataItemKey: dataItemKey,
-            event: {
-                ctrlKey: ctrlKey,
-                metaKey: metaKey,
-                altKey: altKey,
-                shiftKey: shiftKey,
-                dataItems: dataItems,
-                cell: cell,
-                mode: mode,
-                selectedField: selectedField,
-                componentId: componentId,
-                startColIndex: colIndex, endColIndex: colIndex, startRowIndex: rowIndex, endRowIndex: rowIndex,
-                isDrag: false,
-                syntheticEvent: syntheticEvent,
-                nativeEvent: nativeEvent,
-                target: event.target,
-                dataItem: null
-            }
-        });
-    }
-    return selectionState;
-};
-/**
- * Get selected state from the component selection event.
- *
- * @param {{event: TableSelectionChangeEvent, selectedState:  {[id: string]: boolean | number[]}, dataItemKey: string}} options
- * @returns {{[id: string]: boolean | number[]}} - The new selected state.
- */
-export var getSelectedState = function (options) {
-    var event = options.event, dataItemKey = options.dataItemKey, prevSelectedState = options.selectedState;
-    var dataItems = event.dataItems, startRowIndex = event.startRowIndex, endRowIndex = event.endRowIndex, startColIndex = event.startColIndex, endColIndex = event.endColIndex, cell = event.cell, isDrag = event.isDrag, ctrlKey = event.ctrlKey, shiftKey = event.shiftKey, metaKey = event.metaKey, componentId = event.componentId, mode = event.mode, dataItem = event.dataItem;
-    var idGetter = getter(dataItemKey);
-    var selectionState = {};
-    var isInputEvent = dataItem !== null;
-    if (mode === 'single') {
-        var currentDataItem = dataItems.slice(startRowIndex, startRowIndex + 1)[0];
-        var itemId = idGetter(currentDataItem);
-        LAST_SELECTION_STATE[componentId] = {
-            rowIndex: startRowIndex,
-            colIndex: startColIndex
-        };
-        selectionState[itemId] = cell ? [startColIndex] : true;
-    }
-    else if (isDrag || (!shiftKey && !ctrlKey && !metaKey && !isInputEvent)) {
-        if (!isDrag) {
-            LAST_SELECTION_STATE[componentId] = {
-                rowIndex: startRowIndex,
-                colIndex: startColIndex
-            };
-        }
-        var selectedColumns_1 = [];
-        for (var i = startColIndex; i <= endColIndex; i++) {
-            selectedColumns_1.push(i);
-        }
-        var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
-        selectedDataItems.forEach(function (currentItem) {
-            var itemId = idGetter(currentItem);
-            selectionState[itemId] = cell ? __spreadArray([], selectedColumns_1, true) : true;
-        });
-    }
-    else {
-        if (ctrlKey || metaKey || isInputEvent) {
-            LAST_SELECTION_STATE[componentId] = {
-                rowIndex: startRowIndex,
-                colIndex: startColIndex
-            };
-            var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
-            var currentDataItem = selectedDataItems[0];
-            var itemId = idGetter(currentDataItem);
-            selectionState = __assign({}, prevSelectedState);
-            selectionState[itemId] = cell && !isInputEvent ? getCellSelection(selectionState[itemId], startColIndex) : !selectionState[itemId];
-        }
-        else if (shiftKey) {
-            var lastRowIndex = (LAST_SELECTION_STATE[componentId] && LAST_SELECTION_STATE[componentId].rowIndex) || 0;
-            var lastColIndex = (LAST_SELECTION_STATE[componentId] && LAST_SELECTION_STATE[componentId].colIndex) || 0;
-            var currentStartRowIndex = Math.min(lastRowIndex, startRowIndex, endRowIndex);
-            var currentEndRowIndex = Math.max(lastRowIndex, startRowIndex, endRowIndex);
-            var currentStarColIndex = Math.min(lastColIndex, startColIndex, endColIndex);
-            var currentEndColIndex = Math.max(lastColIndex, startColIndex, endColIndex);
-            var selectedColumns_2 = [];
-            for (var i = currentStarColIndex; i <= currentEndColIndex; i++) {
-                selectedColumns_2.push(i);
-            }
-            var selectedDataItems = dataItems.slice(currentStartRowIndex, currentEndRowIndex + 1);
-            selectedDataItems.forEach(function (currentItem) {
-                var itemId = idGetter(currentItem);
-                selectionState[itemId] = cell ? __spreadArray([], selectedColumns_2, true) : true;
-            });
-        }
-    }
-    return selectionState;
-};
-/** @hidden */
-var HAS_RELATIVE_STACKING_CONTEXT = hasRelativeStackingContext();
-/** @hidden */
-export var relativeContextElement = function (element) {
-    if (!element || !HAS_RELATIVE_STACKING_CONTEXT) {
-        return null;
-    }
-    var node = element.parentElement;
-    while (node) {
-        if (window.getComputedStyle(node).transform !== 'none') {
-            return node;
-        }
-        node = node.parentElement;
-    }
-};
-/** @hidden */
-export var getOffset = function (offsetParent) {
-    if (offsetParent && offsetParent.ownerDocument) {
-        if (offsetParent !== offsetParent.ownerDocument.body) {
-            var rect = offsetParent.getBoundingClientRect();
-            return {
-                left: rect.left - offsetParent.scrollLeft,
-                top: rect.top - offsetParent.scrollTop
-            };
-        }
-    }
-    return { left: 0, top: 0 };
-};
-/** @hidden */
-export var getSelectionOptions = function (selectable) {
-    var enabled = selectable ?
-        (typeof selectable.enabled === 'boolean' ? selectable.enabled : true) :
-        false;
-    var drag = selectable ? Boolean(selectable.drag) : false;
-    var mode = selectable && selectable.mode ? selectable.mode : 'multiple';
-    var cell = Boolean(selectable && selectable.cell);
-    return { enabled: enabled, drag: drag, mode: mode, cell: cell };
-};

package/dist/es/utils/DataItemWrapper.d.ts

@@ -1,10 +0,0 @@
-/**
- * @hidden
- */
-export interface DataItemWrapper {
-    dataItem: any;
-    level: number[];
-    height: number;
-    offsetTop: number;
-    levelCount: number;
-}

package/dist/es/utils/DataItemWrapper.js

@@ -1 +0,0 @@
-export {};

package/dist/es/utils/data-operations.d.ts

@@ -1,94 +0,0 @@
-import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
-import { DataItemWrapper } from './DataItemWrapper';
-/**
- * Orders the specified tree according to the provided sort descriptors.
- *
- * @param {T[]} data - The data that will be sorted.
- * @param {SortDescriptor[]} descriptors - The descriptors by which the data will be sorted.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {T[]} - The sorted data.
- */
-export declare function orderBy(data: any[], descriptors: SortDescriptor[], subItemsField: string): any[];
-/**
- * Filters the provided data tree according to the specified `Array<FilterDescriptor|CompositeFilterDescriptor>`.
- *
- * @param {T[]} data - The data that will be filtered.
- * @param {FilterDescriptor[]|CompositeFilterDescriptor[]} descriptors - The filter criteria that will be applied.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {T[]} - The filtered data.
- */
-export declare function filterBy(data: any[], descriptors: FilterDescriptor[] | CompositeFilterDescriptor[], subItemsField: string): any[];
-/**
- * @hidden
- */
-export declare function flatData(data: any[], getChildren: (dataItem: any) => any[], itemMap: (item: any) => any): DataItemWrapper[];
-/**
- * Creates a flat data array from the passed tree dataset.
- *
- * @param {object[]} dataset - The source dataset of data items.
- * @param {string} expandField - The field which points to the expanded value of each data item.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {object[]} - A collection of the generated data items that are in a flat structure.
- */
-export declare const treeToFlat: (data: any[], expandField: string, subItemsField: string) => any[];
-/**
- * Creates a tree from the passed dataset.
- *
- * @param {object[]} dataset - The source dataset of data items.
- * @param {(item: object) => any} getId - A function which will return the id of the data item.
- * @param {(item: object) => any} getParentId - A function which will return the data item id of its parent data item.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {object[]} - A collection of the generated data items that are structured in a tree.
- */
-export declare const createDataTree: (dataset: any[], getId: (item: any) => any, getParentId: (item: any) => any, subItemsField: string) => any[];
-/**
- * Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
- *
- * @param {object} item - The source data item.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @param {object} propsToExtend - The props with which the source data item will be extended.
- * @returns {object} - The target data item.
- */
-export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;
-/**
- * Removes the items from the passed `data` which match the passed `condition`.
- *
- * @param {any[]} data - The data tree.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @param {(item: object) => Boolean} condition - A function that will be executed for each data item
- * in the tree data and the items for which returns true will be removed.
- * @returns {any[]} - The new data tree.
- */
-export declare const removeItems: (data: any[], subItemsField: string, condition: (item: any) => boolean) => any[];
-/**
- * Changes the `subItems` collection of each data item which matches the passed `condition`.
- *
- * @param {any[]} data - The data tree.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @param {(item: object) => Boolean} condition - A function that will be executed for each data item and
- * will return `true` for items that have to change the subitems collection.
- * @param {(subItems: object[]) => object[]} change - A function which
- * has as a parameter the subitems collection of the matched items and which will return the new subitems collection.
- * @returns {any[]} - The new data tree.
- */
-export declare const modifySubItems: (data: any[], subItemsField: string, condition: (item: any) => boolean, change: (subItems: any[]) => any[]) => any[];
-/**
- * Returns the data item path in the tree based on the level parameter.
- *
- * @param {any[]} tree - The data tree.
- * @param {number[]} level - The level of the target tree item.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {any[]} - The path of the data item.
- */
-export declare const getItemPath: (tree: any[], level: number[], subItemsField?: string) => any[];
-/**
- * Moves the targeted item in the tree to another position.
- *
- * @param {any[]} data - The data tree.
- * @param {number[]} target - The level of the target tree item which will be moved.
- * @param {number[] | null} destination - The level of the destination tree item where the target item will be moved in.
- * If it is null, the target item will be added at the root level.
- * @param {string} subItemsField - The field which points to the subitems collection of each data item.
- * @returns {any[]} - The new data tree.
- */
-export declare const moveTreeItem: (data: any[], target: number[], destination: number[] | null, subItemsField: string) => any[];