cloudhubui
Version:
Various components to use in react projects
904 lines (874 loc) • 227 kB
JavaScript
/**
* Bundle of @devexpress/dx-react-grid
* Generated: 2021-03-04
* Version: 2.7.5
* License: https://js.devexpress.com/Licensing
*/
import { memo, createElement, useCallback, PureComponent, Fragment, createRef, Component } from 'react';
import { Plugin, Getter, Template, TemplatePlaceholder, PluginHost, TemplateConnector, createStateHelper, Action, DragDropProvider as DragDropProvider$1, withComponents, DropTarget, DragSource, RefHolder, Sizer, connectProps } from '@devexpress/dx-react-core';
import { tableColumnsWithGrouping, rowIdGetter, cellValueGetter, tableColumnsWithDataRows, checkTableColumnExtensions, visibleTableColumns, orderedColumns, columnChooserItems, changeColumnFilter, getColumnExtensionValueGetter, filterExpression, defaultFilterPredicate, filteredCollapsedRowsGetter, unwrappedFilteredRows, filteredRows, getColumnExtension, startEditRows, stopEditRows, startEditCells, stopEditCells, changeRow, cancelChanges, changedRowsByIds, addRow, changeAddedRow, cancelAddedRows, addedRowsByIds, deleteRows, cancelDeletedRows, createRowChangeGetter, setCurrentPage, setPageSize, rowsWithPageHeaders, rowCount, paginatedRows, currentPage, toggleExpandedGroups, draftColumnGrouping, cancelColumnGroupingDraft, adjustSortIndex, changeColumnGrouping, groupRowChecker, groupRowLevelKeyGetter, groupCollapsedRowsGetter, expandedGroupRows, groupedRows, customGroupingRowIdGetter, customGroupedRows, toggleSelection, rowsWithAvailableToSelect, allSelected, someSelected, unwrapSelectedRows, getPersistentSortedColumns, calculateKeepOther, changeColumnSorting, sortedRows, draftOrder, TABLE_DATA_TYPE, getTableTargetColumnIndex, changeColumnOrder, TABLE_REORDERING_TYPE, tableHeaderRowsWithReordering, tableCellColSpanGetter, isHeaderStubTableCell, isDataTableCell, isNoDataTableRow, isNoDataTableCell, isDataTableRow, TABLE_NODATA_TYPE, tableRowsWithDataRows, isSelectAllTableCell, isSelectTableCell, isRowHighlighted, TABLE_SELECT_TYPE, tableColumnsWithSelection, toggleDetailRowExpanded, isDetailToggleTableCell, isDetailRowExpanded, isDetailTableRow, isDetailTableCell, TABLE_DETAIL_TYPE, tableDetailCellColSpanGetter, tableColumnsWithDetail, tableRowsWithExpandedDetail, defaultFormatlessSummaries, getGroupInlineSummaries, isGroupTableRow, isGroupTableCell, calculateGroupCellIndent, isGroupIndentTableCell, isGroupIndentStubTableCell, isGroupRowOrdinaryCell, isRowSummaryCell, getColumnSummaries, isPreviousCellContainSummary, TABLE_FLEX_TYPE, TABLE_GROUP_TYPE, tableRowsWithGrouping, tableGroupCellColSpanGetter, isHeadingTableCell, getNextColumnName, getColumnSortingDirection, isHeadingTableRow, TABLE_HEADING_TYPE, tableRowsWithHeading, columnBandLevels, isBandedOrHeaderRow, getBandComponent, BAND_FILL_LEVEL_CELL, BAND_HEADER_CELL, BAND_GROUP_CELL, BAND_EMPTY_CELL, BAND_DUPLICATE_RENDER, isBandedTableRow, TABLE_BAND_TYPE, bandLevelsVisibility, columnVisibleIntervals, tableRowsWithBands, tableHeaderColumnChainsWithBands, isFilterTableCell, getColumnFilterConfig, getColumnFilterOperations, getSelectedFilterOperation, isFilterTableRow, TABLE_FILTER_TYPE, tableHeaderRowsWithFilter, TOP_POSITION, isFilterValueEmpty, isEditTableCell, isAddedTableRow, getRowChange, isEditTableRow, TABLE_ADDED_TYPE, TABLE_EDIT_TYPE, tableRowsWithEditing, isHeadingEditCommandsTableCell, isEditCommandsTableCell, TABLE_EDIT_COMMAND_TYPE, tableColumnsWithEditing, tableColumnsWithWidths, tableColumnsWithDraftWidths, changeTableColumnWidth, draftTableColumnWidth, cancelTableColumnWidthDraft, pageCount, getGroupCellTargetIndex, groupingPanelItems, getAvailableFilterOperationsGetter, toggleColumn, tableDataColumnsExist, toggleRowExpanded, expandedTreeRows, customTreeRowIdGetter, customTreeRowLevelKeyGetter, isTreeRowLeafGetter, getTreeRowLevelGetter, collapsedTreeRowsGetter, unwrappedCustomTreeRows, customTreeRowsWithMeta, isTreeTableCell, changeSearchValue, searchFilterExpression, calculateFixedColumnProps, isFixedTableRow, tableHeaderRowsWithFixed, tableHeaderColumnChainsWithFixed, tableColumnsWithFixed, prepareGroupSummaryItems, defaultSummaryCalculator, totalSummaryValues, groupSummaryValues, treeSummaryValues, isTotalSummaryTableCell, isGroupSummaryTableCell, isFooterSummary, isTreeSummaryTableCell, isTotalSummaryTableRow, isGroupSummaryTableRow, isTreeSummaryTableRow, TABLE_TREE_SUMMARY_TYPE, TABLE_GROUP_SUMMARY_TYPE, TABLE_TOTAL_SUMMARY_TYPE, tableRowsWithSummaries, tableRowsWithTotalSummaries, getReferenceIndex, needFetchMorePages, getRequestMeta, shouldSendRequest, emptyVirtualRows, trimRowsToInterval, getAvailableRowCount, virtualRowsWithCache, plainRows, loadedRowsStart, rowsWithEditingCells, columnsWithEditingCells, getAnimations, filterActiveAnimations, evalAnimations, TABLE_STUB_TYPE, getViewport, getCollapsedGrids, getColumnWidthGetter, getTopRowId, getScrollTop, isStubTableCell, BOTTOM_POSITION, checkColumnWidths } from '@devexpress/dx-grid-core';
import { getMessagesFormatter, memoize, shallowEqual } from '@devexpress/dx-core';
import { createPortal, findDOMNode } from 'react-dom';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
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);
};
function __extends(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 = function() {
__assign = Object.assign || function __assign(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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
var showColumnWhenGroupedGetter = function (showColumnsWhenGrouped, columnExtensions) {
if (columnExtensions === void 0) { columnExtensions = []; }
var map = columnExtensions.reduce(function (acc, columnExtension) {
acc[columnExtension.columnName] = columnExtension.showWhenGrouped;
return acc;
}, {});
return function (columnName) { return map[columnName] || showColumnsWhenGrouped; };
};
/** @internal */
var TableColumnsWithGrouping = memo(function (_a) {
var indentColumnWidth = _a.indentColumnWidth, showColumnsWhenGrouped = _a.showColumnsWhenGrouped, columnExtensions = _a.columnExtensions;
var tableColumnsComputed = function (_a) {
var columns = _a.columns, tableColumns = _a.tableColumns, grouping = _a.grouping, draftGrouping = _a.draftGrouping;
return tableColumnsWithGrouping(columns, tableColumns, grouping, draftGrouping, indentColumnWidth, showColumnWhenGroupedGetter(showColumnsWhenGrouped, columnExtensions));
};
return (createElement(Plugin, null,
createElement(Getter, { name: "tableColumns", computed: tableColumnsComputed })));
});
TableColumnsWithGrouping.defaultProps = {
indentColumnWidth: 0,
};
var GridCoreGetters = memo(function (_a) {
var rows = _a.rows, columns = _a.columns, getRowId = _a.getRowId, getCellValue = _a.getCellValue;
return (createElement(Plugin, null,
createElement(Getter, { name: "rows", value: rows }),
createElement(Getter, { name: "getRowId", value: rowIdGetter(getRowId, rows) }),
createElement(Getter, { name: "columns", value: columns }),
createElement(Getter, { name: "getCellValue", value: cellValueGetter(getCellValue, columns) })));
});
var TableColumnsWithDataRowsGetter = memo(function (_a) {
var columnExtensions = _a.columnExtensions;
var tableColumnsComputed = useCallback(function (_a) {
var columns = _a.columns;
return (tableColumnsWithDataRows(columns, columnExtensions));
}, [columnExtensions]);
checkTableColumnExtensions(columnExtensions);
return (createElement(Plugin, null,
createElement(Getter, { name: "tableColumns", computed: tableColumnsComputed })));
});
var visibleTableColumnsComputed = function (_a) {
var tableColumns = _a.tableColumns, hiddenColumnNames = _a.hiddenColumnNames;
return visibleTableColumns(tableColumns, hiddenColumnNames);
};
/** @internal */
var VisibleTableColumns = memo(function (_a) {
var hiddenColumnNames = _a.hiddenColumnNames;
return (createElement(Plugin, null,
createElement(Getter, { name: "hiddenColumnNames", value: hiddenColumnNames }),
createElement(Getter, { name: "tableColumns", computed: visibleTableColumnsComputed })));
});
VisibleTableColumns.defaultProps = {
hiddenColumnNames: [],
};
/** @internal */
var OrderedTableColumns = function (_a) {
var order = _a.order;
var columnsComputed = function (_a) {
var tableColumns = _a.tableColumns;
return orderedColumns(tableColumns, order);
};
return (createElement(Plugin, null,
createElement(Getter, { name: "tableColumns", computed: columnsComputed })));
};
OrderedTableColumns.defaultProps = {
order: [],
};
var GridCore = /*#__PURE__*/ (function (_super) {
__extends(GridCore, _super);
function GridCore() {
return _super !== null && _super.apply(this, arguments) || this;
}
GridCore.prototype.render = function () {
var _a = this.props, Root = _a.rootComponent, restProps = __rest(_a, ["rootComponent"]);
return (createElement(Plugin, null,
createElement(Getter, { name: "skip", value: 0 }),
createElement(Getter, { name: "loadedRowsStart", value: 0 }),
createElement(GridCoreGetters, __assign({}, restProps)),
createElement(Template, { name: "root" },
createElement(Root, null,
createElement(TemplatePlaceholder, { name: "header" }),
createElement(TemplatePlaceholder, { name: "body" }),
createElement(TemplatePlaceholder, { name: "footer" })))));
};
return GridCore;
}(PureComponent));
var GridBase = function (_a) {
var rows = _a.rows, columns = _a.columns, getRowId = _a.getRowId, getCellValue = _a.getCellValue, rootComponent = _a.rootComponent, children = _a.children;
return (createElement(PluginHost, null,
createElement(GridCore, { rows: rows, columns: columns, getRowId: getRowId, getCellValue: getCellValue, rootComponent: rootComponent }),
children));
};
/***
* The Grid is a root container component designed to process and display data specified via
* the `rows` property. You can configure columns using the `columns` property. The Grid's
* functionality is implemented in several plugins specified as child components.
* See the plugins concept for details.
* */
var Grid = GridBase;
var pluginDependencies = [
{ name: 'TableColumnVisibility' },
{ name: 'Toolbar' },
];
var ColumnChooserBase = /*#__PURE__*/ (function (_super) {
__extends(ColumnChooserBase, _super);
function ColumnChooserBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
visible: false,
};
_this.handleToggle = _this.handleToggle.bind(_this);
_this.handleHide = _this.handleHide.bind(_this);
_this.setButtonRef = _this.setButtonRef.bind(_this);
return _this;
}
ColumnChooserBase.prototype.setButtonRef = function (button) {
this.button = button;
};
ColumnChooserBase.prototype.handleToggle = function () {
var visible = this.state.visible;
this.setState({ visible: !visible });
};
ColumnChooserBase.prototype.handleHide = function () {
this.setState({ visible: false });
};
ColumnChooserBase.prototype.render = function () {
var _this = this;
var _a = this.props, Overlay = _a.overlayComponent, Container = _a.containerComponent, Item = _a.itemComponent, ToggleButton = _a.toggleButtonComponent, messages = _a.messages;
var getMessage = getMessagesFormatter(messages);
var visible = this.state.visible;
return (createElement(Plugin, { name: "ColumnChooser", dependencies: pluginDependencies },
createElement(Template, { name: "toolbarContent" },
createElement(TemplatePlaceholder, null),
createElement(TemplateConnector, null, function (_a, _b) {
var columns = _a.columns, hiddenColumnNames = _a.hiddenColumnNames, isColumnTogglingEnabled = _a.isColumnTogglingEnabled;
var toggleColumnVisibility = _b.toggleColumnVisibility;
return (createElement(Fragment, null,
createElement(ToggleButton, { buttonRef: _this.setButtonRef, onToggle: _this.handleToggle, getMessage: getMessage, active: visible }),
createElement(Overlay, { visible: visible, target: _this.button, onHide: _this.handleHide },
createElement(Container, null, columnChooserItems(columns, hiddenColumnNames)
.map(function (item) {
var columnName = item.column.name;
var togglingEnabled = isColumnTogglingEnabled(columnName);
return (createElement(Item, { key: columnName, item: item, disabled: !togglingEnabled, onToggle: function () { return toggleColumnVisibility(columnName); } }));
})))));
}))));
};
ColumnChooserBase.defaultProps = {
messages: {},
};
ColumnChooserBase.components = {
overlayComponent: 'Overlay',
containerComponent: 'Container',
itemComponent: 'Item',
toggleButtonComponent: 'ToggleButton',
};
return ColumnChooserBase;
}(PureComponent));
/***
* The ColumnChooser plugin allows a user to toggle grid columns' visibility at runtime.
* The column chooser lists columns with checkboxes that control a corresponding
* column's visibility.
* */
var ColumnChooser = ColumnChooserBase;
var columnExtensionValueGetter = function (columnExtensions, defaultValue) { return (getColumnExtensionValueGetter(columnExtensions, 'filteringEnabled', defaultValue)); };
var filterExpressionComputed = function (_a) {
var filters = _a.filters, filterExpressionValue = _a.filterExpression;
return filterExpression(filters, filterExpressionValue);
};
var FilteringStateBase = /*#__PURE__*/ (function (_super) {
__extends(FilteringStateBase, _super);
function FilteringStateBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
filters: props.filters || props.defaultFilters,
};
var stateHelper = createStateHelper(_this, {
filters: function () {
var onFiltersChange = _this.props.onFiltersChange;
return onFiltersChange;
},
});
_this.changeColumnFilter = stateHelper.applyFieldReducer
.bind(stateHelper, 'filters', changeColumnFilter);
return _this;
}
// tslint:disable-next-line:member-ordering
FilteringStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.filters, filters = _a === void 0 ? prevState.filters : _a;
return {
filters: filters,
};
};
FilteringStateBase.prototype.render = function () {
var filters = this.state.filters;
var _a = this.props, columnExtensions = _a.columnExtensions, columnFilteringEnabled = _a.columnFilteringEnabled;
return (createElement(Plugin, { name: "FilteringState" },
createElement(Getter, { name: "filters", value: filters }),
createElement(Getter, { name: "filterExpression", computed: filterExpressionComputed }),
createElement(Getter, { name: "isColumnFilteringEnabled", value: columnExtensionValueGetter(columnExtensions, columnFilteringEnabled) }),
createElement(Action, { name: "changeColumnFilter", action: this.changeColumnFilter })));
};
FilteringStateBase.defaultProps = {
defaultFilters: [],
columnFilteringEnabled: true,
};
return FilteringStateBase;
}(PureComponent));
/** A plugin that manages the filtering state. */
var FilteringState = FilteringStateBase;
var pluginDependencies$1 = [
{ name: 'FilteringState', optional: true },
{ name: 'SearchState', optional: true },
];
var getCollapsedRowsComputed = function (_a) {
var rows = _a.rows;
return filteredCollapsedRowsGetter(rows);
};
var unwrappedRowsComputed = function (_a) {
var rows = _a.rows;
return unwrappedFilteredRows(rows);
};
var IntegratedFilteringBase = /*#__PURE__*/ (function (_super) {
__extends(IntegratedFilteringBase, _super);
function IntegratedFilteringBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
IntegratedFilteringBase.prototype.render = function () {
var columnExtensions = this.props.columnExtensions;
var getColumnPredicate = function (columnName) { return getColumnExtension(columnExtensions, columnName).predicate; };
var rowsComputed = function (_a) {
var rows = _a.rows, filterExpression = _a.filterExpression, getCellValue = _a.getCellValue, getRowLevelKey = _a.getRowLevelKey, getCollapsedRows = _a.getCollapsedRows;
return filteredRows(rows, filterExpression, getCellValue, getColumnPredicate, getRowLevelKey, getCollapsedRows);
};
return (createElement(Plugin, { name: "IntegratedFiltering", dependencies: pluginDependencies$1 },
createElement(Getter, { name: "rows", computed: rowsComputed }),
createElement(Getter, { name: "getCollapsedRows", computed: getCollapsedRowsComputed }),
createElement(Getter, { name: "rows", computed: unwrappedRowsComputed })));
};
return IntegratedFilteringBase;
}(PureComponent));
IntegratedFilteringBase.defaultPredicate = defaultFilterPredicate;
var IntegratedFiltering = IntegratedFilteringBase;
var columnExtensionValueGetter$1 = function (columnExtensions, defaultValue) { return getColumnExtensionValueGetter(columnExtensions, 'editingEnabled', defaultValue); };
var EditingStateBase = /*#__PURE__*/ (function (_super) {
__extends(EditingStateBase, _super);
function EditingStateBase(props) {
var _this = _super.call(this, props) || this;
var rowChanges = props.rowChanges || props.defaultRowChanges;
var addedRows = props.addedRows || props.defaultAddedRows;
var getRowChanges = function () {
var stateRowChanges = _this.state.rowChanges;
return stateRowChanges;
};
var getAddedRows = function () {
var stateAddedRows = _this.state.addedRows;
return stateAddedRows;
};
_this.state = {
addedRows: addedRows,
rowChanges: rowChanges,
editingRowIds: props.editingRowIds || props.defaultEditingRowIds,
deletedRowIds: props.deletedRowIds || props.defaultDeletedRowIds,
editingCells: props.editingCells || props.defaultEditingCells,
};
var stateHelper = createStateHelper(_this, {
editingRowIds: function () {
var onEditingRowIdsChange = _this.props.onEditingRowIdsChange;
return onEditingRowIdsChange;
},
editingCells: function () {
var onEditingCellsChange = _this.props.onEditingCellsChange;
return onEditingCellsChange;
},
addedRows: function () {
var onAddedRowsChange = _this.props.onAddedRowsChange;
return onAddedRowsChange;
},
rowChanges: function () {
var onRowChangesChange = _this.props.onRowChangesChange;
return onRowChangesChange;
},
deletedRowIds: function () {
var onDeletedRowIdsChange = _this.props.onDeletedRowIdsChange;
return onDeletedRowIdsChange;
},
});
_this.startEditRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'editingRowIds', startEditRows);
_this.stopEditRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'editingRowIds', stopEditRows);
_this.startEditCells = stateHelper.applyFieldReducer
.bind(stateHelper, 'editingCells', startEditCells);
_this.stopEditCells = stateHelper.applyFieldReducer
.bind(stateHelper, 'editingCells', stopEditCells);
_this.changeRow = stateHelper.applyFieldReducer
.bind(stateHelper, 'rowChanges', changeRow);
_this.cancelChangedRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'rowChanges', cancelChanges);
_this.commitChangedRows = function (_a) {
var rowIds = _a.rowIds;
var onCommitChanges = _this.props.onCommitChanges;
onCommitChanges({
changed: changedRowsByIds(getRowChanges(), rowIds),
});
_this.cancelChangedRows({ rowIds: rowIds });
};
_this.addRow = stateHelper.applyFieldReducer
.bind(stateHelper, 'addedRows', addRow);
_this.changeAddedRow = stateHelper.applyFieldReducer
.bind(stateHelper, 'addedRows', changeAddedRow);
_this.cancelAddedRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'addedRows', cancelAddedRows);
_this.commitAddedRows = function (_a) {
var rowIds = _a.rowIds;
var onCommitChanges = _this.props.onCommitChanges;
onCommitChanges({
added: addedRowsByIds(getAddedRows(), rowIds),
});
_this.cancelAddedRows({ rowIds: rowIds });
};
_this.deleteRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'deletedRowIds', deleteRows);
_this.cancelDeletedRows = stateHelper.applyFieldReducer
.bind(stateHelper, 'deletedRowIds', cancelDeletedRows);
_this.commitDeletedRows = function (_a) {
var rowIds = _a.rowIds;
var onCommitChanges = _this.props.onCommitChanges;
onCommitChanges({ deleted: rowIds });
_this.cancelDeletedRows({ rowIds: rowIds });
};
return _this;
}
EditingStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.editingRowIds, editingRowIds = _a === void 0 ? prevState.editingRowIds : _a, _b = nextProps.editingCells, editingCells = _b === void 0 ? prevState.editingCells : _b, _c = nextProps.rowChanges, rowChanges = _c === void 0 ? prevState.rowChanges : _c, _d = nextProps.addedRows, addedRows = _d === void 0 ? prevState.addedRows : _d, _e = nextProps.deletedRowIds, deletedRowIds = _e === void 0 ? prevState.deletedRowIds : _e;
return {
editingRowIds: editingRowIds,
editingCells: editingCells,
rowChanges: rowChanges,
addedRows: addedRows,
deletedRowIds: deletedRowIds,
};
};
EditingStateBase.prototype.render = function () {
var _a = this.props, createRowChange = _a.createRowChange, columnExtensions = _a.columnExtensions, columnEditingEnabled = _a.columnEditingEnabled;
var _b = this.state, editingRowIds = _b.editingRowIds, editingCells = _b.editingCells, rowChanges = _b.rowChanges, addedRows = _b.addedRows, deletedRowIds = _b.deletedRowIds;
return (createElement(Plugin, { name: "EditingState" },
createElement(Getter, { name: "createRowChange", value: createRowChangeGetter(createRowChange, columnExtensions) }),
createElement(Getter, { name: "editingRowIds", value: editingRowIds }),
createElement(Action, { name: "startEditRows", action: this.startEditRows }),
createElement(Action, { name: "stopEditRows", action: this.stopEditRows }),
createElement(Getter, { name: "editingCells", value: editingCells }),
createElement(Action, { name: "startEditCells", action: this.startEditCells }),
createElement(Action, { name: "stopEditCells", action: this.stopEditCells }),
createElement(Getter, { name: "rowChanges", value: rowChanges }),
createElement(Action, { name: "changeRow", action: this.changeRow }),
createElement(Action, { name: "cancelChangedRows", action: this.cancelChangedRows }),
createElement(Action, { name: "commitChangedRows", action: this.commitChangedRows }),
createElement(Getter, { name: "addedRows", value: addedRows }),
createElement(Action, { name: "addRow", action: this.addRow }),
createElement(Action, { name: "changeAddedRow", action: this.changeAddedRow }),
createElement(Action, { name: "cancelAddedRows", action: this.cancelAddedRows }),
createElement(Action, { name: "commitAddedRows", action: this.commitAddedRows }),
createElement(Getter, { name: "deletedRowIds", value: deletedRowIds }),
createElement(Action, { name: "deleteRows", action: this.deleteRows }),
createElement(Action, { name: "cancelDeletedRows", action: this.cancelDeletedRows }),
createElement(Action, { name: "commitDeletedRows", action: this.commitDeletedRows }),
createElement(Getter, { name: "isColumnEditingEnabled", value: columnExtensionValueGetter$1(columnExtensions, columnEditingEnabled) })));
};
EditingStateBase.defaultProps = {
columnEditingEnabled: true,
defaultEditingRowIds: [],
defaultEditingCells: [],
defaultRowChanges: {},
defaultAddedRows: [],
defaultDeletedRowIds: [],
};
return EditingStateBase;
}(PureComponent));
/***
* A plugin that manages grid rows' editing state. It arranges grid rows
* by different lists depending on a row's state.
* */
var EditingState = EditingStateBase;
var PagingStateBase = /*#__PURE__*/ (function (_super) {
__extends(PagingStateBase, _super);
function PagingStateBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
currentPage: props.currentPage || props.defaultCurrentPage,
pageSize: props.pageSize !== undefined ? props.pageSize : props.defaultPageSize,
};
var stateHelper = createStateHelper(_this, {
currentPage: function () {
var onCurrentPageChange = _this.props.onCurrentPageChange;
return onCurrentPageChange;
},
pageSize: function () {
var onPageSizeChange = _this.props.onPageSizeChange;
return onPageSizeChange;
},
});
_this.setCurrentPage = stateHelper.applyFieldReducer
.bind(stateHelper, 'currentPage', setCurrentPage);
_this.setPageSize = stateHelper.applyFieldReducer
.bind(stateHelper, 'pageSize', setPageSize);
return _this;
}
PagingStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.currentPage, currentPage = _a === void 0 ? prevState.currentPage : _a, _b = nextProps.pageSize, pageSize = _b === void 0 ? prevState.pageSize : _b;
return {
currentPage: currentPage,
pageSize: pageSize,
};
};
PagingStateBase.prototype.render = function () {
var _a = this.state, pageSize = _a.pageSize, currentPage = _a.currentPage;
return (createElement(Plugin, { name: "PagingState" },
createElement(Getter, { name: "currentPage", value: currentPage }),
createElement(Getter, { name: "pageSize", value: pageSize }),
createElement(Action, { name: "setCurrentPage", action: this.setCurrentPage }),
createElement(Action, { name: "setPageSize", action: this.setPageSize })));
};
PagingStateBase.defaultProps = {
defaultPageSize: 10,
defaultCurrentPage: 0,
};
return PagingStateBase;
}(PureComponent));
/***
* A plugin that manages the paging state. It controls the total page count depending on the
* total row count and the specified page size, controls the currently selected page number
* and changes it in response to the corresponding actions.
* */
var PagingState = PagingStateBase;
var pluginDependencies$2 = [
{ name: 'PagingState' },
];
var rowsWithHeadersComputed = function (_a) {
var rows = _a.rows, pageSize = _a.pageSize, getRowLevelKey = _a.getRowLevelKey;
return rowsWithPageHeaders(rows, pageSize, getRowLevelKey);
};
var totalCountComputed = function (_a) {
var rows = _a.rows;
return rowCount(rows);
};
var paginatedRowsComputed = function (_a) {
var rows = _a.rows, pageSize = _a.pageSize, page = _a.currentPage;
return paginatedRows(rows, pageSize, page);
};
var currentPageComputed = function (_a, _b) {
var page = _a.currentPage, totalCount = _a.totalCount, pageSize = _a.pageSize;
var setCurrentPage = _b.setCurrentPage;
return currentPage(page, totalCount, pageSize, setCurrentPage);
};
// eslint-disable-next-line react/prefer-stateless-function
var IntegratedPagingBase = /*#__PURE__*/ (function (_super) {
__extends(IntegratedPagingBase, _super);
function IntegratedPagingBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
IntegratedPagingBase.prototype.render = function () {
return (createElement(Plugin, { name: "IntegratedPaging", dependencies: pluginDependencies$2 },
createElement(Getter, { name: "rows", computed: rowsWithHeadersComputed }),
createElement(Getter, { name: "totalCount", computed: totalCountComputed }),
createElement(Getter, { name: "currentPage", computed: currentPageComputed }),
createElement(Getter, { name: "rows", computed: paginatedRowsComputed })));
};
return IntegratedPagingBase;
}(PureComponent));
/***
* A plugin that performs built-in data paging. It also changes the current page if the provided
* one cannot be applied due to fewer available pages.
* */
var IntegratedPaging = IntegratedPagingBase;
var pluginDependencies$3 = [
{ name: 'PagingState' },
];
var CustomPagingBase = /*#__PURE__*/ (function (_super) {
__extends(CustomPagingBase, _super);
function CustomPagingBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
CustomPagingBase.prototype.render = function () {
var totalCount = this.props.totalCount;
return (createElement(Plugin, { name: "CustomPaging", dependencies: pluginDependencies$3 },
createElement(Getter, { name: "totalCount", value: totalCount })));
};
CustomPagingBase.defaultProps = {
totalCount: 0,
};
return CustomPagingBase;
}(PureComponent));
/** A plugin that allows implementing a custom totalCount calculation logic. */
var CustomPaging = CustomPagingBase;
var dependencies = [
{ name: 'SortingState', optional: true },
];
var columnExtensionValueGetter$2 = function (columnExtensions, defaultValue) { return getColumnExtensionValueGetter(columnExtensions, 'groupingEnabled', defaultValue); };
var GroupingStateBase = /*#__PURE__*/ (function (_super) {
__extends(GroupingStateBase, _super);
function GroupingStateBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
grouping: props.grouping || props.defaultGrouping,
draftGrouping: null,
expandedGroups: props.expandedGroups || props.defaultExpandedGroups,
};
_this.stateHelper = createStateHelper(_this, {
grouping: function () {
var onGroupingChange = _this.props.onGroupingChange;
return onGroupingChange;
},
expandedGroups: function () {
var onExpandedGroupsChange = _this.props.onExpandedGroupsChange;
return onExpandedGroupsChange;
},
});
_this.changeColumnGrouping = _this.changeColumnGrouping.bind(_this);
_this.toggleGroupExpanded = _this.stateHelper.applyReducer
.bind(_this.stateHelper, toggleExpandedGroups);
_this.draftColumnGrouping = _this.stateHelper.applyReducer
.bind(_this.stateHelper, draftColumnGrouping);
_this.cancelColumnGroupingDraft = _this.stateHelper.applyReducer
.bind(_this.stateHelper, cancelColumnGroupingDraft);
_this.changeColumnSorting = _this.changeColumnSorting.bind(_this);
return _this;
}
GroupingStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.grouping, grouping = _a === void 0 ? prevState.grouping : _a, _b = nextProps.expandedGroups, expandedGroups = _b === void 0 ? prevState.expandedGroups : _b;
return {
grouping: grouping,
expandedGroups: expandedGroups,
};
};
GroupingStateBase.prototype.changeColumnSorting = function (_a, _b, _c) {
var sorting = _b.sorting;
var changeColumnSorting = _c.changeColumnSorting;
var columnName = _a.columnName, keepOther = _a.keepOther, restParams = __rest(_a, ["columnName", "keepOther"]);
var grouping = this.state.grouping;
var groupingIndex = grouping
.findIndex(function (columnGrouping) { return columnGrouping.columnName === columnName; });
if (groupingIndex === -1) {
changeColumnSorting(__assign({ columnName: columnName, keepOther: keepOther || grouping.map(function (columnGrouping) { return columnGrouping.columnName; }) }, restParams));
return false;
}
var sortIndex = adjustSortIndex(groupingIndex, grouping, sorting);
changeColumnSorting(__assign({ columnName: columnName,
sortIndex: sortIndex, keepOther: true }, restParams));
return false;
};
GroupingStateBase.prototype.changeColumnGrouping = function (_a, getters, actions) {
var columnName = _a.columnName, groupIndex = _a.groupIndex;
this.stateHelper.applyReducer(changeColumnGrouping, { columnName: columnName, groupIndex: groupIndex }, function (nextState, state) {
var grouping = nextState.grouping;
var prevGrouping = state.grouping;
var sorting = getters.sorting;
var changeColumnSorting = actions.changeColumnSorting;
if (!sorting)
return;
var columnSortingIndex = sorting
.findIndex(function (columnSorting) { return columnSorting.columnName === columnName; });
var prevGroupingIndex = prevGrouping
.findIndex(function (columnGrouping) { return columnGrouping.columnName === columnName; });
var groupingIndex = grouping
.findIndex(function (columnGrouping) { return columnGrouping.columnName === columnName; });
if (columnSortingIndex === -1
|| (prevGroupingIndex === prevGrouping.length - 1 && groupingIndex === -1))
return;
var sortIndex = adjustSortIndex(groupingIndex === -1 ? grouping.length : groupingIndex, grouping, sorting);
if (columnSortingIndex === sortIndex)
return;
changeColumnSorting(__assign({ sortIndex: sortIndex, keepOther: true }, sorting[columnSortingIndex]));
});
};
GroupingStateBase.prototype.render = function () {
var _a = this.state, grouping = _a.grouping, draftGrouping = _a.draftGrouping, expandedGroups = _a.expandedGroups;
var _b = this.props, columnExtensions = _b.columnExtensions, columnGroupingEnabled = _b.columnGroupingEnabled;
return (createElement(Plugin, { name: "GroupingState", dependencies: dependencies },
createElement(Getter, { name: "grouping", value: grouping }),
createElement(Getter, { name: "draftGrouping", value: draftGrouping || grouping }),
createElement(Getter, { name: "isColumnGroupingEnabled", value: columnExtensionValueGetter$2(columnExtensions, columnGroupingEnabled) }),
createElement(Action, { name: "changeColumnGrouping", action: this.changeColumnGrouping }),
createElement(Action, { name: "draftColumnGrouping", action: this.draftColumnGrouping }),
createElement(Action, { name: "cancelColumnGroupingDraft", action: this.cancelColumnGroupingDraft }),
createElement(Getter, { name: "expandedGroups", value: expandedGroups }),
createElement(Action, { name: "toggleGroupExpanded", action: this.toggleGroupExpanded }),
createElement(Action, { name: "changeColumnSorting", action: this.changeColumnSorting })));
};
GroupingStateBase.defaultProps = {
defaultGrouping: [],
defaultExpandedGroups: [],
columnGroupingEnabled: true,
};
return GroupingStateBase;
}(PureComponent));
/***
* A plugin that manages the grouping state. It lists columns used for grouping and stores
* information about expanded/collapsed groups.
* */
var GroupingState = GroupingStateBase;
var pluginDependencies$4 = [
{ name: 'GroupingState' },
];
var getCollapsedRowsComputed$1 = function (_a) {
var getCollapsedRows = _a.getCollapsedRows;
return groupCollapsedRowsGetter(getCollapsedRows);
};
var expandedGroupedRowsComputed = function (_a) {
var rows = _a.rows, grouping = _a.grouping, expandedGroups = _a.expandedGroups, isExporting = _a.isExporting;
return expandedGroupRows(rows, grouping, expandedGroups, isExporting);
};
var IntegratedGroupingBase = /*#__PURE__*/ (function (_super) {
__extends(IntegratedGroupingBase, _super);
function IntegratedGroupingBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
IntegratedGroupingBase.prototype.render = function () {
var columnExtensions = this.props.columnExtensions;
var getColumnCriteria = function (columnName) { return getColumnExtension(columnExtensions, columnName).criteria; };
var groupedRowsComputed = function (_a) {
var rows = _a.rows, grouping = _a.grouping, getCellValue = _a.getCellValue;
return groupedRows(rows, grouping, getCellValue, getColumnCriteria);
};
return (createElement(Plugin, { name: "IntegratedGrouping", dependencies: pluginDependencies$4 },
createElement(Getter, { name: "isGroupRow", value: groupRowChecker }),
createElement(Getter, { name: "getRowLevelKey", value: groupRowLevelKeyGetter }),
createElement(Getter, { name: "getCollapsedRows", computed: getCollapsedRowsComputed$1 }),
createElement(Getter, { name: "rows", computed: groupedRowsComputed }),
createElement(Getter, { name: "rows", computed: expandedGroupedRowsComputed })));
};
return IntegratedGroupingBase;
}(PureComponent));
/* tslint:disable: max-line-length */
/** A plugin that performs built-in grouping and group expanding/collapsing. */
var IntegratedGrouping = IntegratedGroupingBase;
/* tslint:enable: max-line-length */
var pluginDependencies$5 = [
{ name: 'GroupingState' },
];
var getCollapsedRowsComputed$2 = function (_a) {
var getCollapsedRows = _a.getCollapsedRows;
return groupCollapsedRowsGetter(getCollapsedRows);
};
var expandedGroupedRowsComputed$1 = function (_a) {
var rows = _a.rows, grouping = _a.grouping, expandedGroups = _a.expandedGroups, isExporting = _a.isExporting;
return expandedGroupRows(rows, grouping, expandedGroups, isExporting);
};
var getRowIdComputed = function (_a) {
var getRowId = _a.getRowId, rows = _a.rows;
return customGroupingRowIdGetter(getRowId, rows);
};
var CustomGroupingBase = /*#__PURE__*/ (function (_super) {
__extends(CustomGroupingBase, _super);
function CustomGroupingBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
CustomGroupingBase.prototype.render = function () {
var _a = this.props, getChildGroups = _a.getChildGroups, appliedGrouping = _a.grouping, appliedExpandedGroups = _a.expandedGroups;
var groupedRowsComputed = function (_a) {
var rows = _a.rows, grouping = _a.grouping;
return customGroupedRows(rows, grouping, getChildGroups);
};
return (createElement(Plugin, { name: "CustomGrouping", dependencies: pluginDependencies$5 },
appliedGrouping && (createElement(Getter, { name: "grouping", value: appliedGrouping })),
appliedExpandedGroups && (createElement(Getter, { name: "expandedGroups", value: appliedExpandedGroups })),
createElement(Getter, { name: "isGroupRow", value: groupRowChecker }),
createElement(Getter, { name: "getRowLevelKey", value: groupRowLevelKeyGetter }),
createElement(Getter, { name: "getCollapsedRows", computed: getCollapsedRowsComputed$2 }),
createElement(Getter, { name: "rows", computed: groupedRowsComputed }),
createElement(Getter, { name: "getRowId", computed: getRowIdComputed }),
createElement(Getter, { name: "rows", computed: expandedGroupedRowsComputed$1 })));
};
return CustomGroupingBase;
}(PureComponent));
// tslint:disable-next-line: max-line-length
/** A plugin that converts custom formatted grouped data to a supported format and performs local group expanding/collapsing. */
var CustomGrouping = CustomGroupingBase;
var SelectionStateBase = /*#__PURE__*/ (function (_super) {
__extends(SelectionStateBase, _super);
function SelectionStateBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
selection: props.selection || props.defaultSelection,
};
var stateHelper = createStateHelper(_this, {
selection: function () {
var onSelectionChange = _this.props.onSelectionChange;
return onSelectionChange;
},
});
_this.toggleSelection = stateHelper.applyFieldReducer
.bind(stateHelper, 'selection', toggleSelection);
return _this;
}
SelectionStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.selection, selection = _a === void 0 ? prevState.selection : _a;
return {
selection: selection,
};
};
SelectionStateBase.prototype.render = function () {
var selection = this.state.selection;
return (createElement(Plugin, { name: "SelectionState" },
createElement(Getter, { name: "selection", value: selection }),
createElement(Action, { name: "toggleSelection", action: this.toggleSelection })));
};
SelectionStateBase.defaultProps = {
defaultSelection: [],
};
return SelectionStateBase;
}(PureComponent));
/** A plugin that manages the selection state. */
var SelectionState = SelectionStateBase;
var rowsWithAvailableToSelectComputed = function (_a) {
var rows = _a.rows, getRowId = _a.getRowId, isGroupRow = _a.isGroupRow;
return rowsWithAvailableToSelect(rows, getRowId, isGroupRow);
};
var allSelectedComputed = function (_a) {
var rows = _a.rows, selection = _a.selection;
return allSelected(rows, selection);
};
var someSelectedComputed = function (_a) {
var rows = _a.rows, selection = _a.selection;
return someSelected(rows, selection);
};
var selectAllAvailableComputed = function (_a) {
var availableToSelect = _a.rows.availableToSelect;
return !!availableToSelect.length;
};
var toggleSelectAll = function (state, _a, _b) {
var availableToSelect = _a.rows.availableToSelect;
var toggleSelection = _b.toggleSelection;
toggleSelection({ state: state, rowIds: availableToSelect });
};
var unwrapRowsComputed = function (_a) {
var rows = _a.rows;
return unwrapSelectedRows(rows);
};
var pluginDependencies$6 = [
{ name: 'SelectionState' },
];
// eslint-disable-next-line react/prefer-stateless-function
var IntegratedSelectionBase = /*#__PURE__*/ (function (_super) {
__extends(IntegratedSelectionBase, _super);
function IntegratedSelectionBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
IntegratedSelectionBase.prototype.render = function () {
return (createElement(Plugin, { name: "IntegratedSelection", dependencies: pluginDependencies$6 },
createElement(Getter, { name: "rows", computed: rowsWithAvailableToSelectComputed }),
createElement(Getter, { name: "allSelected", computed: allSelectedComputed }),
createElement(Getter, { name: "someSelected", computed: someSelectedComputed }),
createElement(Getter, { name: "selectAllAvailable", computed: selectAllAvailableComputed }),
createElement(Action, { name: "toggleSelectAll", action: toggleSelectAll }),
createElement(Getter, { name: "rows", computed: unwrapRowsComputed })));
};
return IntegratedSelectionBase;
}(PureComponent));
/* tslint:disable: max-line-length */
/** A plugin that performs built-in selection. */
var IntegratedSelection = IntegratedSelectionBase;
/* tslint:enable: max-line-length */
var columnExtensionValueGetter$3 = function (columnExtensions, defaultValue) { return getColumnExtensionValueGetter(columnExtensions, 'sortingEnabled', defaultValue); };
var SortingStateBase = /*#__PURE__*/ (function (_super) {
__extends(SortingStateBase, _super);
function SortingStateBase(props) {
var _this = _super.call(this, props) || this;
_this.state = {
sorting: props.sorting || props.defaultSorting,
};
var stateHelper = createStateHelper(_this, {
sorting: function () {
var onSortingChange = _this.props.onSortingChange;
return onSortingChange;
},
});
_this.changeColumnSorting = stateHelper.applyReducer
.bind(stateHelper, function (prevState, payload) {
var _a = _this.props.sorting, sorting = _a === void 0 ? prevState.sorting : _a;
var persistentSortedColumns = getPersistentSortedColumns(sorting, props.columnExtensions);
var keepOther = calculateKeepOther(prevState.sorting, payload.keepOther, persistentSortedColumns);
return changeColumnSorting(prevState, __assign(__assign({}, payload), { keepOther: keepOther }));
});
return _this;
}
SortingStateBase.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.sorting, sorting = _a === void 0 ? prevState.sorting : _a;
return {
sorting: sorting,
};
};
SortingStateBase.prototype.render = function () {
var sorting = this.state.sorting;
var _a = this.props, columnExtensions = _a.columnExtensi