1246 lines
51 KiB
TypeScript
1246 lines
51 KiB
TypeScript
// @ts-nocheck
|
|
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
|
|
import { timeOut, animationFrame } from '@polymer/polymer/lib/utils/async.js';
|
|
import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
|
|
import { isFocusable } from '@vaadin/grid/src/vaadin-grid-active-item-mixin.js';
|
|
import { GridFlowSelectionColumn } from "./vaadin-grid-flow-selection-column.js";
|
|
|
|
(function () {
|
|
const tryCatchWrapper = function (callback) {
|
|
return window.Vaadin.Flow.tryCatchWrapper(callback, 'Vaadin Grid');
|
|
};
|
|
|
|
window.Vaadin.Flow.gridConnector = {
|
|
initLazy: (grid) =>
|
|
tryCatchWrapper(function (grid) {
|
|
// Check whether the connector was already initialized for the grid
|
|
if (grid.$connector) {
|
|
return;
|
|
}
|
|
|
|
const dataProviderController = grid._dataProviderController;
|
|
|
|
dataProviderController.ensureFlatIndexHierarchyOriginal = dataProviderController.ensureFlatIndexHierarchy;
|
|
dataProviderController.ensureFlatIndexHierarchy = tryCatchWrapper(function (flatIndex) {
|
|
const { item } = this.getFlatIndexContext(flatIndex);
|
|
if (!item || !this.isExpanded(item)) {
|
|
return;
|
|
}
|
|
|
|
const isCached = grid.$connector.hasCacheForParentKey(grid.getItemId(item));
|
|
if (isCached) {
|
|
// The sub-cache items are already in the connector's cache. Skip the debouncing process.
|
|
this.ensureFlatIndexHierarchyOriginal(flatIndex);
|
|
} else {
|
|
grid.$connector.beforeEnsureFlatIndexHierarchy(flatIndex, item);
|
|
}
|
|
});
|
|
|
|
dataProviderController.isLoadingOriginal = dataProviderController.isLoading;
|
|
dataProviderController.isLoading = tryCatchWrapper(function () {
|
|
return grid.$connector.hasEnsureSubCacheQueue() || this.isLoadingOriginal();
|
|
});
|
|
|
|
const rootPageCallbacks = {};
|
|
const treePageCallbacks = {};
|
|
const cache = {};
|
|
|
|
/* parentRequestDelay - optimizes parent requests by batching several requests
|
|
* into one request. Delay in milliseconds. Disable by setting to 0.
|
|
* parentRequestBatchMaxSize - maximum size of the batch.
|
|
*/
|
|
const parentRequestDelay = 50;
|
|
const parentRequestBatchMaxSize = 20;
|
|
|
|
let parentRequestQueue = [];
|
|
let parentRequestDebouncer;
|
|
let ensureSubCacheQueue = [];
|
|
let ensureSubCacheDebouncer;
|
|
|
|
const rootRequestDelay = 150;
|
|
let rootRequestDebouncer;
|
|
|
|
let lastRequestedRanges = {};
|
|
const root = 'null';
|
|
lastRequestedRanges[root] = [0, 0];
|
|
|
|
let currentUpdateClearRange = null;
|
|
let currentUpdateSetRange = null;
|
|
|
|
const validSelectionModes = ['SINGLE', 'NONE', 'MULTI'];
|
|
let selectedKeys = {};
|
|
let selectionMode = 'SINGLE';
|
|
|
|
let sorterDirectionsSetFromServer = false;
|
|
|
|
grid.size = 0; // To avoid NaN here and there before we get proper data
|
|
grid.itemIdPath = 'key';
|
|
|
|
function createEmptyItemFromKey(key) {
|
|
return { [grid.itemIdPath]: key };
|
|
}
|
|
|
|
grid.$connector = {};
|
|
|
|
grid.$connector.hasCacheForParentKey = tryCatchWrapper((parentKey) => cache[parentKey]?.size !== undefined);
|
|
|
|
grid.$connector.hasEnsureSubCacheQueue = tryCatchWrapper(() => ensureSubCacheQueue.length > 0);
|
|
|
|
grid.$connector.hasParentRequestQueue = tryCatchWrapper(() => parentRequestQueue.length > 0);
|
|
|
|
grid.$connector.hasRootRequestQueue = tryCatchWrapper(() => {
|
|
return Object.keys(rootPageCallbacks).length > 0 || !!rootRequestDebouncer?.isActive();
|
|
});
|
|
|
|
grid.$connector.beforeEnsureFlatIndexHierarchy = tryCatchWrapper(function (flatIndex, item) {
|
|
// add call to queue
|
|
ensureSubCacheQueue.push({
|
|
flatIndex,
|
|
itemkey: grid.getItemId(item)
|
|
});
|
|
|
|
ensureSubCacheDebouncer = Debouncer.debounce(ensureSubCacheDebouncer, animationFrame, () => {
|
|
while (ensureSubCacheQueue.length) {
|
|
grid.$connector.flushEnsureSubCache();
|
|
}
|
|
});
|
|
});
|
|
|
|
grid.$connector.doSelection = tryCatchWrapper(function (items, userOriginated) {
|
|
if (selectionMode === 'NONE' || !items.length || (userOriginated && grid.hasAttribute('disabled'))) {
|
|
return;
|
|
}
|
|
if (selectionMode === 'SINGLE') {
|
|
selectedKeys = {};
|
|
}
|
|
|
|
items.forEach((item) => {
|
|
if (item) {
|
|
selectedKeys[item.key] = item;
|
|
item.selected = true;
|
|
if (userOriginated) {
|
|
grid.$server.select(item.key);
|
|
}
|
|
}
|
|
|
|
// FYI: In single selection mode, the server can send items = [null]
|
|
// which means a "Deselect All" command.
|
|
const isSelectedItemDifferentOrNull = !grid.activeItem || !item || item.key != grid.activeItem.key;
|
|
if (!userOriginated && selectionMode === 'SINGLE' && isSelectedItemDifferentOrNull) {
|
|
grid.activeItem = item;
|
|
}
|
|
});
|
|
|
|
grid.selectedItems = Object.values(selectedKeys);
|
|
});
|
|
|
|
grid.$connector.doDeselection = tryCatchWrapper(function (items, userOriginated) {
|
|
if (selectionMode === 'NONE' || !items.length || (userOriginated && grid.hasAttribute('disabled'))) {
|
|
return;
|
|
}
|
|
|
|
const updatedSelectedItems = grid.selectedItems.slice();
|
|
while (items.length) {
|
|
const itemToDeselect = items.shift();
|
|
for (let i = 0; i < updatedSelectedItems.length; i++) {
|
|
const selectedItem = updatedSelectedItems[i];
|
|
if (itemToDeselect?.key === selectedItem.key) {
|
|
updatedSelectedItems.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
if (itemToDeselect) {
|
|
delete selectedKeys[itemToDeselect.key];
|
|
delete itemToDeselect.selected;
|
|
if (userOriginated) {
|
|
grid.$server.deselect(itemToDeselect.key);
|
|
}
|
|
}
|
|
}
|
|
grid.selectedItems = updatedSelectedItems;
|
|
});
|
|
|
|
grid.__activeItemChanged = tryCatchWrapper(function (newVal, oldVal) {
|
|
if (selectionMode != 'SINGLE') {
|
|
return;
|
|
}
|
|
if (!newVal) {
|
|
if (oldVal && selectedKeys[oldVal.key]) {
|
|
if (grid.__deselectDisallowed) {
|
|
grid.activeItem = oldVal;
|
|
} else {
|
|
grid.$connector.doDeselection([oldVal], true);
|
|
}
|
|
}
|
|
} else if (!selectedKeys[newVal.key]) {
|
|
grid.$connector.doSelection([newVal], true);
|
|
}
|
|
});
|
|
grid._createPropertyObserver('activeItem', '__activeItemChanged', true);
|
|
|
|
grid.__activeItemChangedDetails = tryCatchWrapper(function (newVal, oldVal) {
|
|
if (grid.__disallowDetailsOnClick) {
|
|
return;
|
|
}
|
|
// when grid is attached, newVal is not set and oldVal is undefined
|
|
// do nothing
|
|
if (newVal == null && oldVal === undefined) {
|
|
return;
|
|
}
|
|
if (newVal && !newVal.detailsOpened) {
|
|
grid.$server.setDetailsVisible(newVal.key);
|
|
} else {
|
|
grid.$server.setDetailsVisible(null);
|
|
}
|
|
});
|
|
grid._createPropertyObserver('activeItem', '__activeItemChangedDetails', true);
|
|
|
|
grid.$connector._getSameLevelPage = tryCatchWrapper(function (parentKey, currentCache, currentCacheItemIndex) {
|
|
const currentParentKey = currentCache.parentItem ? grid.getItemId(currentCache.parentItem) : root;
|
|
if (currentParentKey === parentKey) {
|
|
// Level match found, return the page number.
|
|
return Math.floor(currentCacheItemIndex / grid.pageSize);
|
|
}
|
|
const { parentCache, parentCacheIndex } = currentCache;
|
|
if (!parentCache) {
|
|
// There is no parent cache to match level
|
|
return null;
|
|
}
|
|
// Traverse the tree upwards until a match is found or the end is reached
|
|
return this._getSameLevelPage(parentKey, parentCache, parentCacheIndex);
|
|
});
|
|
|
|
grid.$connector.flushEnsureSubCache = tryCatchWrapper(function () {
|
|
const pendingFetch = ensureSubCacheQueue.shift();
|
|
if (pendingFetch) {
|
|
dataProviderController.ensureFlatIndexHierarchyOriginal(pendingFetch.flatIndex);
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
grid.$connector.debounceRootRequest = tryCatchWrapper(function (page) {
|
|
const delay = grid._hasData ? rootRequestDelay : 0;
|
|
|
|
rootRequestDebouncer = Debouncer.debounce(rootRequestDebouncer, timeOut.after(delay), () => {
|
|
grid.$connector.fetchPage(
|
|
(firstIndex, size) => grid.$server.setRequestedRange(firstIndex, size),
|
|
page,
|
|
root
|
|
);
|
|
});
|
|
});
|
|
|
|
grid.$connector.flushParentRequests = tryCatchWrapper(function () {
|
|
const pendingFetches = [];
|
|
|
|
parentRequestQueue.splice(0, parentRequestBatchMaxSize).forEach(({ parentKey, page }) => {
|
|
grid.$connector.fetchPage(
|
|
(firstIndex, size) => pendingFetches.push({ parentKey, firstIndex, size }),
|
|
page,
|
|
parentKey
|
|
);
|
|
});
|
|
|
|
if (pendingFetches.length) {
|
|
grid.$server.setParentRequestedRanges(pendingFetches);
|
|
}
|
|
});
|
|
|
|
grid.$connector.debounceParentRequest = tryCatchWrapper(function (parentKey, page) {
|
|
// Remove any pending requests for the same parentKey.
|
|
parentRequestQueue = parentRequestQueue.filter((request) => request.parentKey !== parentKey);
|
|
// Add the new request to the queue.
|
|
parentRequestQueue.push({ parentKey, page });
|
|
// Debounce the request to avoid sending multiple requests for the same parentKey.
|
|
parentRequestDebouncer = Debouncer.debounce(parentRequestDebouncer, timeOut.after(parentRequestDelay), () => {
|
|
while (parentRequestQueue.length) {
|
|
grid.$connector.flushParentRequests();
|
|
}
|
|
});
|
|
});
|
|
|
|
grid.$connector.fetchPage = tryCatchWrapper(function (fetch, page, parentKey) {
|
|
// Adjust the requested page to be within the valid range in case
|
|
// the grid size has changed while fetchPage was debounced.
|
|
if (parentKey === root) {
|
|
page = Math.min(page, Math.floor((grid.size - 1) / grid.pageSize));
|
|
}
|
|
|
|
// Determine what to fetch based on scroll position and not only
|
|
// what grid asked for
|
|
const visibleRows = grid._getRenderedRows();
|
|
let start = visibleRows.length > 0 ? visibleRows[0].index : 0;
|
|
let end = visibleRows.length > 0 ? visibleRows[visibleRows.length - 1].index : 0;
|
|
|
|
// The buffer size could be multiplied by some constant defined by the user,
|
|
// if he needs to reduce the number of items sent to the Grid to improve performance
|
|
// or to increase it to make Grid smoother when scrolling
|
|
let buffer = end - start;
|
|
let firstNeededIndex = Math.max(0, start - buffer);
|
|
let lastNeededIndex = Math.min(end + buffer, grid._flatSize);
|
|
|
|
let pageRange = [null, null];
|
|
for (let idx = firstNeededIndex; idx <= lastNeededIndex; idx++) {
|
|
const { cache, index } = dataProviderController.getFlatIndexContext(idx);
|
|
// Try to match level by going up in hierarchy. The page range should include
|
|
// pages that contain either of the following:
|
|
// - visible items of the current cache
|
|
// - same level parents of visible descendant items
|
|
// If the parent items are not considered, Flow would remove the hidden parent
|
|
// items from the current level cache. This can lead to an infinite loop when using
|
|
// scrollToIndex feature.
|
|
const sameLevelPage = grid.$connector._getSameLevelPage(parentKey, cache, index);
|
|
if (sameLevelPage === null) {
|
|
continue;
|
|
}
|
|
pageRange[0] = Math.min(pageRange[0] ?? sameLevelPage, sameLevelPage);
|
|
pageRange[1] = Math.max(pageRange[1] ?? sameLevelPage, sameLevelPage);
|
|
}
|
|
|
|
// When the viewport doesn't contain the requested page or it doesn't contain any items from
|
|
// the requested level at all, it means that the scroll position has changed while fetchPage
|
|
// was debounced. For example, it can happen if the user scrolls the grid to the bottom and
|
|
// then immediately back to the top. In this case, the request for the last page will be left
|
|
// hanging. To avoid this, as a workaround, we reset the range to only include the requested page
|
|
// to make sure all hanging requests are resolved. After that, the grid requests the first page
|
|
// or whatever in the viewport again.
|
|
if (pageRange.some((p) => p === null) || page < pageRange[0] || page > pageRange[1]) {
|
|
pageRange = [page, page];
|
|
}
|
|
|
|
let lastRequestedRange = lastRequestedRanges[parentKey] || [-1, -1];
|
|
if (lastRequestedRange[0] != pageRange[0] || lastRequestedRange[1] != pageRange[1]) {
|
|
lastRequestedRanges[parentKey] = pageRange;
|
|
let pageCount = pageRange[1] - pageRange[0] + 1;
|
|
fetch(pageRange[0] * grid.pageSize, pageCount * grid.pageSize);
|
|
}
|
|
});
|
|
|
|
grid.dataProvider = tryCatchWrapper(function (params, callback) {
|
|
if (params.pageSize != grid.pageSize) {
|
|
throw 'Invalid pageSize';
|
|
}
|
|
|
|
let page = params.page;
|
|
|
|
if (params.parentItem) {
|
|
let parentUniqueKey = grid.getItemId(params.parentItem);
|
|
if (!treePageCallbacks[parentUniqueKey]) {
|
|
treePageCallbacks[parentUniqueKey] = {};
|
|
}
|
|
|
|
const parentItemContext = dataProviderController.getItemContext(params.parentItem);
|
|
if (cache[parentUniqueKey]?.[page] && parentItemContext.subCache) {
|
|
// workaround: sometimes grid-element gives page index that overflows
|
|
page = Math.min(page, Math.floor(cache[parentUniqueKey].size / grid.pageSize));
|
|
|
|
// Ensure grid isn't in loading state when the callback executes
|
|
ensureSubCacheQueue = [];
|
|
// Resolve the callback from cache
|
|
callback(cache[parentUniqueKey][page], cache[parentUniqueKey].size);
|
|
} else {
|
|
treePageCallbacks[parentUniqueKey][page] = callback;
|
|
|
|
grid.$connector.debounceParentRequest(parentUniqueKey, page);
|
|
}
|
|
} else {
|
|
// workaround: sometimes grid-element gives page index that overflows
|
|
page = Math.min(page, Math.floor(grid.size / grid.pageSize));
|
|
|
|
// size is controlled by the server (data communicator), so if the
|
|
// size is zero, we know that there is no data to fetch.
|
|
// This also prevents an empty grid getting stuck in a loading state.
|
|
// The connector does not cache empty pages, so if the grid requests
|
|
// data again, there would be no cache entry, causing a request to
|
|
// the server. However, the data communicator will never respond,
|
|
// as it assumes that the data is already cached.
|
|
if (grid.size === 0) {
|
|
callback([], 0);
|
|
return;
|
|
}
|
|
|
|
if (cache[root]?.[page]) {
|
|
callback(cache[root][page]);
|
|
} else {
|
|
rootPageCallbacks[page] = callback;
|
|
|
|
grid.$connector.debounceRootRequest(page);
|
|
}
|
|
}
|
|
});
|
|
|
|
grid.$connector.setSorterDirections = tryCatchWrapper(function (directions) {
|
|
sorterDirectionsSetFromServer = true;
|
|
setTimeout(
|
|
tryCatchWrapper(() => {
|
|
try {
|
|
const sorters = Array.from(grid.querySelectorAll('vaadin-grid-sorter'));
|
|
|
|
// Sorters for hidden columns are removed from DOM but stored in the web component.
|
|
// We need to ensure that all the sorters are reset when using `grid.sort(null)`.
|
|
grid._sorters.forEach((sorter) => {
|
|
if (!sorters.includes(sorter)) {
|
|
sorters.push(sorter);
|
|
}
|
|
});
|
|
|
|
sorters.forEach((sorter) => {
|
|
sorter.direction = null;
|
|
});
|
|
|
|
// Apply directions in correct order, depending on configured multi-sort priority.
|
|
// For the default "prepend" mode, directions need to be applied in reverse, in
|
|
// order for the sort indicators to match the order on the server. For "append"
|
|
// just keep the order passed from the server.
|
|
if (grid.multiSortPriority !== 'append') {
|
|
directions = directions.reverse();
|
|
}
|
|
directions.forEach(({ column, direction }) => {
|
|
sorters.forEach((sorter) => {
|
|
if (sorter.getAttribute('path') === column) {
|
|
sorter.direction = direction;
|
|
}
|
|
});
|
|
});
|
|
} finally {
|
|
sorterDirectionsSetFromServer = false;
|
|
}
|
|
})
|
|
);
|
|
});
|
|
|
|
grid._updateItem = tryCatchWrapper(function (row, item) {
|
|
Grid.prototype._updateItem.call(grid, row, item);
|
|
|
|
// There might be inactive component renderers on hidden rows that still refer to the
|
|
// same component instance as one of the renderers on a visible row. Making the
|
|
// inactive/hidden renderer attach the component might steal it from a visible/active one.
|
|
if (!row.hidden) {
|
|
// make sure that component renderers are updated
|
|
Array.from(row.children).forEach((cell) => {
|
|
Array.from(cell?._content?.__templateInstance?.children || []).forEach((content) => {
|
|
if (content._attachRenderedComponentIfAble) {
|
|
content._attachRenderedComponentIfAble();
|
|
}
|
|
// In hierarchy column of tree grid, the component renderer is inside its content,
|
|
// this updates it renderer from innerContent
|
|
Array.from(content?.children || []).forEach((innerContent) => {
|
|
if (innerContent._attachRenderedComponentIfAble) {
|
|
innerContent._attachRenderedComponentIfAble();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
// since no row can be selected when selection mode is NONE
|
|
// if selectionMode is set to NONE, remove aria-selected attribute from the row
|
|
if (selectionMode === validSelectionModes[1]) {
|
|
// selectionMode === NONE
|
|
row.removeAttribute('aria-selected');
|
|
Array.from(row.children).forEach((cell) => cell.removeAttribute('aria-selected'));
|
|
}
|
|
});
|
|
|
|
const itemExpandedChanged = tryCatchWrapper(function (item, expanded) {
|
|
// method available only for the TreeGrid server-side component
|
|
if (item == undefined || grid.$server.updateExpandedState == undefined) {
|
|
return;
|
|
}
|
|
let parentKey = grid.getItemId(item);
|
|
grid.$server.updateExpandedState(parentKey, expanded);
|
|
});
|
|
|
|
// Patch grid.expandItem and grid.collapseItem to have
|
|
// itemExpandedChanged run when either happens.
|
|
grid.expandItem = tryCatchWrapper(function (item) {
|
|
itemExpandedChanged(item, true);
|
|
Grid.prototype.expandItem.call(grid, item);
|
|
});
|
|
|
|
grid.collapseItem = tryCatchWrapper(function (item) {
|
|
itemExpandedChanged(item, false);
|
|
Grid.prototype.collapseItem.call(grid, item);
|
|
});
|
|
|
|
const itemsUpdated = function (items) {
|
|
if (!items || !Array.isArray(items)) {
|
|
throw 'Attempted to call itemsUpdated with an invalid value: ' + JSON.stringify(items);
|
|
}
|
|
let detailsOpenedItems = Array.from(grid.detailsOpenedItems);
|
|
let updatedSelectedItem = false;
|
|
for (let i = 0; i < items.length; ++i) {
|
|
const item = items[i];
|
|
if (!item) {
|
|
continue;
|
|
}
|
|
if (item.detailsOpened) {
|
|
if (grid._getItemIndexInArray(item, detailsOpenedItems) < 0) {
|
|
detailsOpenedItems.push(item);
|
|
}
|
|
} else if (grid._getItemIndexInArray(item, detailsOpenedItems) >= 0) {
|
|
detailsOpenedItems.splice(grid._getItemIndexInArray(item, detailsOpenedItems), 1);
|
|
}
|
|
if (selectedKeys[item.key]) {
|
|
selectedKeys[item.key] = item;
|
|
item.selected = true;
|
|
updatedSelectedItem = true;
|
|
}
|
|
}
|
|
grid.detailsOpenedItems = detailsOpenedItems;
|
|
if (updatedSelectedItem) {
|
|
// Replace the objects in the grid.selectedItems array without replacing the array
|
|
// itself in order to avoid an unnecessary re-render of the grid.
|
|
grid.selectedItems.splice(0, grid.selectedItems.length, ...Object.values(selectedKeys));
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Updates the cache for the given page for grid or tree-grid.
|
|
*
|
|
* @param page index of the page to update
|
|
* @param parentKey the key of the parent item for the page
|
|
* @returns an array of the updated items for the page, or undefined if no items were cached for the page
|
|
*/
|
|
const updateGridCache = function (page, parentKey) {
|
|
let items;
|
|
if ((parentKey || root) !== root) {
|
|
items = cache[parentKey][page];
|
|
const parentItem = createEmptyItemFromKey(parentKey);
|
|
const parentItemContext = dataProviderController.getItemContext(parentItem);
|
|
if (parentItemContext && parentItemContext.subCache) {
|
|
const callbacksForParentKey = treePageCallbacks[parentKey];
|
|
const callback = callbacksForParentKey && callbacksForParentKey[page];
|
|
_updateGridCache(page, items, callback, parentItemContext.subCache);
|
|
}
|
|
} else {
|
|
items = cache[root][page];
|
|
_updateGridCache(page, items, rootPageCallbacks[page], dataProviderController.rootCache);
|
|
}
|
|
return items;
|
|
};
|
|
|
|
const _updateGridCache = function (page, items, callback, levelcache) {
|
|
// Force update unless there's a callback waiting
|
|
if (!callback) {
|
|
let rangeStart = page * grid.pageSize;
|
|
let rangeEnd = rangeStart + grid.pageSize;
|
|
if (!items) {
|
|
if (levelcache && levelcache.items) {
|
|
for (let idx = rangeStart; idx < rangeEnd; idx++) {
|
|
delete levelcache.items[idx];
|
|
}
|
|
}
|
|
} else {
|
|
if (levelcache && levelcache.items) {
|
|
for (let idx = rangeStart; idx < rangeEnd; idx++) {
|
|
if (levelcache.items[idx]) {
|
|
levelcache.items[idx] = items[idx - rangeStart];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Updates all visible grid rows in DOM.
|
|
*/
|
|
const updateAllGridRowsInDomBasedOnCache = function () {
|
|
updateGridFlatSize();
|
|
grid.__updateVisibleRows();
|
|
};
|
|
|
|
/**
|
|
* Updates the <vaadin-grid>'s internal cache size and flat size.
|
|
*/
|
|
const updateGridFlatSize = function () {
|
|
dataProviderController.recalculateFlatSize();
|
|
grid._flatSize = dataProviderController.flatSize;
|
|
};
|
|
|
|
/**
|
|
* Update the given items in DOM if currently visible.
|
|
*
|
|
* @param array items the items to update in DOM
|
|
*/
|
|
const updateGridItemsInDomBasedOnCache = function (items) {
|
|
if (!items || !grid.$ || grid.$.items.childElementCount === 0) {
|
|
return;
|
|
}
|
|
|
|
const itemKeys = items.map((item) => item.key);
|
|
const indexes = grid
|
|
._getRenderedRows()
|
|
.filter((row) => row._item && itemKeys.includes(row._item.key))
|
|
.map((row) => row.index);
|
|
if (indexes.length > 0) {
|
|
grid.__updateVisibleRows(indexes[0], indexes[indexes.length - 1]);
|
|
}
|
|
};
|
|
|
|
grid.$connector.set = tryCatchWrapper(function (index, items, parentKey) {
|
|
if (index % grid.pageSize != 0) {
|
|
throw 'Got new data to index ' + index + ' which is not aligned with the page size of ' + grid.pageSize;
|
|
}
|
|
let pkey = parentKey || root;
|
|
|
|
const firstPage = index / grid.pageSize;
|
|
const updatedPageCount = Math.ceil(items.length / grid.pageSize);
|
|
|
|
// For root cache, remember the range of pages that were set during an update
|
|
if (pkey === root) {
|
|
currentUpdateSetRange = [firstPage, firstPage + updatedPageCount - 1];
|
|
}
|
|
|
|
for (let i = 0; i < updatedPageCount; i++) {
|
|
let page = firstPage + i;
|
|
let slice = items.slice(i * grid.pageSize, (i + 1) * grid.pageSize);
|
|
if (!cache[pkey]) {
|
|
cache[pkey] = {};
|
|
}
|
|
cache[pkey][page] = slice;
|
|
|
|
grid.$connector.doSelection(slice.filter((item) => item.selected));
|
|
grid.$connector.doDeselection(slice.filter((item) => !item.selected && selectedKeys[item.key]));
|
|
|
|
const updatedItems = updateGridCache(page, pkey);
|
|
if (updatedItems) {
|
|
itemsUpdated(updatedItems);
|
|
updateGridItemsInDomBasedOnCache(updatedItems);
|
|
}
|
|
}
|
|
});
|
|
|
|
const itemToCacheLocation = function (item) {
|
|
let parent = item.parentUniqueKey || root;
|
|
if (cache[parent]) {
|
|
for (let page in cache[parent]) {
|
|
for (let index in cache[parent][page]) {
|
|
if (grid.getItemId(cache[parent][page][index]) === grid.getItemId(item)) {
|
|
return { page: page, index: index, parentKey: parent };
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Updates the given items for a hierarchical grid.
|
|
*
|
|
* @param updatedItems the updated items array
|
|
*/
|
|
grid.$connector.updateHierarchicalData = tryCatchWrapper(function (updatedItems) {
|
|
let pagesToUpdate = [];
|
|
// locate and update the items in cache
|
|
// find pages that need updating
|
|
for (let i = 0; i < updatedItems.length; i++) {
|
|
let cacheLocation = itemToCacheLocation(updatedItems[i]);
|
|
if (cacheLocation) {
|
|
cache[cacheLocation.parentKey][cacheLocation.page][cacheLocation.index] = updatedItems[i];
|
|
let key = cacheLocation.parentKey + ':' + cacheLocation.page;
|
|
if (!pagesToUpdate[key]) {
|
|
pagesToUpdate[key] = {
|
|
parentKey: cacheLocation.parentKey,
|
|
page: cacheLocation.page
|
|
};
|
|
}
|
|
}
|
|
}
|
|
// IE11 doesn't work with the transpiled version of the forEach.
|
|
let keys = Object.keys(pagesToUpdate);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
let pageToUpdate = pagesToUpdate[keys[i]];
|
|
const affectedUpdatedItems = updateGridCache(pageToUpdate.page, pageToUpdate.parentKey);
|
|
if (affectedUpdatedItems) {
|
|
itemsUpdated(affectedUpdatedItems);
|
|
updateGridItemsInDomBasedOnCache(affectedUpdatedItems);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Updates the given items for a non-hierarchical grid.
|
|
*
|
|
* @param updatedItems the updated items array
|
|
*/
|
|
grid.$connector.updateFlatData = tryCatchWrapper(function (updatedItems) {
|
|
// update (flat) caches
|
|
for (let i = 0; i < updatedItems.length; i++) {
|
|
let cacheLocation = itemToCacheLocation(updatedItems[i]);
|
|
if (cacheLocation) {
|
|
// update connector cache
|
|
cache[cacheLocation.parentKey][cacheLocation.page][cacheLocation.index] = updatedItems[i];
|
|
|
|
// update grid's cache
|
|
const index = parseInt(cacheLocation.page) * grid.pageSize + parseInt(cacheLocation.index);
|
|
const { rootCache } = dataProviderController;
|
|
if (rootCache.items[index]) {
|
|
rootCache.items[index] = updatedItems[i];
|
|
}
|
|
}
|
|
}
|
|
itemsUpdated(updatedItems);
|
|
|
|
updateGridItemsInDomBasedOnCache(updatedItems);
|
|
});
|
|
|
|
grid.$connector.clearExpanded = tryCatchWrapper(function () {
|
|
grid.expandedItems = [];
|
|
ensureSubCacheQueue = [];
|
|
parentRequestQueue = [];
|
|
});
|
|
|
|
/**
|
|
* Ensures that the last requested page range does not include pages for data that has been cleared.
|
|
* The last requested range is used in `fetchPage` to skip requests to the server if the page range didn't
|
|
* change. However, if some pages of that range have been cleared by data communicator, we need to clear the
|
|
* range to ensure the pages get loaded again. This can happen for example when changing the requested range
|
|
* on the server (e.g. preload of items on scroll to index), which can cause data communicator to clear pages
|
|
* that the connector assumes are already loaded.
|
|
*/
|
|
const sanitizeLastRequestedRange = function () {
|
|
// Only relevant for the root cache
|
|
const range = lastRequestedRanges[root];
|
|
// Range may not be set yet, or nothing was cleared
|
|
if (!range || !currentUpdateClearRange) {
|
|
return;
|
|
}
|
|
|
|
// Determine all pages that were cleared
|
|
const numClearedPages = currentUpdateClearRange[1] - currentUpdateClearRange[0] + 1;
|
|
const clearedPages = Array.from({ length: numClearedPages }, (_, i) => currentUpdateClearRange[0] + i);
|
|
|
|
// Remove pages that have been set in same update
|
|
if (currentUpdateSetRange) {
|
|
const [first, last] = currentUpdateSetRange;
|
|
for (let page = first; page <= last; page++) {
|
|
const index = clearedPages.indexOf(page);
|
|
if (index >= 0) {
|
|
clearedPages.splice(index, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Clear the last requested range if it includes any of the cleared pages
|
|
if (clearedPages.some((page) => page >= range[0] && page <= range[1])) {
|
|
range[0] = -1;
|
|
range[1] = -1;
|
|
}
|
|
};
|
|
|
|
grid.$connector.clear = tryCatchWrapper(function (index, length, parentKey) {
|
|
let pkey = parentKey || root;
|
|
if (!cache[pkey] || Object.keys(cache[pkey]).length === 0) {
|
|
return;
|
|
}
|
|
if (index % grid.pageSize != 0) {
|
|
throw (
|
|
'Got cleared data for index ' + index + ' which is not aligned with the page size of ' + grid.pageSize
|
|
);
|
|
}
|
|
|
|
let firstPage = Math.floor(index / grid.pageSize);
|
|
let updatedPageCount = Math.ceil(length / grid.pageSize);
|
|
|
|
// For root cache, remember the range of pages that were cleared during an update
|
|
if (pkey === root) {
|
|
currentUpdateClearRange = [firstPage, firstPage + updatedPageCount - 1];
|
|
}
|
|
|
|
for (let i = 0; i < updatedPageCount; i++) {
|
|
let page = firstPage + i;
|
|
let items = cache[pkey][page];
|
|
grid.$connector.doDeselection(items.filter((item) => selectedKeys[item.key]));
|
|
items.forEach((item) => grid.closeItemDetails(item));
|
|
delete cache[pkey][page];
|
|
const updatedItems = updateGridCache(page, parentKey);
|
|
if (updatedItems) {
|
|
itemsUpdated(updatedItems);
|
|
}
|
|
updateGridItemsInDomBasedOnCache(items);
|
|
}
|
|
let cacheToClear = dataProviderController.rootCache;
|
|
if (parentKey) {
|
|
const parentItem = createEmptyItemFromKey(pkey);
|
|
const parentItemContext = dataProviderController.getItemContext(parentItem);
|
|
cacheToClear = parentItemContext.subCache;
|
|
}
|
|
const endIndex = index + updatedPageCount * grid.pageSize;
|
|
for (let itemIndex = index; itemIndex < endIndex; itemIndex++) {
|
|
delete cacheToClear.items[itemIndex];
|
|
cacheToClear.removeSubCache(itemIndex);
|
|
}
|
|
updateGridFlatSize();
|
|
});
|
|
|
|
grid.$connector.reset = tryCatchWrapper(function () {
|
|
grid.size = 0;
|
|
deleteObjectContents(cache);
|
|
deleteObjectContents(dataProviderController.rootCache.items);
|
|
deleteObjectContents(lastRequestedRanges);
|
|
if (ensureSubCacheDebouncer) {
|
|
ensureSubCacheDebouncer.cancel();
|
|
}
|
|
if (parentRequestDebouncer) {
|
|
parentRequestDebouncer.cancel();
|
|
}
|
|
if (rootRequestDebouncer) {
|
|
rootRequestDebouncer.cancel();
|
|
}
|
|
ensureSubCacheDebouncer = undefined;
|
|
parentRequestDebouncer = undefined;
|
|
ensureSubCacheQueue = [];
|
|
parentRequestQueue = [];
|
|
updateAllGridRowsInDomBasedOnCache();
|
|
});
|
|
|
|
const deleteObjectContents = (obj) => Object.keys(obj).forEach((key) => delete obj[key]);
|
|
|
|
grid.$connector.updateSize = (newSize) => (grid.size = newSize);
|
|
|
|
grid.$connector.updateUniqueItemIdPath = (path) => (grid.itemIdPath = path);
|
|
|
|
grid.$connector.expandItems = tryCatchWrapper(function (items) {
|
|
let newExpandedItems = Array.from(grid.expandedItems);
|
|
items.filter((item) => !grid._isExpanded(item)).forEach((item) => newExpandedItems.push(item));
|
|
grid.expandedItems = newExpandedItems;
|
|
});
|
|
|
|
grid.$connector.collapseItems = tryCatchWrapper(function (items) {
|
|
let newExpandedItems = Array.from(grid.expandedItems);
|
|
items.forEach((item) => {
|
|
let index = grid._getItemIndexInArray(item, newExpandedItems);
|
|
if (index >= 0) {
|
|
newExpandedItems.splice(index, 1);
|
|
}
|
|
});
|
|
grid.expandedItems = newExpandedItems;
|
|
items.forEach((item) => grid.$connector.removeFromQueue(item));
|
|
});
|
|
|
|
grid.$connector.removeFromQueue = tryCatchWrapper(function (item) {
|
|
let itemId = grid.getItemId(item);
|
|
// The treePageCallbacks for the itemId are about to be discarded ->
|
|
// Resolve the callbacks with an empty array to not leave grid in loading state
|
|
Object.values(treePageCallbacks[itemId] || {}).forEach((callback) => callback([]));
|
|
|
|
delete treePageCallbacks[itemId];
|
|
ensureSubCacheQueue = ensureSubCacheQueue.filter((item) => item.itemkey !== itemId);
|
|
parentRequestQueue = parentRequestQueue.filter((item) => item.parentKey !== itemId);
|
|
});
|
|
|
|
grid.$connector.confirmParent = tryCatchWrapper(function (id, parentKey, levelSize) {
|
|
// Create connector cache if it doesn't exist
|
|
if (!cache[parentKey]) {
|
|
cache[parentKey] = {};
|
|
}
|
|
// Update connector cache size
|
|
const hasSizeChanged = cache[parentKey].size !== levelSize;
|
|
cache[parentKey].size = levelSize;
|
|
if (levelSize === 0) {
|
|
cache[parentKey][0] = [];
|
|
}
|
|
|
|
// If grid has outstanding requests for this parent, then resolve them
|
|
// and let grid update the flat size and re-render.
|
|
let outstandingRequests = Object.getOwnPropertyNames(treePageCallbacks[parentKey] || {});
|
|
for (let i = 0; i < outstandingRequests.length; i++) {
|
|
let page = outstandingRequests[i];
|
|
|
|
let lastRequestedRange = lastRequestedRanges[parentKey] || [0, 0];
|
|
|
|
const callback = treePageCallbacks[parentKey][page];
|
|
if (
|
|
(cache[parentKey] && cache[parentKey][page]) ||
|
|
page < lastRequestedRange[0] ||
|
|
page > lastRequestedRange[1]
|
|
) {
|
|
delete treePageCallbacks[parentKey][page];
|
|
let items = cache[parentKey][page] || new Array(levelSize);
|
|
callback(items, levelSize);
|
|
} else if (callback && levelSize === 0) {
|
|
// The parent item has 0 child items => resolve the callback with an empty array
|
|
delete treePageCallbacks[parentKey][page];
|
|
callback([], levelSize);
|
|
}
|
|
}
|
|
|
|
// If size has changed, and there are no outstanding requests, then
|
|
// manually update the size of the grid cache and update the effective
|
|
// size, effectively re-rendering the grid. This is necessary when
|
|
// individual items are refreshed on the server, in which case there
|
|
// is no loading request from the grid itself. In that case, if
|
|
// children were added or removed, the grid will not be aware of it
|
|
// unless we manually update the size.
|
|
if (hasSizeChanged && outstandingRequests.length === 0) {
|
|
const parentItem = createEmptyItemFromKey(parentKey);
|
|
const parentItemContext = dataProviderController.getItemContext(parentItem);
|
|
if (parentItemContext && parentItemContext.subCache) {
|
|
parentItemContext.subCache.size = levelSize;
|
|
}
|
|
updateGridFlatSize();
|
|
}
|
|
|
|
// Let server know we're done
|
|
grid.$server.confirmParentUpdate(id, parentKey);
|
|
|
|
if (!grid.loading) {
|
|
grid.__confirmParentUpdateDebouncer = Debouncer.debounce(
|
|
grid.__confirmParentUpdateDebouncer,
|
|
animationFrame,
|
|
() => grid.__updateVisibleRows()
|
|
);
|
|
}
|
|
});
|
|
|
|
grid.$connector.confirm = tryCatchWrapper(function (id) {
|
|
// We're done applying changes from this batch, resolve outstanding
|
|
// callbacks
|
|
let outstandingRequests = Object.getOwnPropertyNames(rootPageCallbacks);
|
|
for (let i = 0; i < outstandingRequests.length; i++) {
|
|
let page = outstandingRequests[i];
|
|
let lastRequestedRange = lastRequestedRanges[root] || [0, 0];
|
|
|
|
const lastAvailablePage = grid.size ? Math.ceil(grid.size / grid.pageSize) - 1 : 0;
|
|
// It's possible that the lastRequestedRange includes a page that's beyond lastAvailablePage if the grid's size got reduced during an ongoing data request
|
|
const lastRequestedRangeEnd = Math.min(lastRequestedRange[1], lastAvailablePage);
|
|
// Resolve if we have data or if we don't expect to get data
|
|
const callback = rootPageCallbacks[page];
|
|
if (cache[root]?.[page] || page < lastRequestedRange[0] || +page > lastRequestedRangeEnd) {
|
|
delete rootPageCallbacks[page];
|
|
|
|
if (cache[root][page]) {
|
|
// Cached data is available, resolve the callback
|
|
callback(cache[root][page]);
|
|
} else {
|
|
// No cached data, resolve the callback with an empty array
|
|
callback(new Array(grid.pageSize));
|
|
// Request grid for content update
|
|
grid.requestContentUpdate();
|
|
}
|
|
|
|
} else if (callback && grid.size === 0) {
|
|
// The grid has 0 items => resolve the callback with an empty array
|
|
delete rootPageCallbacks[page];
|
|
callback([]);
|
|
}
|
|
}
|
|
|
|
// Sanitize last requested range for the root level
|
|
sanitizeLastRequestedRange();
|
|
// Clear current update state
|
|
currentUpdateSetRange = null;
|
|
currentUpdateClearRange = null;
|
|
|
|
// Let server know we're done
|
|
grid.$server.confirmUpdate(id);
|
|
});
|
|
|
|
grid.$connector.ensureHierarchy = tryCatchWrapper(function () {
|
|
for (let parentKey in cache) {
|
|
if (parentKey !== root) {
|
|
delete cache[parentKey];
|
|
}
|
|
}
|
|
deleteObjectContents(lastRequestedRanges);
|
|
|
|
dataProviderController.rootCache.removeSubCaches();
|
|
|
|
updateAllGridRowsInDomBasedOnCache();
|
|
});
|
|
|
|
grid.$connector.setSelectionMode = tryCatchWrapper(function (mode) {
|
|
if ((typeof mode === 'string' || mode instanceof String) && validSelectionModes.indexOf(mode) >= 0) {
|
|
selectionMode = mode;
|
|
selectedKeys = {};
|
|
grid.$connector.updateMultiSelectable();
|
|
} else {
|
|
throw 'Attempted to set an invalid selection mode';
|
|
}
|
|
});
|
|
|
|
/*
|
|
* Manage aria-multiselectable attribute depending on the selection mode.
|
|
* see more: https://github.com/vaadin/web-components/issues/1536
|
|
* or: https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable
|
|
* For selection mode SINGLE, set the aria-multiselectable attribute to false
|
|
*/
|
|
grid.$connector.updateMultiSelectable = tryCatchWrapper(function () {
|
|
if (!grid.$) {
|
|
return;
|
|
}
|
|
|
|
if (selectionMode === validSelectionModes[0]) {
|
|
grid.$.table.setAttribute('aria-multiselectable', false);
|
|
// For selection mode NONE, remove the aria-multiselectable attribute
|
|
} else if (selectionMode === validSelectionModes[1]) {
|
|
grid.$.table.removeAttribute('aria-multiselectable');
|
|
// For selection mode MULTI, set aria-multiselectable to true
|
|
} else {
|
|
grid.$.table.setAttribute('aria-multiselectable', true);
|
|
}
|
|
});
|
|
|
|
// Have the multi-selectable state updated on attach
|
|
grid._createPropertyObserver('isAttached', () => grid.$connector.updateMultiSelectable());
|
|
|
|
const singleTimeRenderer = (renderer) => {
|
|
return (root) => {
|
|
if (renderer) {
|
|
renderer(root);
|
|
renderer = null;
|
|
}
|
|
};
|
|
};
|
|
|
|
grid.$connector.setHeaderRenderer = tryCatchWrapper(function (column, options) {
|
|
const { content, showSorter, sorterPath } = options;
|
|
|
|
if (content === null) {
|
|
column.headerRenderer = null;
|
|
return;
|
|
}
|
|
|
|
column.headerRenderer = singleTimeRenderer((root) => {
|
|
// Clear previous contents
|
|
root.innerHTML = '';
|
|
// Render sorter
|
|
let contentRoot = root;
|
|
if (showSorter) {
|
|
const sorter = document.createElement('vaadin-grid-sorter');
|
|
sorter.setAttribute('path', sorterPath);
|
|
const ariaLabel = content instanceof Node ? content.textContent : content;
|
|
if (ariaLabel) {
|
|
sorter.setAttribute('aria-label', `Sort by ${ariaLabel}`);
|
|
}
|
|
root.appendChild(sorter);
|
|
|
|
// Use sorter as content root
|
|
contentRoot = sorter;
|
|
}
|
|
// Add content
|
|
if (content instanceof Node) {
|
|
contentRoot.appendChild(content);
|
|
} else {
|
|
contentRoot.textContent = content;
|
|
}
|
|
});
|
|
});
|
|
|
|
grid.__applySorters = () => {
|
|
const sorters = grid._mapSorters();
|
|
const sortersChanged = JSON.stringify(grid._previousSorters) !== JSON.stringify(sorters);
|
|
|
|
// Update the _previousSorters in vaadin-grid-sort-mixin so that the __applySorters
|
|
// method in the mixin will skip calling clearCache().
|
|
//
|
|
// In Flow Grid's case, we never want to clear the cache eagerly when the sorter elements
|
|
// change due to one of the following reasons:
|
|
//
|
|
// 1. Sorted by user: The items in the new sort order need to be fetched from the server,
|
|
// and we want to avoid a heavy re-render before the updated items have actually been fetched.
|
|
//
|
|
// 2. Sorted programmatically on the server: The items in the new sort order have already
|
|
// been fetched and applied to the grid. The sorter element states are updated programmatically
|
|
// to reflect the new sort order, but there's no need to re-render the grid rows.
|
|
grid._previousSorters = sorters;
|
|
|
|
// Call the original __applySorters method in vaadin-grid-sort-mixin
|
|
Grid.prototype.__applySorters.call(grid);
|
|
|
|
if (sortersChanged && !sorterDirectionsSetFromServer) {
|
|
grid.$server.sortersChanged(sorters);
|
|
}
|
|
};
|
|
|
|
grid.$connector.setFooterRenderer = tryCatchWrapper(function (column, options) {
|
|
const { content } = options;
|
|
|
|
if (content === null) {
|
|
column.footerRenderer = null;
|
|
return;
|
|
}
|
|
|
|
column.footerRenderer = singleTimeRenderer((root) => {
|
|
// Clear previous contents
|
|
root.innerHTML = '';
|
|
// Add content
|
|
if (content instanceof Node) {
|
|
root.appendChild(content);
|
|
} else {
|
|
root.textContent = content;
|
|
}
|
|
});
|
|
});
|
|
|
|
grid.addEventListener(
|
|
'vaadin-context-menu-before-open',
|
|
tryCatchWrapper(function (e) {
|
|
const { key, columnId } = e.detail;
|
|
grid.$server.updateContextMenuTargetItem(key, columnId);
|
|
})
|
|
);
|
|
|
|
grid.getContextMenuBeforeOpenDetail = tryCatchWrapper(function (event) {
|
|
// For `contextmenu` events, we need to access the source event,
|
|
// when using open on click we just use the click event itself
|
|
const sourceEvent = event.detail.sourceEvent || event;
|
|
const eventContext = grid.getEventContext(sourceEvent);
|
|
const key = eventContext.item?.key || '';
|
|
const columnId = eventContext.column?.id || '';
|
|
return { key, columnId };
|
|
});
|
|
|
|
grid.preventContextMenu = tryCatchWrapper(function (event) {
|
|
const isLeftClick = event.type === 'click';
|
|
const { column } = grid.getEventContext(event);
|
|
|
|
return isLeftClick && column instanceof GridFlowSelectionColumn;
|
|
});
|
|
|
|
grid.addEventListener(
|
|
'click',
|
|
tryCatchWrapper((e) => _fireClickEvent(e, 'item-click'))
|
|
);
|
|
grid.addEventListener(
|
|
'dblclick',
|
|
tryCatchWrapper((e) => _fireClickEvent(e, 'item-double-click'))
|
|
);
|
|
|
|
grid.addEventListener(
|
|
'column-resize',
|
|
tryCatchWrapper((e) => {
|
|
const cols = grid._getColumnsInOrder().filter((col) => !col.hidden);
|
|
|
|
cols.forEach((col) => {
|
|
col.dispatchEvent(new CustomEvent('column-drag-resize'));
|
|
});
|
|
|
|
grid.dispatchEvent(
|
|
new CustomEvent('column-drag-resize', {
|
|
detail: {
|
|
resizedColumnKey: e.detail.resizedColumn._flowId
|
|
}
|
|
})
|
|
);
|
|
})
|
|
);
|
|
|
|
grid.addEventListener(
|
|
'column-reorder',
|
|
tryCatchWrapper((e) => {
|
|
const columns = grid._columnTree
|
|
.slice(0)
|
|
.pop()
|
|
.filter((c) => c._flowId)
|
|
.sort((b, a) => b._order - a._order)
|
|
.map((c) => c._flowId);
|
|
|
|
grid.dispatchEvent(
|
|
new CustomEvent('column-reorder-all-columns', {
|
|
detail: { columns }
|
|
})
|
|
);
|
|
})
|
|
);
|
|
|
|
grid.addEventListener(
|
|
'cell-focus',
|
|
tryCatchWrapper((e) => {
|
|
const eventContext = grid.getEventContext(e);
|
|
const expectedSectionValues = ['header', 'body', 'footer'];
|
|
|
|
if (expectedSectionValues.indexOf(eventContext.section) === -1) {
|
|
return;
|
|
}
|
|
|
|
grid.dispatchEvent(
|
|
new CustomEvent('grid-cell-focus', {
|
|
detail: {
|
|
itemKey: eventContext.item ? eventContext.item.key : null,
|
|
|
|
internalColumnId: eventContext.column ? eventContext.column._flowId : null,
|
|
|
|
section: eventContext.section
|
|
}
|
|
})
|
|
);
|
|
})
|
|
);
|
|
|
|
function _fireClickEvent(event, eventName) {
|
|
// Click event was handled by the component inside grid, do nothing.
|
|
if (event.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
const target = event.target;
|
|
|
|
if (isFocusable(target) || target instanceof HTMLLabelElement) {
|
|
return;
|
|
}
|
|
|
|
const eventContext = grid.getEventContext(event);
|
|
const section = eventContext.section;
|
|
|
|
if (eventContext.item && section !== 'details') {
|
|
event.itemKey = eventContext.item.key;
|
|
// if you have a details-renderer, getEventContext().column is undefined
|
|
if (eventContext.column) {
|
|
event.internalColumnId = eventContext.column._flowId;
|
|
}
|
|
grid.dispatchEvent(new CustomEvent(eventName, { detail: event }));
|
|
}
|
|
}
|
|
|
|
grid.cellClassNameGenerator = tryCatchWrapper(function (column, rowData) {
|
|
const style = rowData.item.style;
|
|
if (!style) {
|
|
return;
|
|
}
|
|
return (style.row || '') + ' ' + ((column && style[column._flowId]) || '');
|
|
});
|
|
|
|
grid.cellPartNameGenerator = tryCatchWrapper(function (column, rowData) {
|
|
const part = rowData.item.part;
|
|
if (!part) {
|
|
return;
|
|
}
|
|
return (part.row || '') + ' ' + ((column && part[column._flowId]) || '');
|
|
});
|
|
|
|
grid.dropFilter = tryCatchWrapper((rowData) => rowData.item && !rowData.item.dropDisabled);
|
|
|
|
grid.dragFilter = tryCatchWrapper((rowData) => rowData.item && !rowData.item.dragDisabled);
|
|
|
|
grid.addEventListener(
|
|
'grid-dragstart',
|
|
tryCatchWrapper((e) => {
|
|
if (grid._isSelected(e.detail.draggedItems[0])) {
|
|
// Dragging selected (possibly multiple) items
|
|
if (grid.__selectionDragData) {
|
|
Object.keys(grid.__selectionDragData).forEach((type) => {
|
|
e.detail.setDragData(type, grid.__selectionDragData[type]);
|
|
});
|
|
} else {
|
|
(grid.__dragDataTypes || []).forEach((type) => {
|
|
e.detail.setDragData(type, e.detail.draggedItems.map((item) => item.dragData[type]).join('\n'));
|
|
});
|
|
}
|
|
|
|
if (grid.__selectionDraggedItemsCount > 1) {
|
|
e.detail.setDraggedItemsCount(grid.__selectionDraggedItemsCount);
|
|
}
|
|
} else {
|
|
// Dragging just one (non-selected) item
|
|
(grid.__dragDataTypes || []).forEach((type) => {
|
|
e.detail.setDragData(type, e.detail.draggedItems[0].dragData[type]);
|
|
});
|
|
}
|
|
})
|
|
);
|
|
})(grid)
|
|
};
|
|
})();
|
