4472 lines
143 KiB
JavaScript
4472 lines
143 KiB
JavaScript
/**
|
|
* Bundle of @devexpress/dx-react-grid
|
|
* Generated: 2018-03-02
|
|
* Version: 1.0.3
|
|
* License: https://js.devexpress.com/Licensing
|
|
*/
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Action, DragDropProvider, DragSource, DropTarget, Getter, Plugin, PluginHost, Template, TemplateConnector, TemplatePlaceholder } from '@devexpress/dx-react-core';
|
|
import { TABLE_DATA_TYPE, TABLE_REORDERING_TYPE, addRow, addedRowsByIds, allSelected, cancelAddedRows, cancelChanges, cancelColumnGroupingDraft, cancelDeletedRows, cancelTableColumnWidthDraft, cellValueGetter, changeAddedRow, changeColumnFilter, changeColumnGrouping, changeColumnOrder, changeColumnSorting, changeRow, changeTableColumnWidth, changedRowsByIds, columnChooserItems, createRowChangeGetter, customGroupedRows, customGroupingRowIdGetter, deleteRows, draftColumnGrouping, draftOrder, draftTableColumnWidth, evalAnimations, expandedGroupRows, filterActiveAnimations, filteredRows, getAnimations, getColumnExtension, getColumnFilterConfig, getColumnSortingDirection, getGroupCellTargetIndex, getMessagesFormatter, getRowChange, getTableRowColumnsWithColSpan, getTableTargetColumnIndex, groupRowChecker, groupRowLevelKeyGetter, groupedRows, groupingPanelItems, isAddedTableRow, isDataTableCell, isDataTableRow, isDetailRowExpanded, isDetailTableRow, isDetailToggleTableCell, isEditCommandsTableCell, isEditTableCell, isEditTableRow, isFilterTableCell, isFilterTableRow, isGroupIndentTableCell, isGroupTableCell, isGroupTableRow, isHeaderStubTableCell, isHeadingEditCommandsTableCell, isHeadingTableCell, isHeadingTableRow, isNoDataTableRow, isSelectAllTableCell, isSelectTableCell, orderedColumns, pageCount, paginatedRows, rowCount, rowIdGetter, rowsWithAvailableToSelect, rowsWithPageHeaders, setCurrentPage, setPageSize, someSelected, sortedRows, startEditRows, stopEditRows, tableColumnsWithDataRows, tableColumnsWithDetail, tableColumnsWithEditing, tableColumnsWithGrouping, tableColumnsWithSelection, tableColumnsWithWidths, tableDataColumnsExist, tableHeaderRowsWithFilter, tableHeaderRowsWithReordering, tableRowsWithDataRows, tableRowsWithEditing, tableRowsWithExpandedDetail, tableRowsWithGrouping, tableRowsWithHeading, toggleColumn, toggleDetailRowExpanded, toggleExpandedGroups, toggleSelection, unwrapSelectedRows, visibleTableColumns } from '@devexpress/dx-grid-core';
|
|
import { findDOMNode } from 'react-dom';
|
|
|
|
var asyncGenerator = function () {
|
|
function AwaitValue(value) {
|
|
this.value = value;
|
|
}
|
|
|
|
function AsyncGenerator(gen) {
|
|
var front, back;
|
|
|
|
function send(key, arg) {
|
|
return new Promise(function (resolve, reject) {
|
|
var request = {
|
|
key: key,
|
|
arg: arg,
|
|
resolve: resolve,
|
|
reject: reject,
|
|
next: null
|
|
};
|
|
|
|
if (back) {
|
|
back = back.next = request;
|
|
} else {
|
|
front = back = request;
|
|
resume(key, arg);
|
|
}
|
|
});
|
|
}
|
|
|
|
function resume(key, arg) {
|
|
try {
|
|
var result = gen[key](arg);
|
|
var value = result.value;
|
|
|
|
if (value instanceof AwaitValue) {
|
|
Promise.resolve(value.value).then(function (arg) {
|
|
resume("next", arg);
|
|
}, function (arg) {
|
|
resume("throw", arg);
|
|
});
|
|
} else {
|
|
settle(result.done ? "return" : "normal", result.value);
|
|
}
|
|
} catch (err) {
|
|
settle("throw", err);
|
|
}
|
|
}
|
|
|
|
function settle(type, value) {
|
|
switch (type) {
|
|
case "return":
|
|
front.resolve({
|
|
value: value,
|
|
done: true
|
|
});
|
|
break;
|
|
|
|
case "throw":
|
|
front.reject(value);
|
|
break;
|
|
|
|
default:
|
|
front.resolve({
|
|
value: value,
|
|
done: false
|
|
});
|
|
break;
|
|
}
|
|
|
|
front = front.next;
|
|
|
|
if (front) {
|
|
resume(front.key, front.arg);
|
|
} else {
|
|
back = null;
|
|
}
|
|
}
|
|
|
|
this._invoke = send;
|
|
|
|
if (typeof gen.return !== "function") {
|
|
this.return = undefined;
|
|
}
|
|
}
|
|
|
|
if (typeof Symbol === "function" && Symbol.asyncIterator) {
|
|
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
|
|
return this;
|
|
};
|
|
}
|
|
|
|
AsyncGenerator.prototype.next = function (arg) {
|
|
return this._invoke("next", arg);
|
|
};
|
|
|
|
AsyncGenerator.prototype.throw = function (arg) {
|
|
return this._invoke("throw", arg);
|
|
};
|
|
|
|
AsyncGenerator.prototype.return = function (arg) {
|
|
return this._invoke("return", arg);
|
|
};
|
|
|
|
return {
|
|
wrap: function (fn) {
|
|
return function () {
|
|
return new AsyncGenerator(fn.apply(this, arguments));
|
|
};
|
|
},
|
|
await: function (value) {
|
|
return new AwaitValue(value);
|
|
}
|
|
};
|
|
}();
|
|
|
|
|
|
|
|
|
|
|
|
var classCallCheck = function (instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
};
|
|
|
|
var createClass = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
};
|
|
}();
|
|
|
|
|
|
|
|
|
|
|
|
var defineProperty = function (obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
};
|
|
|
|
var _extends = Object.assign || function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
|
|
|
|
var inherits = function (subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
enumerable: false,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var objectWithoutProperties = function (obj, keys) {
|
|
var target = {};
|
|
|
|
for (var i in obj) {
|
|
if (keys.indexOf(i) >= 0) continue;
|
|
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
|
|
target[i] = obj[i];
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
var possibleConstructorReturn = function (self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var slicedToArray = function () {
|
|
function sliceIterator(arr, i) {
|
|
var _arr = [];
|
|
var _n = true;
|
|
var _d = false;
|
|
var _e = undefined;
|
|
|
|
try {
|
|
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
_arr.push(_s.value);
|
|
|
|
if (i && _arr.length === i) break;
|
|
}
|
|
} catch (err) {
|
|
_d = true;
|
|
_e = err;
|
|
} finally {
|
|
try {
|
|
if (!_n && _i["return"]) _i["return"]();
|
|
} finally {
|
|
if (_d) throw _e;
|
|
}
|
|
}
|
|
|
|
return _arr;
|
|
}
|
|
|
|
return function (arr, i) {
|
|
if (Array.isArray(arr)) {
|
|
return arr;
|
|
} else if (Symbol.iterator in Object(arr)) {
|
|
return sliceIterator(arr, i);
|
|
} else {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
}
|
|
};
|
|
}();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var toConsumableArray = function (arr) {
|
|
if (Array.isArray(arr)) {
|
|
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
|
|
|
return arr2;
|
|
} else {
|
|
return Array.from(arr);
|
|
}
|
|
};
|
|
|
|
var GridCore = function (_React$PureComponent) {
|
|
inherits(GridCore, _React$PureComponent);
|
|
|
|
function GridCore() {
|
|
classCallCheck(this, GridCore);
|
|
return possibleConstructorReturn(this, (GridCore.__proto__ || Object.getPrototypeOf(GridCore)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(GridCore, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
rows = _props.rows,
|
|
columns = _props.columns,
|
|
getRowId = _props.getRowId,
|
|
getCellValue = _props.getCellValue,
|
|
Root = _props.rootComponent;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
null,
|
|
React.createElement(Getter, { name: 'rows', value: rows }),
|
|
React.createElement(Getter, { name: 'getRowId', value: rowIdGetter(getRowId, rows) }),
|
|
React.createElement(Getter, { name: 'columns', value: columns }),
|
|
React.createElement(Getter, { name: 'getCellValue', value: cellValueGetter(getCellValue, columns) }),
|
|
React.createElement(Template, { name: 'header' }),
|
|
React.createElement(Template, { name: 'body' }),
|
|
React.createElement(Template, { name: 'footer' }),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'root' },
|
|
React.createElement(
|
|
Root,
|
|
null,
|
|
React.createElement(TemplatePlaceholder, { name: 'header' }),
|
|
React.createElement(TemplatePlaceholder, { name: 'body' }),
|
|
React.createElement(TemplatePlaceholder, { name: 'footer' })
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return GridCore;
|
|
}(React.PureComponent);
|
|
|
|
GridCore.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
getRowId: PropTypes.func,
|
|
getCellValue: PropTypes.func,
|
|
columns: PropTypes.array.isRequired,
|
|
rootComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
GridCore.defaultProps = {
|
|
getRowId: undefined,
|
|
getCellValue: undefined
|
|
};
|
|
|
|
var Grid = function Grid(_ref) {
|
|
var rows = _ref.rows,
|
|
columns = _ref.columns,
|
|
getRowId = _ref.getRowId,
|
|
getCellValue = _ref.getCellValue,
|
|
rootComponent = _ref.rootComponent,
|
|
children = _ref.children;
|
|
return React.createElement(
|
|
PluginHost,
|
|
null,
|
|
React.createElement(GridCore, {
|
|
rows: rows,
|
|
columns: columns,
|
|
getRowId: getRowId,
|
|
getCellValue: getCellValue,
|
|
rootComponent: rootComponent
|
|
}),
|
|
children
|
|
);
|
|
};
|
|
|
|
Grid.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
getRowId: PropTypes.func,
|
|
getCellValue: PropTypes.func,
|
|
columns: PropTypes.array.isRequired,
|
|
rootComponent: PropTypes.func.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
|
};
|
|
|
|
Grid.defaultProps = {
|
|
getRowId: undefined,
|
|
getCellValue: undefined,
|
|
children: undefined
|
|
};
|
|
|
|
var pluginDependencies = [{ name: 'TableColumnVisibility' }, { name: 'Toolbar' }];
|
|
var ColumnChooser = function (_React$PureComponent) {
|
|
inherits(ColumnChooser, _React$PureComponent);
|
|
|
|
function ColumnChooser(props) {
|
|
classCallCheck(this, ColumnChooser);
|
|
|
|
var _this = possibleConstructorReturn(this, (ColumnChooser.__proto__ || Object.getPrototypeOf(ColumnChooser)).call(this, props));
|
|
|
|
_this.state = {
|
|
visible: false
|
|
};
|
|
|
|
_this.handleToggle = _this.handleToggle.bind(_this);
|
|
_this.handleHide = _this.handleHide.bind(_this);
|
|
_this.buttonRef = _this.buttonRef.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(ColumnChooser, [{
|
|
key: 'buttonRef',
|
|
value: function buttonRef(button) {
|
|
this.button = button;
|
|
}
|
|
}, {
|
|
key: 'handleToggle',
|
|
value: function handleToggle() {
|
|
this.setState({ visible: !this.state.visible });
|
|
}
|
|
}, {
|
|
key: 'handleHide',
|
|
value: function handleHide() {
|
|
this.setState({ visible: false });
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
Overlay = _props.overlayComponent,
|
|
Container = _props.containerComponent,
|
|
Item = _props.itemComponent,
|
|
ToggleButton = _props.toggleButtonComponent,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
var visible = this.state.visible;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'ColumnChooser',
|
|
dependencies: pluginDependencies
|
|
},
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'toolbarContent' },
|
|
React.createElement(TemplatePlaceholder, null),
|
|
React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref, _ref2) {
|
|
var columns = _ref.columns,
|
|
hiddenColumnNames = _ref.hiddenColumnNames;
|
|
var toggleColumnVisibility = _ref2.toggleColumnVisibility;
|
|
return React.createElement(
|
|
React.Fragment,
|
|
null,
|
|
React.createElement(ToggleButton, {
|
|
buttonRef: _this2.buttonRef,
|
|
onToggle: _this2.handleToggle,
|
|
getMessage: getMessage
|
|
}),
|
|
React.createElement(
|
|
Overlay,
|
|
{
|
|
visible: visible,
|
|
target: _this2.button,
|
|
onHide: _this2.handleHide
|
|
},
|
|
React.createElement(
|
|
Container,
|
|
null,
|
|
columnChooserItems(columns, hiddenColumnNames).map(function (item) {
|
|
return React.createElement(Item, {
|
|
key: item.column.name,
|
|
item: item,
|
|
onToggle: function onToggle() {
|
|
return toggleColumnVisibility(item.column.name);
|
|
}
|
|
});
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return ColumnChooser;
|
|
}(React.PureComponent);
|
|
|
|
ColumnChooser.propTypes = {
|
|
overlayComponent: PropTypes.func.isRequired,
|
|
containerComponent: PropTypes.func.isRequired,
|
|
itemComponent: PropTypes.func.isRequired,
|
|
toggleButtonComponent: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
ColumnChooser.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var STATE_CONSISTENCY_TIMEOUT = 1000 / 60;
|
|
|
|
var createStateHelper = function createStateHelper(component) {
|
|
var controlledStateProperties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
var stateConsistencyTimers = {};
|
|
var checkStateConsistency = function checkStateConsistency(propertyName) {
|
|
if (component.props[propertyName] !== undefined && component.props[propertyName] !== component.state[propertyName]) {
|
|
component.setState(defineProperty({}, propertyName, component.props[propertyName]));
|
|
}
|
|
};
|
|
var notifyStateChange = function notifyStateChange(nextState, state) {
|
|
Object.keys(controlledStateProperties).forEach(function (propertyName) {
|
|
var changeEvent = controlledStateProperties[propertyName]();
|
|
if (changeEvent && nextState[propertyName] !== state[propertyName]) {
|
|
changeEvent(nextState[propertyName]);
|
|
clearTimeout(stateConsistencyTimers[propertyName]);
|
|
stateConsistencyTimers[propertyName] = setTimeout(checkStateConsistency.bind(null, propertyName), STATE_CONSISTENCY_TIMEOUT);
|
|
}
|
|
});
|
|
};
|
|
|
|
var lastStateUpdater = null;
|
|
var initialState = null;
|
|
var applyReducer = function applyReducer(reduce, payload, callback) {
|
|
var stateUpdater = function stateUpdater(prevState) {
|
|
if (initialState === null) {
|
|
initialState = prevState;
|
|
}
|
|
var stateChange = reduce(_extends({}, prevState), payload);
|
|
var state = _extends({}, prevState, stateChange);
|
|
|
|
if (typeof callback === 'function') {
|
|
callback(state, prevState);
|
|
}
|
|
if (stateUpdater === lastStateUpdater) {
|
|
notifyStateChange(state, initialState);
|
|
initialState = null;
|
|
}
|
|
|
|
return stateChange;
|
|
};
|
|
lastStateUpdater = stateUpdater;
|
|
component.setState(stateUpdater);
|
|
};
|
|
var applyFieldReducer = function applyFieldReducer(field, reduce, payload) {
|
|
applyReducer(function (state) {
|
|
return defineProperty({}, field, reduce(state[field], payload));
|
|
});
|
|
};
|
|
|
|
return {
|
|
applyReducer: applyReducer,
|
|
applyFieldReducer: applyFieldReducer
|
|
};
|
|
};
|
|
|
|
var FilteringState = function (_React$PureComponent) {
|
|
inherits(FilteringState, _React$PureComponent);
|
|
|
|
function FilteringState(props) {
|
|
classCallCheck(this, FilteringState);
|
|
|
|
var _this = possibleConstructorReturn(this, (FilteringState.__proto__ || Object.getPrototypeOf(FilteringState)).call(this, props));
|
|
|
|
_this.state = {
|
|
filters: props.filters || props.defaultFilters
|
|
};
|
|
var stateHelper = createStateHelper(_this, {
|
|
filters: function filters() {
|
|
return _this.props.onFiltersChange;
|
|
}
|
|
});
|
|
|
|
_this.changeColumnFilter = stateHelper.applyFieldReducer.bind(stateHelper, 'filters', changeColumnFilter);
|
|
return _this;
|
|
}
|
|
|
|
createClass(FilteringState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var filters = nextProps.filters;
|
|
|
|
this.setState(_extends({}, filters !== undefined ? { filters: filters } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var filters = this.state.filters;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'FilteringState'
|
|
},
|
|
React.createElement(Getter, { name: 'filters', value: filters }),
|
|
React.createElement(Action, { name: 'changeColumnFilter', action: this.changeColumnFilter })
|
|
);
|
|
}
|
|
}]);
|
|
return FilteringState;
|
|
}(React.PureComponent);
|
|
|
|
FilteringState.propTypes = {
|
|
filters: PropTypes.array,
|
|
defaultFilters: PropTypes.array,
|
|
onFiltersChange: PropTypes.func
|
|
};
|
|
|
|
FilteringState.defaultProps = {
|
|
filters: undefined,
|
|
defaultFilters: [],
|
|
onFiltersChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$1 = [{ name: 'FilteringState' }];
|
|
|
|
var IntegratedFiltering = function (_React$PureComponent) {
|
|
inherits(IntegratedFiltering, _React$PureComponent);
|
|
|
|
function IntegratedFiltering() {
|
|
classCallCheck(this, IntegratedFiltering);
|
|
return possibleConstructorReturn(this, (IntegratedFiltering.__proto__ || Object.getPrototypeOf(IntegratedFiltering)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(IntegratedFiltering, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var columnExtensions = this.props.columnExtensions;
|
|
|
|
var getColumnPredicate = function getColumnPredicate(columnName) {
|
|
return getColumnExtension(columnExtensions, columnName).predicate;
|
|
};
|
|
|
|
var rowsComputed = function rowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
filters = _ref.filters,
|
|
getCellValue = _ref.getCellValue,
|
|
isGroupRow = _ref.isGroupRow,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return filteredRows(rows, filters, getCellValue, getColumnPredicate, isGroupRow, getRowLevelKey);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'IntegratedFiltering',
|
|
dependencies: pluginDependencies$1
|
|
},
|
|
React.createElement(Getter, { name: 'rows', computed: rowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return IntegratedFiltering;
|
|
}(React.PureComponent);
|
|
|
|
IntegratedFiltering.propTypes = {
|
|
columnExtensions: PropTypes.array
|
|
};
|
|
|
|
IntegratedFiltering.defaultProps = {
|
|
columnExtensions: undefined
|
|
};
|
|
|
|
var EditingState = function (_React$PureComponent) {
|
|
inherits(EditingState, _React$PureComponent);
|
|
|
|
function EditingState(props) {
|
|
classCallCheck(this, EditingState);
|
|
|
|
var _this = possibleConstructorReturn(this, (EditingState.__proto__ || Object.getPrototypeOf(EditingState)).call(this, props));
|
|
|
|
_this.state = {
|
|
editingRowIds: props.editingRowIds || props.defaultEditingRowIds,
|
|
addedRows: props.addedRows || props.defaultAddedRows,
|
|
rowChanges: props.rowChanges || props.defaultRowChanges,
|
|
deletedRowIds: props.deletedRowIds || props.defaultDeletedRowIds
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
editingRowIds: function editingRowIds() {
|
|
return _this.props.onEditingRowIdsChange;
|
|
},
|
|
addedRows: function addedRows() {
|
|
return _this.props.onAddedRowsChange;
|
|
},
|
|
rowChanges: function rowChanges() {
|
|
return _this.props.onRowChangesChange;
|
|
},
|
|
deletedRowIds: function deletedRowIds() {
|
|
return _this.props.onDeletedRowIdsChange;
|
|
}
|
|
});
|
|
|
|
_this.startEditRows = stateHelper.applyFieldReducer.bind(stateHelper, 'editingRowIds', startEditRows);
|
|
_this.stopEditRows = stateHelper.applyFieldReducer.bind(stateHelper, 'editingRowIds', stopEditRows);
|
|
|
|
_this.changeRow = stateHelper.applyFieldReducer.bind(stateHelper, 'rowChanges', changeRow);
|
|
_this.cancelChangedRows = stateHelper.applyFieldReducer.bind(stateHelper, 'rowChanges', cancelChanges);
|
|
_this.commitChangedRows = function (_ref) {
|
|
var rowIds = _ref.rowIds;
|
|
|
|
_this.props.onCommitChanges({
|
|
changed: changedRowsByIds(_this.state.rowChanges, 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 (_ref2) {
|
|
var rowIds = _ref2.rowIds;
|
|
|
|
_this.props.onCommitChanges({
|
|
added: addedRowsByIds(_this.state.addedRows, rowIds)
|
|
});
|
|
_this.cancelAddedRows({ rowIds: rowIds });
|
|
};
|
|
|
|
_this.deleteRows = stateHelper.applyFieldReducer.bind(stateHelper, 'deletedRowIds', deleteRows);
|
|
_this.cancelDeletedRows = stateHelper.applyFieldReducer.bind(stateHelper, 'deletedRowIds', cancelDeletedRows);
|
|
_this.commitDeletedRows = function (_ref3) {
|
|
var rowIds = _ref3.rowIds;
|
|
|
|
_this.props.onCommitChanges({ deleted: rowIds });
|
|
_this.cancelDeletedRows({ rowIds: rowIds });
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(EditingState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var editingRowIds = nextProps.editingRowIds,
|
|
rowChanges = nextProps.rowChanges,
|
|
addedRows = nextProps.addedRows,
|
|
deletedRowIds = nextProps.deletedRowIds;
|
|
|
|
this.setState(_extends({}, editingRowIds !== undefined ? { editingRowIds: editingRowIds } : null, rowChanges !== undefined ? { rowChanges: rowChanges } : null, addedRows !== undefined ? { addedRows: addedRows } : null, deletedRowIds !== undefined ? { deletedRowIds: deletedRowIds } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
createRowChange = _props.createRowChange,
|
|
columnExtensions = _props.columnExtensions;
|
|
var _state = this.state,
|
|
editingRowIds = _state.editingRowIds,
|
|
rowChanges = _state.rowChanges,
|
|
addedRows = _state.addedRows,
|
|
deletedRowIds = _state.deletedRowIds;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'EditingState'
|
|
},
|
|
React.createElement(Getter, {
|
|
name: 'createRowChange',
|
|
value: createRowChangeGetter(createRowChange, columnExtensions)
|
|
}),
|
|
React.createElement(Getter, { name: 'editingRowIds', value: editingRowIds }),
|
|
React.createElement(Action, { name: 'startEditRows', action: this.startEditRows }),
|
|
React.createElement(Action, { name: 'stopEditRows', action: this.stopEditRows }),
|
|
React.createElement(Getter, { name: 'rowChanges', value: rowChanges }),
|
|
React.createElement(Action, { name: 'changeRow', action: this.changeRow }),
|
|
React.createElement(Action, { name: 'cancelChangedRows', action: this.cancelChangedRows }),
|
|
React.createElement(Action, { name: 'commitChangedRows', action: this.commitChangedRows }),
|
|
React.createElement(Getter, { name: 'addedRows', value: addedRows }),
|
|
React.createElement(Action, { name: 'addRow', action: this.addRow }),
|
|
React.createElement(Action, { name: 'changeAddedRow', action: this.changeAddedRow }),
|
|
React.createElement(Action, { name: 'cancelAddedRows', action: this.cancelAddedRows }),
|
|
React.createElement(Action, { name: 'commitAddedRows', action: this.commitAddedRows }),
|
|
React.createElement(Getter, { name: 'deletedRowIds', value: deletedRowIds }),
|
|
React.createElement(Action, { name: 'deleteRows', action: this.deleteRows }),
|
|
React.createElement(Action, { name: 'cancelDeletedRows', action: this.cancelDeletedRows }),
|
|
React.createElement(Action, { name: 'commitDeletedRows', action: this.commitDeletedRows })
|
|
);
|
|
}
|
|
}]);
|
|
return EditingState;
|
|
}(React.PureComponent);
|
|
|
|
EditingState.propTypes = {
|
|
createRowChange: PropTypes.func,
|
|
columnExtensions: PropTypes.array,
|
|
|
|
editingRowIds: PropTypes.array,
|
|
defaultEditingRowIds: PropTypes.array,
|
|
onEditingRowIdsChange: PropTypes.func,
|
|
|
|
addedRows: PropTypes.array,
|
|
defaultAddedRows: PropTypes.array,
|
|
onAddedRowsChange: PropTypes.func,
|
|
|
|
rowChanges: PropTypes.object,
|
|
defaultRowChanges: PropTypes.object,
|
|
onRowChangesChange: PropTypes.func,
|
|
|
|
deletedRowIds: PropTypes.array,
|
|
defaultDeletedRowIds: PropTypes.array,
|
|
onDeletedRowIdsChange: PropTypes.func,
|
|
|
|
onCommitChanges: PropTypes.func.isRequired
|
|
};
|
|
|
|
EditingState.defaultProps = {
|
|
createRowChange: undefined,
|
|
columnExtensions: undefined,
|
|
|
|
editingRowIds: undefined,
|
|
defaultEditingRowIds: [],
|
|
onEditingRowIdsChange: undefined,
|
|
|
|
rowChanges: undefined,
|
|
defaultRowChanges: {},
|
|
onRowChangesChange: undefined,
|
|
|
|
addedRows: undefined,
|
|
defaultAddedRows: [],
|
|
onAddedRowsChange: undefined,
|
|
|
|
deletedRowIds: undefined,
|
|
defaultDeletedRowIds: [],
|
|
onDeletedRowIdsChange: undefined
|
|
};
|
|
|
|
var PagingState = function (_React$PureComponent) {
|
|
inherits(PagingState, _React$PureComponent);
|
|
|
|
function PagingState(props) {
|
|
classCallCheck(this, PagingState);
|
|
|
|
var _this = possibleConstructorReturn(this, (PagingState.__proto__ || Object.getPrototypeOf(PagingState)).call(this, props));
|
|
|
|
_this.state = {
|
|
currentPage: props.currentPage || props.defaultCurrentPage,
|
|
pageSize: props.pageSize !== undefined ? props.pageSize : props.defaultPageSize
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
currentPage: function currentPage() {
|
|
return _this.props.onCurrentPageChange;
|
|
},
|
|
pageSize: function pageSize() {
|
|
return _this.props.onPageSizeChange;
|
|
}
|
|
});
|
|
|
|
_this.setCurrentPage = stateHelper.applyFieldReducer.bind(stateHelper, 'currentPage', setCurrentPage);
|
|
_this.setPageSize = stateHelper.applyFieldReducer.bind(stateHelper, 'pageSize', setPageSize);
|
|
return _this;
|
|
}
|
|
|
|
createClass(PagingState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var currentPage = nextProps.currentPage,
|
|
pageSize = nextProps.pageSize;
|
|
|
|
this.setState(_extends({}, currentPage !== undefined ? { currentPage: currentPage } : null, pageSize !== undefined ? { pageSize: pageSize } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _state = this.state,
|
|
pageSize = _state.pageSize,
|
|
currentPage = _state.currentPage;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'PagingState'
|
|
},
|
|
React.createElement(Getter, { name: 'currentPage', value: currentPage }),
|
|
React.createElement(Getter, { name: 'pageSize', value: pageSize }),
|
|
React.createElement(Action, { name: 'setCurrentPage', action: this.setCurrentPage }),
|
|
React.createElement(Action, { name: 'setPageSize', action: this.setPageSize })
|
|
);
|
|
}
|
|
}]);
|
|
return PagingState;
|
|
}(React.PureComponent);
|
|
|
|
PagingState.propTypes = {
|
|
pageSize: PropTypes.number,
|
|
defaultPageSize: PropTypes.number,
|
|
onPageSizeChange: PropTypes.func,
|
|
currentPage: PropTypes.number,
|
|
defaultCurrentPage: PropTypes.number,
|
|
onCurrentPageChange: PropTypes.func
|
|
};
|
|
|
|
PagingState.defaultProps = {
|
|
pageSize: undefined,
|
|
defaultPageSize: 10,
|
|
onPageSizeChange: undefined,
|
|
currentPage: undefined,
|
|
defaultCurrentPage: 0,
|
|
onCurrentPageChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$2 = [{ name: 'PagingState' }];
|
|
|
|
var clamp = function clamp(value, max) {
|
|
return Math.max(Math.min(value, max), 0);
|
|
};
|
|
|
|
var rowsWithHeadersComputed = function rowsWithHeadersComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
pageSize = _ref.pageSize,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return rowsWithPageHeaders(rows, pageSize, getRowLevelKey);
|
|
};
|
|
var totalCountComputed = function totalCountComputed(_ref2) {
|
|
var rows = _ref2.rows;
|
|
return rowCount(rows);
|
|
};
|
|
var paginatedRowsComputed = function paginatedRowsComputed(_ref3) {
|
|
var rows = _ref3.rows,
|
|
pageSize = _ref3.pageSize,
|
|
currentPage = _ref3.currentPage;
|
|
return paginatedRows(rows, pageSize, currentPage);
|
|
};
|
|
var currentPageComputed = function currentPageComputed(_ref4, _ref5) {
|
|
var currentPage = _ref4.currentPage,
|
|
totalCount = _ref4.totalCount,
|
|
pageSize = _ref4.pageSize;
|
|
var setCurrentPage$$1 = _ref5.setCurrentPage;
|
|
|
|
var totalPages = pageCount(totalCount, pageSize);
|
|
var adjustedCurrentPage = clamp(currentPage, totalPages - 1);
|
|
if (currentPage !== adjustedCurrentPage) {
|
|
setTimeout(function () {
|
|
return setCurrentPage$$1(adjustedCurrentPage);
|
|
});
|
|
}
|
|
return adjustedCurrentPage;
|
|
};
|
|
|
|
// eslint-disable-next-line react/prefer-stateless-function
|
|
var IntegratedPaging = function (_React$PureComponent) {
|
|
inherits(IntegratedPaging, _React$PureComponent);
|
|
|
|
function IntegratedPaging() {
|
|
classCallCheck(this, IntegratedPaging);
|
|
return possibleConstructorReturn(this, (IntegratedPaging.__proto__ || Object.getPrototypeOf(IntegratedPaging)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(IntegratedPaging, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'IntegratedPaging',
|
|
dependencies: pluginDependencies$2
|
|
},
|
|
React.createElement(Getter, { name: 'rows', computed: rowsWithHeadersComputed }),
|
|
React.createElement(Getter, { name: 'totalCount', computed: totalCountComputed }),
|
|
React.createElement(Getter, { name: 'currentPage', computed: currentPageComputed }),
|
|
React.createElement(Getter, { name: 'rows', computed: paginatedRowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return IntegratedPaging;
|
|
}(React.PureComponent);
|
|
|
|
var pluginDependencies$3 = [{ name: 'PagingState' }];
|
|
|
|
var CustomPaging = function (_React$PureComponent) {
|
|
inherits(CustomPaging, _React$PureComponent);
|
|
|
|
function CustomPaging() {
|
|
classCallCheck(this, CustomPaging);
|
|
return possibleConstructorReturn(this, (CustomPaging.__proto__ || Object.getPrototypeOf(CustomPaging)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(CustomPaging, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var totalCount = this.props.totalCount;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'CustomPaging',
|
|
dependencies: pluginDependencies$3
|
|
},
|
|
React.createElement(Getter, { name: 'totalCount', value: totalCount })
|
|
);
|
|
}
|
|
}]);
|
|
return CustomPaging;
|
|
}(React.PureComponent);
|
|
|
|
CustomPaging.propTypes = {
|
|
totalCount: PropTypes.number
|
|
};
|
|
|
|
CustomPaging.defaultProps = {
|
|
totalCount: 0
|
|
};
|
|
|
|
var dependencies = [{ name: 'SortingState', optional: true }];
|
|
|
|
var adjustSortIndex = function adjustSortIndex(sortIndex, grouping, sorting) {
|
|
return Math.max(grouping.slice(0, sortIndex).reduce(function (acc, columnGrouping) {
|
|
var columnSortingIndex = sorting.findIndex(function (columnSorting) {
|
|
return columnSorting.columnName === columnGrouping.columnName;
|
|
});
|
|
return columnSortingIndex === -1 ? acc - 1 : acc;
|
|
}, sortIndex), 0);
|
|
};
|
|
|
|
var GroupingState = function (_React$PureComponent) {
|
|
inherits(GroupingState, _React$PureComponent);
|
|
|
|
function GroupingState(props) {
|
|
classCallCheck(this, GroupingState);
|
|
|
|
var _this = possibleConstructorReturn(this, (GroupingState.__proto__ || Object.getPrototypeOf(GroupingState)).call(this, props));
|
|
|
|
_this.state = {
|
|
grouping: props.grouping || props.defaultGrouping,
|
|
draftGrouping: null,
|
|
expandedGroups: props.expandedGroups || props.defaultExpandedGroups
|
|
};
|
|
|
|
_this.stateHelper = createStateHelper(_this, {
|
|
grouping: function grouping() {
|
|
return _this.props.onGroupingChange;
|
|
},
|
|
expandedGroups: function expandedGroups() {
|
|
return _this.props.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;
|
|
}
|
|
|
|
createClass(GroupingState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var grouping = nextProps.grouping,
|
|
expandedGroups = nextProps.expandedGroups;
|
|
|
|
this.setState(_extends({}, grouping !== undefined ? { grouping: grouping } : null, expandedGroups !== undefined ? { expandedGroups: expandedGroups } : null));
|
|
}
|
|
}, {
|
|
key: 'changeColumnSorting',
|
|
value: function changeColumnSorting$$1(_ref, _ref2, _ref3) {
|
|
var sorting = _ref2.sorting;
|
|
var _changeColumnSorting = _ref3.changeColumnSorting;
|
|
var columnName = _ref.columnName,
|
|
keepOther = _ref.keepOther,
|
|
restParams = objectWithoutProperties(_ref, ['columnName', 'keepOther']);
|
|
var grouping = this.state.grouping;
|
|
|
|
var groupingIndex = grouping.findIndex(function (columnGrouping) {
|
|
return columnGrouping.columnName === columnName;
|
|
});
|
|
if (groupingIndex === -1) {
|
|
_changeColumnSorting(_extends({
|
|
columnName: columnName,
|
|
keepOther: keepOther || grouping.map(function (columnGrouping) {
|
|
return columnGrouping.columnName;
|
|
})
|
|
}, restParams));
|
|
return false;
|
|
}
|
|
|
|
var sortIndex = adjustSortIndex(groupingIndex, grouping, sorting);
|
|
_changeColumnSorting(_extends({
|
|
columnName: columnName,
|
|
keepOther: true,
|
|
sortIndex: sortIndex
|
|
}, restParams));
|
|
return false;
|
|
}
|
|
}, {
|
|
key: 'changeColumnGrouping',
|
|
value: function changeColumnGrouping$$1(_ref4, getters, actions) {
|
|
var columnName = _ref4.columnName,
|
|
groupIndex = _ref4.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$$1 = 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$$1(_extends({
|
|
keepOther: true,
|
|
sortIndex: sortIndex
|
|
}, sorting[columnSortingIndex]));
|
|
});
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _state = this.state,
|
|
grouping = _state.grouping,
|
|
draftGrouping = _state.draftGrouping,
|
|
expandedGroups = _state.expandedGroups;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'GroupingState',
|
|
dependencies: dependencies
|
|
},
|
|
React.createElement(Getter, { name: 'grouping', value: grouping }),
|
|
React.createElement(Getter, { name: 'draftGrouping', value: draftGrouping || grouping }),
|
|
React.createElement(Action, { name: 'changeColumnGrouping', action: this.changeColumnGrouping }),
|
|
React.createElement(Action, { name: 'draftColumnGrouping', action: this.draftColumnGrouping }),
|
|
React.createElement(Action, { name: 'cancelColumnGroupingDraft', action: this.cancelColumnGroupingDraft }),
|
|
React.createElement(Getter, { name: 'expandedGroups', value: expandedGroups }),
|
|
React.createElement(Action, { name: 'toggleGroupExpanded', action: this.toggleGroupExpanded }),
|
|
React.createElement(Action, { name: 'changeColumnSorting', action: this.changeColumnSorting })
|
|
);
|
|
}
|
|
}]);
|
|
return GroupingState;
|
|
}(React.PureComponent);
|
|
|
|
GroupingState.propTypes = {
|
|
grouping: PropTypes.array,
|
|
defaultGrouping: PropTypes.array,
|
|
onGroupingChange: PropTypes.func,
|
|
expandedGroups: PropTypes.array,
|
|
defaultExpandedGroups: PropTypes.array,
|
|
onExpandedGroupsChange: PropTypes.func
|
|
};
|
|
|
|
GroupingState.defaultProps = {
|
|
grouping: undefined,
|
|
defaultGrouping: [],
|
|
onGroupingChange: undefined,
|
|
expandedGroups: undefined,
|
|
defaultExpandedGroups: [],
|
|
onExpandedGroupsChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$4 = [{ name: 'GroupingState' }];
|
|
|
|
var expandedGroupedRowsComputed = function expandedGroupedRowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
grouping = _ref.grouping,
|
|
expandedGroups = _ref.expandedGroups;
|
|
return expandedGroupRows(rows, grouping, expandedGroups);
|
|
};
|
|
|
|
var IntegratedGrouping = function (_React$PureComponent) {
|
|
inherits(IntegratedGrouping, _React$PureComponent);
|
|
|
|
function IntegratedGrouping() {
|
|
classCallCheck(this, IntegratedGrouping);
|
|
return possibleConstructorReturn(this, (IntegratedGrouping.__proto__ || Object.getPrototypeOf(IntegratedGrouping)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(IntegratedGrouping, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var columnExtensions = this.props.columnExtensions;
|
|
|
|
var getColumnCriteria = function getColumnCriteria(columnName) {
|
|
return getColumnExtension(columnExtensions, columnName).criteria;
|
|
};
|
|
|
|
var groupedRowsComputed = function groupedRowsComputed(_ref2) {
|
|
var rows = _ref2.rows,
|
|
grouping = _ref2.grouping,
|
|
getCellValue = _ref2.getCellValue;
|
|
return groupedRows(rows, grouping, getCellValue, getColumnCriteria);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'IntegratedGrouping',
|
|
dependencies: pluginDependencies$4
|
|
},
|
|
React.createElement(Getter, { name: 'isGroupRow', value: groupRowChecker }),
|
|
React.createElement(Getter, { name: 'getRowLevelKey', value: groupRowLevelKeyGetter }),
|
|
React.createElement(Getter, { name: 'rows', computed: groupedRowsComputed }),
|
|
React.createElement(Getter, { name: 'rows', computed: expandedGroupedRowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return IntegratedGrouping;
|
|
}(React.PureComponent);
|
|
|
|
IntegratedGrouping.propTypes = {
|
|
columnExtensions: PropTypes.array
|
|
};
|
|
|
|
IntegratedGrouping.defaultProps = {
|
|
columnExtensions: undefined
|
|
};
|
|
|
|
var pluginDependencies$5 = [{ name: 'GroupingState' }];
|
|
|
|
var expandedGroupedRowsComputed$1 = function expandedGroupedRowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
grouping = _ref.grouping,
|
|
expandedGroups = _ref.expandedGroups;
|
|
return expandedGroupRows(rows, grouping, expandedGroups);
|
|
};
|
|
var getRowIdComputed = function getRowIdComputed(_ref2) {
|
|
var getRowId = _ref2.getRowId,
|
|
rows = _ref2.rows;
|
|
return customGroupingRowIdGetter(getRowId, rows);
|
|
};
|
|
|
|
var CustomGrouping = function (_React$PureComponent) {
|
|
inherits(CustomGrouping, _React$PureComponent);
|
|
|
|
function CustomGrouping() {
|
|
classCallCheck(this, CustomGrouping);
|
|
return possibleConstructorReturn(this, (CustomGrouping.__proto__ || Object.getPrototypeOf(CustomGrouping)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(CustomGrouping, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
getChildGroups = _props.getChildGroups,
|
|
appliedGrouping = _props.grouping,
|
|
appliedExpandedGroups = _props.expandedGroups;
|
|
|
|
var groupedRowsComputed = function groupedRowsComputed(_ref3) {
|
|
var rows = _ref3.rows,
|
|
grouping = _ref3.grouping;
|
|
return customGroupedRows(rows, grouping, getChildGroups);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'CustomGrouping',
|
|
dependencies: pluginDependencies$5
|
|
},
|
|
appliedGrouping && React.createElement(Getter, { name: 'grouping', value: appliedGrouping }),
|
|
appliedExpandedGroups && React.createElement(Getter, { name: 'expandedGroups', value: appliedExpandedGroups }),
|
|
React.createElement(Getter, { name: 'isGroupRow', value: groupRowChecker }),
|
|
React.createElement(Getter, { name: 'getRowLevelKey', value: groupRowLevelKeyGetter }),
|
|
React.createElement(Getter, { name: 'rows', computed: groupedRowsComputed }),
|
|
React.createElement(Getter, { name: 'getRowId', computed: getRowIdComputed }),
|
|
React.createElement(Getter, { name: 'rows', computed: expandedGroupedRowsComputed$1 })
|
|
);
|
|
}
|
|
}]);
|
|
return CustomGrouping;
|
|
}(React.PureComponent);
|
|
|
|
CustomGrouping.propTypes = {
|
|
getChildGroups: PropTypes.func.isRequired,
|
|
grouping: PropTypes.array,
|
|
expandedGroups: PropTypes.array
|
|
};
|
|
|
|
CustomGrouping.defaultProps = {
|
|
grouping: undefined,
|
|
expandedGroups: undefined
|
|
};
|
|
|
|
var SelectionState = function (_React$PureComponent) {
|
|
inherits(SelectionState, _React$PureComponent);
|
|
|
|
function SelectionState(props) {
|
|
classCallCheck(this, SelectionState);
|
|
|
|
var _this = possibleConstructorReturn(this, (SelectionState.__proto__ || Object.getPrototypeOf(SelectionState)).call(this, props));
|
|
|
|
_this.state = {
|
|
selection: props.selection || props.defaultSelection
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
selection: function selection() {
|
|
return _this.props.onSelectionChange;
|
|
}
|
|
});
|
|
|
|
_this.toggleSelection = stateHelper.applyFieldReducer.bind(stateHelper, 'selection', toggleSelection);
|
|
return _this;
|
|
}
|
|
|
|
createClass(SelectionState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var selection = nextProps.selection;
|
|
|
|
this.setState(_extends({}, selection !== undefined ? { selection: selection } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var selection = this.state.selection;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'SelectionState'
|
|
},
|
|
React.createElement(Getter, { name: 'selection', value: selection }),
|
|
React.createElement(Action, { name: 'toggleSelection', action: this.toggleSelection })
|
|
);
|
|
}
|
|
}]);
|
|
return SelectionState;
|
|
}(React.PureComponent);
|
|
|
|
SelectionState.propTypes = {
|
|
selection: PropTypes.array,
|
|
defaultSelection: PropTypes.array,
|
|
onSelectionChange: PropTypes.func
|
|
};
|
|
|
|
SelectionState.defaultProps = {
|
|
selection: undefined,
|
|
defaultSelection: [],
|
|
onSelectionChange: undefined
|
|
};
|
|
|
|
var rowsWithAvailableToSelectComputed = function rowsWithAvailableToSelectComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
getRowId = _ref.getRowId,
|
|
isGroupRow = _ref.isGroupRow;
|
|
return rowsWithAvailableToSelect(rows, getRowId, isGroupRow);
|
|
};
|
|
var allSelectedComputed = function allSelectedComputed(_ref2) {
|
|
var rows = _ref2.rows,
|
|
selection = _ref2.selection;
|
|
return allSelected(rows, selection);
|
|
};
|
|
var someSelectedComputed = function someSelectedComputed(_ref3) {
|
|
var rows = _ref3.rows,
|
|
selection = _ref3.selection;
|
|
return someSelected(rows, selection);
|
|
};
|
|
var selectAllAvailableComputed = function selectAllAvailableComputed(_ref4) {
|
|
var availableToSelect = _ref4.rows.availableToSelect;
|
|
return !!availableToSelect.length;
|
|
};
|
|
var toggleSelectAll = function toggleSelectAll(state, _ref5, _ref6) {
|
|
var availableToSelect = _ref5.rows.availableToSelect;
|
|
var toggleSelection$$1 = _ref6.toggleSelection;
|
|
|
|
toggleSelection$$1({ rowIds: availableToSelect, state: state });
|
|
};
|
|
var unwrapRowsComputed = function unwrapRowsComputed(_ref7) {
|
|
var rows = _ref7.rows;
|
|
return unwrapSelectedRows(rows);
|
|
};
|
|
|
|
var pluginDependencies$6 = [{ name: 'SelectionState' }];
|
|
|
|
// eslint-disable-next-line react/prefer-stateless-function
|
|
var IntegratedSelection = function (_React$PureComponent) {
|
|
inherits(IntegratedSelection, _React$PureComponent);
|
|
|
|
function IntegratedSelection() {
|
|
classCallCheck(this, IntegratedSelection);
|
|
return possibleConstructorReturn(this, (IntegratedSelection.__proto__ || Object.getPrototypeOf(IntegratedSelection)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(IntegratedSelection, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'IntegratedSelection',
|
|
dependencies: pluginDependencies$6
|
|
},
|
|
React.createElement(Getter, { name: 'rows', computed: rowsWithAvailableToSelectComputed }),
|
|
React.createElement(Getter, { name: 'allSelected', computed: allSelectedComputed }),
|
|
React.createElement(Getter, { name: 'someSelected', computed: someSelectedComputed }),
|
|
React.createElement(Getter, { name: 'selectAllAvailable', computed: selectAllAvailableComputed }),
|
|
React.createElement(Action, { name: 'toggleSelectAll', action: toggleSelectAll }),
|
|
React.createElement(Getter, { name: 'rows', computed: unwrapRowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return IntegratedSelection;
|
|
}(React.PureComponent);
|
|
|
|
var SortingState = function (_React$PureComponent) {
|
|
inherits(SortingState, _React$PureComponent);
|
|
|
|
function SortingState(props) {
|
|
classCallCheck(this, SortingState);
|
|
|
|
var _this = possibleConstructorReturn(this, (SortingState.__proto__ || Object.getPrototypeOf(SortingState)).call(this, props));
|
|
|
|
_this.state = {
|
|
sorting: props.sorting || props.defaultSorting
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
sorting: function sorting() {
|
|
return _this.props.onSortingChange;
|
|
}
|
|
});
|
|
|
|
_this.changeColumnSorting = stateHelper.applyReducer.bind(stateHelper, changeColumnSorting);
|
|
return _this;
|
|
}
|
|
|
|
createClass(SortingState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var sorting = nextProps.sorting;
|
|
|
|
this.setState(_extends({}, sorting !== undefined ? { sorting: sorting } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var sorting = this.state.sorting;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'SortingState'
|
|
},
|
|
React.createElement(Getter, { name: 'sorting', value: sorting }),
|
|
React.createElement(Action, { name: 'changeColumnSorting', action: this.changeColumnSorting })
|
|
);
|
|
}
|
|
}]);
|
|
return SortingState;
|
|
}(React.PureComponent);
|
|
|
|
SortingState.propTypes = {
|
|
sorting: PropTypes.array,
|
|
defaultSorting: PropTypes.array,
|
|
onSortingChange: PropTypes.func
|
|
};
|
|
|
|
SortingState.defaultProps = {
|
|
sorting: undefined,
|
|
defaultSorting: [],
|
|
onSortingChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$7 = [{ name: 'SortingState' }];
|
|
|
|
var IntegratedSorting = function (_React$PureComponent) {
|
|
inherits(IntegratedSorting, _React$PureComponent);
|
|
|
|
function IntegratedSorting() {
|
|
classCallCheck(this, IntegratedSorting);
|
|
return possibleConstructorReturn(this, (IntegratedSorting.__proto__ || Object.getPrototypeOf(IntegratedSorting)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(IntegratedSorting, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var columnExtensions = this.props.columnExtensions;
|
|
|
|
var getColumnCompare = function getColumnCompare(columnName) {
|
|
return getColumnExtension(columnExtensions, columnName).compare;
|
|
};
|
|
|
|
var rowsComputed = function rowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
sorting = _ref.sorting,
|
|
getCellValue = _ref.getCellValue,
|
|
isGroupRow = _ref.isGroupRow,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return sortedRows(rows, sorting, getCellValue, getColumnCompare, isGroupRow, getRowLevelKey);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'IntegratedSorting',
|
|
dependencies: pluginDependencies$7
|
|
},
|
|
React.createElement(Getter, { name: 'rows', computed: rowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return IntegratedSorting;
|
|
}(React.PureComponent);
|
|
|
|
IntegratedSorting.propTypes = {
|
|
columnExtensions: PropTypes.array
|
|
};
|
|
|
|
IntegratedSorting.defaultProps = {
|
|
columnExtensions: undefined
|
|
};
|
|
|
|
var getTargetColumns = function getTargetColumns(payload, columns) {
|
|
return payload.filter(function (item) {
|
|
return item.type === 'column';
|
|
}).map(function (item) {
|
|
return columns.find(function (column) {
|
|
return column.name === item.columnName;
|
|
});
|
|
});
|
|
};
|
|
|
|
var DragDropProvider$1 = function (_React$PureComponent) {
|
|
inherits(DragDropProvider$$1, _React$PureComponent);
|
|
|
|
function DragDropProvider$$1(props) {
|
|
classCallCheck(this, DragDropProvider$$1);
|
|
|
|
var _this = possibleConstructorReturn(this, (DragDropProvider$$1.__proto__ || Object.getPrototypeOf(DragDropProvider$$1)).call(this, props));
|
|
|
|
_this.state = {
|
|
payload: null,
|
|
clientOffset: null
|
|
};
|
|
|
|
_this.change = function (_ref) {
|
|
var payload = _ref.payload,
|
|
clientOffset = _ref.clientOffset;
|
|
return _this.setState({ payload: payload, clientOffset: clientOffset });
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(DragDropProvider$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Container = _props.containerComponent,
|
|
Column = _props.columnComponent;
|
|
var _state = this.state,
|
|
payload = _state.payload,
|
|
clientOffset = _state.clientOffset;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'DragDropProvider'
|
|
},
|
|
React.createElement(Getter, { name: 'draggingEnabled', value: true }),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'root' },
|
|
React.createElement(
|
|
DragDropProvider,
|
|
{
|
|
onChange: this.change
|
|
},
|
|
React.createElement(TemplatePlaceholder, null)
|
|
),
|
|
payload && React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref2) {
|
|
var columns = _ref2.columns;
|
|
return React.createElement(
|
|
Container,
|
|
{
|
|
clientOffset: clientOffset
|
|
},
|
|
getTargetColumns(payload, columns).map(function (column) {
|
|
return React.createElement(Column, {
|
|
key: column.name,
|
|
column: column
|
|
});
|
|
})
|
|
);
|
|
}
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return DragDropProvider$$1;
|
|
}(React.PureComponent);
|
|
|
|
DragDropProvider$1.propTypes = {
|
|
containerComponent: PropTypes.func.isRequired,
|
|
columnComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
var pluginDependencies$8 = [{ name: 'Table' }];
|
|
|
|
var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref) {
|
|
var tableHeaderRows = _ref.tableHeaderRows;
|
|
return tableHeaderRowsWithReordering(tableHeaderRows);
|
|
};
|
|
|
|
var TableColumnReordering = function (_React$PureComponent) {
|
|
inherits(TableColumnReordering, _React$PureComponent);
|
|
|
|
function TableColumnReordering(props) {
|
|
classCallCheck(this, TableColumnReordering);
|
|
|
|
var _this = possibleConstructorReturn(this, (TableColumnReordering.__proto__ || Object.getPrototypeOf(TableColumnReordering)).call(this, props));
|
|
|
|
_this.state = {
|
|
order: props.defaultOrder,
|
|
sourceColumnIndex: -1,
|
|
targetColumnIndex: -1
|
|
};
|
|
|
|
_this.onOver = _this.handleOver.bind(_this);
|
|
_this.onLeave = _this.handleLeave.bind(_this);
|
|
_this.onDrop = _this.handleDrop.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableColumnReordering, [{
|
|
key: 'getState',
|
|
value: function getState() {
|
|
var _props$order = this.props.order,
|
|
order = _props$order === undefined ? this.state.order : _props$order;
|
|
|
|
return _extends({}, this.state, {
|
|
order: order
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getDraftOrder',
|
|
value: function getDraftOrder() {
|
|
var _getState = this.getState(),
|
|
order = _getState.order,
|
|
sourceColumnIndex = _getState.sourceColumnIndex,
|
|
targetColumnIndex = _getState.targetColumnIndex;
|
|
|
|
return draftOrder(order, sourceColumnIndex, targetColumnIndex);
|
|
}
|
|
}, {
|
|
key: 'getAvailableColumns',
|
|
value: function getAvailableColumns() {
|
|
var _this2 = this;
|
|
|
|
return this.getDraftOrder().filter(function (columnName) {
|
|
return !!_this2.cellDimensionGetters[columnName];
|
|
});
|
|
}
|
|
}, {
|
|
key: 'cacheCellDimensions',
|
|
value: function cacheCellDimensions() {
|
|
var _this3 = this;
|
|
|
|
this.cellDimensions = this.cellDimensions && this.cellDimensions.length ? this.cellDimensions : this.getAvailableColumns().map(function (columnName) {
|
|
return _this3.cellDimensionGetters[columnName]();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'resetCellDimensions',
|
|
value: function resetCellDimensions() {
|
|
this.cellDimensions = [];
|
|
}
|
|
}, {
|
|
key: 'storeCellDimensionsGetter',
|
|
value: function storeCellDimensionsGetter(tableColumn, data) {
|
|
if (tableColumn.type === TABLE_DATA_TYPE) {
|
|
this.cellDimensionGetters[tableColumn.column.name] = data;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'handleOver',
|
|
value: function handleOver(_ref2) {
|
|
var payload = _ref2.payload,
|
|
x = _ref2.clientOffset.x;
|
|
|
|
var sourceColumnName = payload[0].columnName;
|
|
var availableColumns = this.getAvailableColumns();
|
|
var relativeSourceColumnIndex = availableColumns.indexOf(sourceColumnName);
|
|
|
|
if (relativeSourceColumnIndex === -1) return;
|
|
|
|
this.cacheCellDimensions();
|
|
var cellDimensions = this.cellDimensions;
|
|
|
|
|
|
var overlappedColumns = cellDimensions.filter(function (_ref3) {
|
|
var left = _ref3.left,
|
|
right = _ref3.right;
|
|
return left <= x && x <= right;
|
|
});
|
|
|
|
if (overlappedColumns.length > 1) return;
|
|
|
|
var relativeTargetIndex = getTableTargetColumnIndex(cellDimensions, relativeSourceColumnIndex, x);
|
|
|
|
if (relativeTargetIndex === -1) return;
|
|
|
|
var _getState2 = this.getState(),
|
|
prevSourceColumnIndex = _getState2.sourceColumnIndex,
|
|
prevTargetColumnIndex = _getState2.targetColumnIndex;
|
|
|
|
var draftOrder$$1 = this.getDraftOrder();
|
|
var targetColumnIndex = draftOrder$$1.indexOf(availableColumns[relativeTargetIndex]);
|
|
|
|
if (targetColumnIndex === prevTargetColumnIndex) return;
|
|
|
|
var sourceColumnIndex = prevSourceColumnIndex === -1 ? draftOrder$$1.indexOf(sourceColumnName) : prevSourceColumnIndex;
|
|
|
|
this.setState({
|
|
sourceColumnIndex: sourceColumnIndex,
|
|
targetColumnIndex: targetColumnIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: 'handleLeave',
|
|
value: function handleLeave() {
|
|
this.setState({
|
|
sourceColumnIndex: -1,
|
|
targetColumnIndex: -1
|
|
});
|
|
|
|
this.resetCellDimensions();
|
|
}
|
|
}, {
|
|
key: 'handleDrop',
|
|
value: function handleDrop() {
|
|
var _getState3 = this.getState(),
|
|
sourceColumnIndex = _getState3.sourceColumnIndex,
|
|
targetColumnIndex = _getState3.targetColumnIndex,
|
|
order = _getState3.order;
|
|
|
|
var onOrderChange = this.props.onOrderChange;
|
|
|
|
var nextOrder = changeColumnOrder(order, {
|
|
sourceColumnName: order[sourceColumnIndex],
|
|
targetColumnName: order[targetColumnIndex]
|
|
});
|
|
|
|
this.setState({
|
|
order: nextOrder,
|
|
sourceColumnIndex: -1,
|
|
targetColumnIndex: -1
|
|
});
|
|
|
|
if (onOrderChange) {
|
|
onOrderChange(nextOrder);
|
|
}
|
|
|
|
this.resetCellDimensions();
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _props = this.props,
|
|
Container = _props.tableContainerComponent,
|
|
Row = _props.rowComponent,
|
|
Cell = _props.cellComponent;
|
|
|
|
|
|
var columnsComputed = function columnsComputed(_ref4) {
|
|
var tableColumns = _ref4.tableColumns;
|
|
return orderedColumns(tableColumns, _this4.getDraftOrder());
|
|
};
|
|
|
|
this.cellDimensionGetters = {};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableColumnReordering',
|
|
dependencies: pluginDependencies$8
|
|
},
|
|
React.createElement(Getter, { name: 'tableColumns', computed: columnsComputed }),
|
|
React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'table' },
|
|
function (params) {
|
|
return React.createElement(
|
|
Container,
|
|
_extends({}, params, {
|
|
onOver: _this4.onOver,
|
|
onLeave: _this4.onLeave,
|
|
onDrop: _this4.onDrop
|
|
}),
|
|
React.createElement(TemplatePlaceholder, null)
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow;
|
|
return tableRow.type === TABLE_REORDERING_TYPE;
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Row, params);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow;
|
|
return tableRow.type === TABLE_REORDERING_TYPE;
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Cell, _extends({}, params, {
|
|
getCellDimensions: function getCellDimensions(fn) {
|
|
return _this4.storeCellDimensionsGetter(params.tableColumn, fn);
|
|
}
|
|
}));
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnReordering;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnReordering.propTypes = {
|
|
order: PropTypes.arrayOf(PropTypes.string),
|
|
defaultOrder: PropTypes.arrayOf(PropTypes.string),
|
|
onOrderChange: PropTypes.func,
|
|
tableContainerComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableColumnReordering.defaultProps = {
|
|
order: undefined,
|
|
defaultOrder: [],
|
|
onOrderChange: undefined
|
|
};
|
|
|
|
var RowPlaceholder = function RowPlaceholder(props) {
|
|
return React.createElement(TemplatePlaceholder, { name: 'tableRow', params: props });
|
|
};
|
|
var CellPlaceholder = function CellPlaceholder(props) {
|
|
return React.createElement(TemplatePlaceholder, { name: 'tableCell', params: props });
|
|
};
|
|
|
|
var tableHeaderRows = [];
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
getRowId = _ref.getRowId;
|
|
return tableRowsWithDataRows(rows, getRowId);
|
|
};
|
|
|
|
var pluginDependencies$9 = [{ name: 'DataTypeProvider', optional: true }];
|
|
|
|
var Table = function (_React$PureComponent) {
|
|
inherits(Table, _React$PureComponent);
|
|
|
|
function Table() {
|
|
classCallCheck(this, Table);
|
|
return possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Table, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Layout = _props.layoutComponent,
|
|
Cell = _props.cellComponent,
|
|
Row = _props.rowComponent,
|
|
NoDataRow = _props.noDataRowComponent,
|
|
NoDataCell = _props.noDataCellComponent,
|
|
StubCell = _props.stubCellComponent,
|
|
StubHeaderCell = _props.stubHeaderCellComponent,
|
|
columnExtensions = _props.columnExtensions,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref2) {
|
|
var columns = _ref2.columns;
|
|
return tableColumnsWithDataRows(columns, columnExtensions);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'Table',
|
|
dependencies: pluginDependencies$9
|
|
},
|
|
React.createElement(Getter, { name: 'tableHeaderRows', value: tableHeaderRows }),
|
|
React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'body' },
|
|
React.createElement(TemplatePlaceholder, { name: 'table' })
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'table' },
|
|
React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref3) {
|
|
var headerRows = _ref3.tableHeaderRows,
|
|
bodyRows = _ref3.tableBodyRows,
|
|
columns = _ref3.tableColumns;
|
|
return React.createElement(Layout, {
|
|
headerRows: headerRows,
|
|
bodyRows: bodyRows,
|
|
columns: columns,
|
|
rowComponent: RowPlaceholder,
|
|
cellComponent: CellPlaceholder
|
|
});
|
|
}
|
|
)
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'tableCell' },
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref4) {
|
|
var headerRows = _ref4.tableHeaderRows;
|
|
return isHeaderStubTableCell(params.tableRow, headerRows) ? React.createElement(StubHeaderCell, params) : React.createElement(StubCell, params);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow,
|
|
tableColumn = _ref5.tableColumn;
|
|
return isDataTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref6) {
|
|
var getCellValue = _ref6.getCellValue;
|
|
|
|
var columnName = params.tableColumn.column.name;
|
|
var value = getCellValue(params.tableRow.row, columnName);
|
|
return React.createElement(
|
|
TemplatePlaceholder,
|
|
{
|
|
name: 'valueFormatter',
|
|
params: {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column,
|
|
value: value
|
|
}
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
Cell,
|
|
_extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column,
|
|
value: value
|
|
}),
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow;
|
|
return isNoDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(NoDataCell, _extends({ getMessage: getMessage }, params));
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow;
|
|
return isDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Row, _extends({}, params, {
|
|
row: params.tableRow.row
|
|
}));
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref9) {
|
|
var tableRow = _ref9.tableRow;
|
|
return isNoDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(NoDataRow, params);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return Table;
|
|
}(React.PureComponent);
|
|
|
|
Table.propTypes = {
|
|
layoutComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
noDataCellComponent: PropTypes.func.isRequired,
|
|
noDataRowComponent: PropTypes.func.isRequired,
|
|
stubCellComponent: PropTypes.func.isRequired,
|
|
stubHeaderCellComponent: PropTypes.func.isRequired,
|
|
columnExtensions: PropTypes.array,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
Table.defaultProps = {
|
|
columnExtensions: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var TableSelection = function (_React$PureComponent) {
|
|
inherits(TableSelection, _React$PureComponent);
|
|
|
|
function TableSelection() {
|
|
classCallCheck(this, TableSelection);
|
|
return possibleConstructorReturn(this, (TableSelection.__proto__ || Object.getPrototypeOf(TableSelection)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableSelection, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
highlightRow = _props.highlightRow,
|
|
selectByRowClick = _props.selectByRowClick,
|
|
showSelectionColumn = _props.showSelectionColumn,
|
|
showSelectAll = _props.showSelectAll,
|
|
HeaderCell = _props.headerCellComponent,
|
|
Cell = _props.cellComponent,
|
|
Row = _props.rowComponent,
|
|
selectionColumnWidth = _props.selectionColumnWidth;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return tableColumnsWithSelection(tableColumns, selectionColumnWidth);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableSelection',
|
|
dependencies: [{ name: 'Table' }, { name: 'SelectionState' }, { name: 'IntegratedSelection', optional: !showSelectAll }]
|
|
},
|
|
showSelectionColumn && React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
showSelectionColumn && showSelectAll && React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref2) {
|
|
var tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn;
|
|
return isSelectAllTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref3, _ref4) {
|
|
var selectAllAvailable = _ref3.selectAllAvailable,
|
|
allSelected$$1 = _ref3.allSelected,
|
|
someSelected$$1 = _ref3.someSelected;
|
|
var toggleSelectAll = _ref4.toggleSelectAll;
|
|
return React.createElement(HeaderCell, _extends({}, params, {
|
|
disabled: !selectAllAvailable,
|
|
allSelected: allSelected$$1,
|
|
someSelected: someSelected$$1,
|
|
onToggle: function onToggle(select) {
|
|
return toggleSelectAll(select);
|
|
}
|
|
}));
|
|
}
|
|
);
|
|
}
|
|
),
|
|
showSelectionColumn && React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow,
|
|
tableColumn = _ref5.tableColumn;
|
|
return isSelectTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref6, _ref7) {
|
|
var selection = _ref6.selection;
|
|
var toggleSelection$$1 = _ref7.toggleSelection;
|
|
return React.createElement(Cell, _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
selected: selection.indexOf(params.tableRow.rowId) !== -1,
|
|
onToggle: function onToggle() {
|
|
return toggleSelection$$1({ rowIds: [params.tableRow.rowId] });
|
|
}
|
|
}));
|
|
}
|
|
);
|
|
}
|
|
),
|
|
(highlightRow || selectByRowClick) && React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow;
|
|
return isDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref9, _ref10) {
|
|
var selection = _ref9.selection;
|
|
var toggleSelection$$1 = _ref10.toggleSelection;
|
|
return React.createElement(Row, _extends({}, params, {
|
|
selectByRowClick: true,
|
|
selected: highlightRow && selection.indexOf(params.tableRow.rowId) !== -1,
|
|
onToggle: function onToggle() {
|
|
return toggleSelection$$1({ rowIds: [params.tableRow.rowId] });
|
|
}
|
|
}));
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableSelection;
|
|
}(React.PureComponent);
|
|
|
|
TableSelection.propTypes = {
|
|
headerCellComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
highlightRow: PropTypes.bool,
|
|
selectByRowClick: PropTypes.bool,
|
|
showSelectAll: PropTypes.bool,
|
|
showSelectionColumn: PropTypes.bool,
|
|
selectionColumnWidth: PropTypes.number.isRequired
|
|
};
|
|
|
|
TableSelection.defaultProps = {
|
|
highlightRow: false,
|
|
selectByRowClick: false,
|
|
showSelectAll: false,
|
|
showSelectionColumn: true
|
|
};
|
|
|
|
var RowDetailState = function (_React$PureComponent) {
|
|
inherits(RowDetailState, _React$PureComponent);
|
|
|
|
function RowDetailState(props) {
|
|
classCallCheck(this, RowDetailState);
|
|
|
|
var _this = possibleConstructorReturn(this, (RowDetailState.__proto__ || Object.getPrototypeOf(RowDetailState)).call(this, props));
|
|
|
|
_this.state = {
|
|
expandedRowIds: props.expandedRowIds || props.defaultExpandedRowIds
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
expandedRowIds: function expandedRowIds() {
|
|
return _this.props.onExpandedRowIdsChange;
|
|
}
|
|
});
|
|
|
|
_this.toggleDetailRowExpanded = stateHelper.applyFieldReducer.bind(stateHelper, 'expandedRowIds', toggleDetailRowExpanded);
|
|
return _this;
|
|
}
|
|
|
|
createClass(RowDetailState, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var expandedRowIds = nextProps.expandedRowIds;
|
|
|
|
this.setState(_extends({}, expandedRowIds !== undefined ? { expandedRowIds: expandedRowIds } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var expandedRowIds = this.state.expandedRowIds;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'RowDetailState'
|
|
},
|
|
React.createElement(Getter, { name: 'expandedDetailRowIds', value: expandedRowIds }),
|
|
React.createElement(Action, { name: 'toggleDetailRowExpanded', action: this.toggleDetailRowExpanded })
|
|
);
|
|
}
|
|
}]);
|
|
return RowDetailState;
|
|
}(React.PureComponent);
|
|
|
|
RowDetailState.propTypes = {
|
|
expandedRowIds: PropTypes.array,
|
|
defaultExpandedRowIds: PropTypes.array,
|
|
onExpandedRowIdsChange: PropTypes.func
|
|
};
|
|
|
|
RowDetailState.defaultProps = {
|
|
expandedRowIds: undefined,
|
|
defaultExpandedRowIds: [],
|
|
onExpandedRowIdsChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$10 = [{ name: 'Table' }];
|
|
|
|
var TableRowDetail = function (_React$PureComponent) {
|
|
inherits(TableRowDetail, _React$PureComponent);
|
|
|
|
function TableRowDetail() {
|
|
classCallCheck(this, TableRowDetail);
|
|
return possibleConstructorReturn(this, (TableRowDetail.__proto__ || Object.getPrototypeOf(TableRowDetail)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableRowDetail, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
rowHeight = _props.rowHeight,
|
|
Content = _props.contentComponent,
|
|
ToggleCell = _props.toggleCellComponent,
|
|
Cell = _props.cellComponent,
|
|
Row = _props.rowComponent,
|
|
toggleColumnWidth = _props.toggleColumnWidth;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return tableColumnsWithDetail(tableColumns, toggleColumnWidth);
|
|
};
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref2) {
|
|
var tableBodyRows = _ref2.tableBodyRows,
|
|
expandedDetailRowIds = _ref2.expandedDetailRowIds;
|
|
return tableRowsWithExpandedDetail(tableBodyRows, expandedDetailRowIds, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableRowDetail',
|
|
dependencies: pluginDependencies$10
|
|
},
|
|
React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref3) {
|
|
var tableRow = _ref3.tableRow,
|
|
tableColumn = _ref3.tableColumn;
|
|
return isDetailToggleTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref4, _ref5) {
|
|
var expandedDetailRowIds = _ref4.expandedDetailRowIds;
|
|
var toggleDetailRowExpanded$$1 = _ref5.toggleDetailRowExpanded;
|
|
return React.createElement(ToggleCell, _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
expanded: isDetailRowExpanded(expandedDetailRowIds, params.tableRow.rowId),
|
|
onToggle: function onToggle() {
|
|
return toggleDetailRowExpanded$$1({ rowId: params.tableRow.rowId });
|
|
}
|
|
}));
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow;
|
|
return isDetailTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
Cell,
|
|
_extends({}, params, {
|
|
row: params.tableRow.row
|
|
}),
|
|
React.createElement(Content, { row: params.tableRow.row })
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow;
|
|
return isDetailTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Row, _extends({}, params, {
|
|
row: params.tableRow.row
|
|
}));
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableRowDetail;
|
|
}(React.PureComponent);
|
|
|
|
TableRowDetail.propTypes = {
|
|
contentComponent: PropTypes.func,
|
|
toggleCellComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
toggleColumnWidth: PropTypes.number.isRequired,
|
|
rowHeight: PropTypes.number
|
|
};
|
|
|
|
TableRowDetail.defaultProps = {
|
|
contentComponent: function contentComponent() {
|
|
return null;
|
|
},
|
|
rowHeight: undefined
|
|
};
|
|
|
|
var pluginDependencies$11 = [{ name: 'GroupingState' }, { name: 'Table' }, { name: 'DataTypeProvider', optional: true }];
|
|
|
|
var tableBodyRowsComputed$1 = function tableBodyRowsComputed(_ref) {
|
|
var tableBodyRows = _ref.tableBodyRows,
|
|
isGroupRow = _ref.isGroupRow;
|
|
return tableRowsWithGrouping(tableBodyRows, isGroupRow);
|
|
};
|
|
|
|
var showColumnWhenGroupedGetter = function showColumnWhenGroupedGetter(showColumnsWhenGrouped) {
|
|
var columnExtensions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
|
|
var map = columnExtensions.reduce(function (acc, columnExtension) {
|
|
acc[columnExtension.columnName] = columnExtension.showWhenGrouped;
|
|
return acc;
|
|
}, {});
|
|
|
|
return function (columnName) {
|
|
return map[columnName] || showColumnsWhenGrouped;
|
|
};
|
|
};
|
|
|
|
var TableGroupRow = function (_React$PureComponent) {
|
|
inherits(TableGroupRow, _React$PureComponent);
|
|
|
|
function TableGroupRow() {
|
|
classCallCheck(this, TableGroupRow);
|
|
return possibleConstructorReturn(this, (TableGroupRow.__proto__ || Object.getPrototypeOf(TableGroupRow)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableGroupRow, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
GroupCell = _props.cellComponent,
|
|
GroupRow = _props.rowComponent,
|
|
GroupIndentCell = _props.indentCellComponent,
|
|
indentColumnWidth = _props.indentColumnWidth,
|
|
showColumnsWhenGrouped = _props.showColumnsWhenGrouped,
|
|
columnExtensions = _props.columnExtensions;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref2) {
|
|
var columns = _ref2.columns,
|
|
tableColumns = _ref2.tableColumns,
|
|
grouping = _ref2.grouping,
|
|
draftGrouping = _ref2.draftGrouping;
|
|
return tableColumnsWithGrouping(columns, tableColumns, grouping, draftGrouping, indentColumnWidth, showColumnWhenGroupedGetter(showColumnsWhenGrouped, columnExtensions));
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableGroupRow',
|
|
dependencies: pluginDependencies$11
|
|
},
|
|
React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed$1 }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref3) {
|
|
var tableRow = _ref3.tableRow,
|
|
tableColumn = _ref3.tableColumn;
|
|
return isGroupTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref4, _ref5) {
|
|
var expandedGroups = _ref4.expandedGroups;
|
|
var toggleGroupExpanded = _ref5.toggleGroupExpanded;
|
|
return React.createElement(
|
|
TemplatePlaceholder,
|
|
{
|
|
name: 'valueFormatter',
|
|
params: {
|
|
column: params.tableColumn.column,
|
|
value: params.tableRow.row.value
|
|
}
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
GroupCell,
|
|
_extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column,
|
|
expanded: expandedGroups.indexOf(params.tableRow.row.compoundKey) !== -1,
|
|
onToggle: function onToggle() {
|
|
return toggleGroupExpanded({ groupKey: params.tableRow.row.compoundKey });
|
|
}
|
|
}),
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
GroupIndentCell && React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow,
|
|
tableColumn = _ref6.tableColumn;
|
|
return isGroupIndentTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(GroupIndentCell, _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column
|
|
}));
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow;
|
|
return isGroupTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(GroupRow, _extends({}, params, {
|
|
row: params.tableRow.row
|
|
}));
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableGroupRow;
|
|
}(React.PureComponent);
|
|
|
|
TableGroupRow.propTypes = {
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
indentCellComponent: PropTypes.func,
|
|
indentColumnWidth: PropTypes.number.isRequired,
|
|
showColumnsWhenGrouped: PropTypes.bool,
|
|
columnExtensions: PropTypes.array
|
|
};
|
|
|
|
TableGroupRow.defaultProps = {
|
|
indentCellComponent: null,
|
|
showColumnsWhenGrouped: false,
|
|
columnExtensions: undefined
|
|
};
|
|
|
|
var tableHeaderRowsComputed$1 = function tableHeaderRowsComputed(_ref) {
|
|
var tableHeaderRows = _ref.tableHeaderRows;
|
|
return tableRowsWithHeading(tableHeaderRows);
|
|
};
|
|
|
|
var TableHeaderRow = function (_React$PureComponent) {
|
|
inherits(TableHeaderRow, _React$PureComponent);
|
|
|
|
function TableHeaderRow() {
|
|
classCallCheck(this, TableHeaderRow);
|
|
return possibleConstructorReturn(this, (TableHeaderRow.__proto__ || Object.getPrototypeOf(TableHeaderRow)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableHeaderRow, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
showSortingControls = _props.showSortingControls,
|
|
showGroupingControls = _props.showGroupingControls,
|
|
HeaderCell = _props.cellComponent,
|
|
HeaderRow = _props.rowComponent,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableHeaderRow',
|
|
dependencies: [{ name: 'Table' }, { name: 'SortingState', optional: !showSortingControls }, { name: 'GroupingState', optional: !showGroupingControls }, { name: 'DragDropProvider', optional: true }, { name: 'TableColumnResizing', optional: true }]
|
|
},
|
|
React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed$1 }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref2) {
|
|
var tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn;
|
|
return isHeadingTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref3, _ref4) {
|
|
var sorting = _ref3.sorting,
|
|
tableColumns = _ref3.tableColumns,
|
|
draggingEnabled = _ref3.draggingEnabled,
|
|
tableColumnResizingEnabled = _ref3.tableColumnResizingEnabled;
|
|
var changeColumnSorting$$1 = _ref4.changeColumnSorting,
|
|
changeColumnGrouping$$1 = _ref4.changeColumnGrouping,
|
|
changeTableColumnWidth$$1 = _ref4.changeTableColumnWidth,
|
|
draftTableColumnWidth$$1 = _ref4.draftTableColumnWidth,
|
|
cancelTableColumnWidthDraft$$1 = _ref4.cancelTableColumnWidthDraft;
|
|
var columnName = params.tableColumn.column.name;
|
|
|
|
var atLeastOneDataColumn = tableColumns.filter(function (_ref5) {
|
|
var type = _ref5.type;
|
|
return type === TABLE_DATA_TYPE;
|
|
}).length > 1;
|
|
|
|
return React.createElement(HeaderCell, _extends({}, params, {
|
|
column: params.tableColumn.column,
|
|
getMessage: getMessage,
|
|
showSortingControls: showSortingControls && sorting !== undefined,
|
|
showGroupingControls: showGroupingControls && atLeastOneDataColumn,
|
|
draggingEnabled: draggingEnabled && atLeastOneDataColumn,
|
|
resizingEnabled: tableColumnResizingEnabled,
|
|
sortingDirection: showSortingControls && sorting !== undefined ? getColumnSortingDirection(sorting, columnName) : undefined,
|
|
onSort: function onSort(_ref6) {
|
|
var direction = _ref6.direction,
|
|
keepOther = _ref6.keepOther;
|
|
return changeColumnSorting$$1({ columnName: columnName, direction: direction, keepOther: keepOther });
|
|
},
|
|
onGroup: function onGroup() {
|
|
return changeColumnGrouping$$1({ columnName: columnName });
|
|
},
|
|
onWidthChange: function onWidthChange(_ref7) {
|
|
var shift = _ref7.shift;
|
|
return changeTableColumnWidth$$1({ columnName: columnName, shift: shift });
|
|
},
|
|
onWidthDraft: function onWidthDraft(_ref8) {
|
|
var shift = _ref8.shift;
|
|
return draftTableColumnWidth$$1({ columnName: columnName, shift: shift });
|
|
},
|
|
onWidthDraftCancel: function onWidthDraftCancel() {
|
|
return cancelTableColumnWidthDraft$$1();
|
|
}
|
|
}));
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref9) {
|
|
var tableRow = _ref9.tableRow;
|
|
return isHeadingTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(HeaderRow, params);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableHeaderRow;
|
|
}(React.PureComponent);
|
|
|
|
TableHeaderRow.propTypes = {
|
|
showSortingControls: PropTypes.bool,
|
|
showGroupingControls: PropTypes.bool,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
TableHeaderRow.defaultProps = {
|
|
showSortingControls: false,
|
|
showGroupingControls: false,
|
|
messages: null
|
|
};
|
|
|
|
var pluginDependencies$12 = [{ name: 'FilteringState' }, { name: 'Table' }, { name: 'DataTypeProvider', optional: true }];
|
|
|
|
var TableFilterRow = function (_React$PureComponent) {
|
|
inherits(TableFilterRow, _React$PureComponent);
|
|
|
|
function TableFilterRow() {
|
|
classCallCheck(this, TableFilterRow);
|
|
return possibleConstructorReturn(this, (TableFilterRow.__proto__ || Object.getPrototypeOf(TableFilterRow)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableFilterRow, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
rowHeight = _props.rowHeight,
|
|
FilterCell = _props.cellComponent,
|
|
FilterRow = _props.rowComponent,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
|
|
var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref) {
|
|
var tableHeaderRows = _ref.tableHeaderRows;
|
|
return tableHeaderRowsWithFilter(tableHeaderRows, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableFilterRow',
|
|
dependencies: pluginDependencies$12
|
|
},
|
|
React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref2) {
|
|
var tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn;
|
|
return isFilterTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref3, _ref4) {
|
|
var filters = _ref3.filters;
|
|
var changeColumnFilter$$1 = _ref4.changeColumnFilter;
|
|
var columnName = params.tableColumn.column.name;
|
|
|
|
var filter = getColumnFilterConfig(filters, columnName);
|
|
var onFilter = function onFilter(config) {
|
|
return changeColumnFilter$$1({ columnName: columnName, config: config });
|
|
};
|
|
return React.createElement(
|
|
TemplatePlaceholder,
|
|
{
|
|
name: 'valueEditor',
|
|
params: {
|
|
column: params.tableColumn.column,
|
|
value: filter ? filter.value : null,
|
|
onValueChange: function onValueChange(newValue) {
|
|
return onFilter(newValue ? { value: newValue } : null);
|
|
}
|
|
}
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
FilterCell,
|
|
_extends({}, params, {
|
|
getMessage: getMessage,
|
|
column: params.tableColumn.column,
|
|
filter: filter,
|
|
onFilter: onFilter
|
|
}),
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow;
|
|
return isFilterTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(FilterRow, params);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableFilterRow;
|
|
}(React.PureComponent);
|
|
|
|
TableFilterRow.propTypes = {
|
|
rowHeight: PropTypes.any,
|
|
messages: PropTypes.object,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableFilterRow.defaultProps = {
|
|
rowHeight: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var pluginDependencies$13 = [{ name: 'EditingState' }, { name: 'Table' }, { name: 'DataTypeProvider', optional: true }];
|
|
|
|
var TableEditRow = function (_React$PureComponent) {
|
|
inherits(TableEditRow, _React$PureComponent);
|
|
|
|
function TableEditRow() {
|
|
classCallCheck(this, TableEditRow);
|
|
return possibleConstructorReturn(this, (TableEditRow.__proto__ || Object.getPrototypeOf(TableEditRow)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableEditRow, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
EditCell = _props.cellComponent,
|
|
EditRow = _props.rowComponent,
|
|
rowHeight = _props.rowHeight;
|
|
|
|
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref) {
|
|
var tableBodyRows = _ref.tableBodyRows,
|
|
editingRowIds = _ref.editingRowIds,
|
|
addedRows = _ref.addedRows;
|
|
return tableRowsWithEditing(tableBodyRows, editingRowIds, addedRows, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableEditRow',
|
|
dependencies: pluginDependencies$13
|
|
},
|
|
React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref2) {
|
|
var tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn;
|
|
return isEditTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref3, _ref4) {
|
|
var getCellValue = _ref3.getCellValue,
|
|
createRowChange = _ref3.createRowChange,
|
|
rowChanges = _ref3.rowChanges;
|
|
var changeAddedRow$$1 = _ref4.changeAddedRow,
|
|
changeRow$$1 = _ref4.changeRow;
|
|
var _params$tableRow = params.tableRow,
|
|
rowId = _params$tableRow.rowId,
|
|
row = _params$tableRow.row;
|
|
var columnName = params.tableColumn.column.name;
|
|
|
|
|
|
var isNew = isAddedTableRow(params.tableRow);
|
|
var changedRow = isNew ? row : _extends({}, row, getRowChange(rowChanges, rowId));
|
|
|
|
var value = getCellValue(changedRow, columnName);
|
|
var onValueChange = function onValueChange(newValue) {
|
|
var changeArgs = {
|
|
rowId: rowId,
|
|
change: createRowChange(changedRow, newValue, columnName)
|
|
};
|
|
if (isNew) {
|
|
changeAddedRow$$1(changeArgs);
|
|
} else {
|
|
changeRow$$1(changeArgs);
|
|
}
|
|
};
|
|
return React.createElement(
|
|
TemplatePlaceholder,
|
|
{
|
|
name: 'valueEditor',
|
|
params: {
|
|
column: params.tableColumn.column,
|
|
row: row,
|
|
value: value,
|
|
onValueChange: onValueChange
|
|
}
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
EditCell,
|
|
_extends({}, params, {
|
|
row: row,
|
|
column: params.tableColumn.column,
|
|
value: value,
|
|
onValueChange: onValueChange
|
|
}),
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableRow',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow;
|
|
return isEditTableRow(tableRow) || isAddedTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(EditRow, _extends({}, params, {
|
|
row: params.tableRow.row
|
|
}));
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableEditRow;
|
|
}(React.PureComponent);
|
|
|
|
TableEditRow.propTypes = {
|
|
rowHeight: PropTypes.any,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableEditRow.defaultProps = {
|
|
rowHeight: undefined
|
|
};
|
|
|
|
var pluginDependencies$14 = [{ name: 'EditingState' }, { name: 'Table' }];
|
|
|
|
var TableEditColumn = function (_React$PureComponent) {
|
|
inherits(TableEditColumn, _React$PureComponent);
|
|
|
|
function TableEditColumn() {
|
|
classCallCheck(this, TableEditColumn);
|
|
return possibleConstructorReturn(this, (TableEditColumn.__proto__ || Object.getPrototypeOf(TableEditColumn)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableEditColumn, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Cell = _props.cellComponent,
|
|
HeaderCell = _props.headerCellComponent,
|
|
Command = _props.commandComponent,
|
|
showAddCommand = _props.showAddCommand,
|
|
showEditCommand = _props.showEditCommand,
|
|
showDeleteCommand = _props.showDeleteCommand,
|
|
width = _props.width,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return tableColumnsWithEditing(tableColumns, width);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableEditColumn',
|
|
dependencies: pluginDependencies$14
|
|
},
|
|
React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref2) {
|
|
var tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn;
|
|
return isHeadingEditCommandsTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(
|
|
HeaderCell,
|
|
params,
|
|
showAddCommand && React.createElement(Command, {
|
|
id: 'add',
|
|
text: getMessage('addCommand'),
|
|
onExecute: function onExecute() {
|
|
return actions.addRow();
|
|
}
|
|
})
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{
|
|
name: 'tableCell',
|
|
predicate: function predicate(_ref3) {
|
|
var tableRow = _ref3.tableRow,
|
|
tableColumn = _ref3.tableColumn;
|
|
return isEditCommandsTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
var isEdit = isEditTableRow(params.tableRow);
|
|
var isNew = isAddedTableRow(params.tableRow);
|
|
var isEditing = isEdit || isNew;
|
|
var rowIds = [params.tableRow.rowId];
|
|
return React.createElement(
|
|
Cell,
|
|
_extends({}, params, {
|
|
row: params.tableRow.row
|
|
}),
|
|
showEditCommand && !isEditing && React.createElement(Command, {
|
|
id: 'edit',
|
|
text: getMessage('editCommand'),
|
|
onExecute: function onExecute() {
|
|
return actions.startEditRows({ rowIds: rowIds });
|
|
}
|
|
}),
|
|
showDeleteCommand && !isEditing && React.createElement(Command, {
|
|
id: 'delete',
|
|
text: getMessage('deleteCommand'),
|
|
onExecute: function onExecute() {
|
|
actions.deleteRows({ rowIds: rowIds });
|
|
actions.commitDeletedRows({ rowIds: rowIds });
|
|
}
|
|
}),
|
|
isEditing && React.createElement(Command, {
|
|
id: 'commit',
|
|
text: getMessage('commitCommand'),
|
|
onExecute: function onExecute() {
|
|
if (isNew) {
|
|
actions.commitAddedRows({ rowIds: rowIds });
|
|
} else {
|
|
actions.stopEditRows({ rowIds: rowIds });
|
|
actions.commitChangedRows({ rowIds: rowIds });
|
|
}
|
|
}
|
|
}),
|
|
isEditing && React.createElement(Command, {
|
|
id: 'cancel',
|
|
text: getMessage('cancelCommand'),
|
|
onExecute: function onExecute() {
|
|
if (isNew) {
|
|
actions.cancelAddedRows({ rowIds: rowIds });
|
|
} else {
|
|
actions.stopEditRows({ rowIds: rowIds });
|
|
actions.cancelChangedRows({ rowIds: rowIds });
|
|
}
|
|
}
|
|
})
|
|
);
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableEditColumn;
|
|
}(React.PureComponent);
|
|
TableEditColumn.propTypes = {
|
|
cellComponent: PropTypes.func.isRequired,
|
|
headerCellComponent: PropTypes.func.isRequired,
|
|
commandComponent: PropTypes.func.isRequired,
|
|
showAddCommand: PropTypes.bool,
|
|
showEditCommand: PropTypes.bool,
|
|
showDeleteCommand: PropTypes.bool,
|
|
width: PropTypes.number,
|
|
messages: PropTypes.object
|
|
};
|
|
TableEditColumn.defaultProps = {
|
|
showAddCommand: false,
|
|
showEditCommand: false,
|
|
showDeleteCommand: false,
|
|
width: 140,
|
|
messages: {}
|
|
};
|
|
|
|
var pluginDependencies$15 = [{ name: 'Table' }];
|
|
|
|
var TableColumnResizing = function (_React$PureComponent) {
|
|
inherits(TableColumnResizing, _React$PureComponent);
|
|
|
|
function TableColumnResizing(props) {
|
|
classCallCheck(this, TableColumnResizing);
|
|
|
|
var _this = possibleConstructorReturn(this, (TableColumnResizing.__proto__ || Object.getPrototypeOf(TableColumnResizing)).call(this, props));
|
|
|
|
_this.state = {
|
|
columnWidths: props.columnWidths || props.defaultColumnWidths,
|
|
draftColumnWidths: []
|
|
};
|
|
|
|
var stateHelper = createStateHelper(_this, {
|
|
columnWidths: function columnWidths() {
|
|
return _this.props.onColumnWidthsChange;
|
|
}
|
|
});
|
|
|
|
_this.changeTableColumnWidth = stateHelper.applyReducer.bind(stateHelper, changeTableColumnWidth);
|
|
_this.draftTableColumnWidth = stateHelper.applyReducer.bind(stateHelper, draftTableColumnWidth);
|
|
_this.cancelTableColumnWidthDraft = stateHelper.applyReducer.bind(stateHelper, cancelTableColumnWidthDraft);
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableColumnResizing, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var columnWidths = nextProps.columnWidths;
|
|
|
|
this.setState(_extends({}, columnWidths !== undefined ? { columnWidths: columnWidths } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _state = this.state,
|
|
columnWidths = _state.columnWidths,
|
|
draftColumnWidths = _state.draftColumnWidths;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return tableColumnsWithWidths(tableColumns, columnWidths, draftColumnWidths);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableColumnResizing',
|
|
dependencies: pluginDependencies$15
|
|
},
|
|
React.createElement(Getter, { name: 'tableColumnResizingEnabled', value: true }),
|
|
React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(Action, { name: 'changeTableColumnWidth', action: this.changeTableColumnWidth }),
|
|
React.createElement(Action, { name: 'draftTableColumnWidth', action: this.draftTableColumnWidth }),
|
|
React.createElement(Action, { name: 'cancelTableColumnWidthDraft', action: this.cancelTableColumnWidthDraft })
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnResizing;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnResizing.propTypes = {
|
|
defaultColumnWidths: PropTypes.array,
|
|
columnWidths: PropTypes.array,
|
|
onColumnWidthsChange: PropTypes.func
|
|
};
|
|
|
|
TableColumnResizing.defaultProps = {
|
|
defaultColumnWidths: [],
|
|
columnWidths: undefined,
|
|
onColumnWidthsChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$16 = [{ name: 'PagingState' }];
|
|
|
|
var PagingPanel = function (_React$PureComponent) {
|
|
inherits(PagingPanel, _React$PureComponent);
|
|
|
|
function PagingPanel() {
|
|
classCallCheck(this, PagingPanel);
|
|
return possibleConstructorReturn(this, (PagingPanel.__proto__ || Object.getPrototypeOf(PagingPanel)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(PagingPanel, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Pager = _props.containerComponent,
|
|
pageSizes = _props.pageSizes,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'PagingPanel',
|
|
dependencies: pluginDependencies$16
|
|
},
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'footer' },
|
|
React.createElement(TemplatePlaceholder, null),
|
|
React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref, _ref2) {
|
|
var currentPage = _ref.currentPage,
|
|
pageSize = _ref.pageSize,
|
|
totalCount = _ref.totalCount;
|
|
var setCurrentPage$$1 = _ref2.setCurrentPage,
|
|
setPageSize$$1 = _ref2.setPageSize;
|
|
return React.createElement(Pager, {
|
|
currentPage: currentPage,
|
|
pageSize: pageSize,
|
|
totalCount: totalCount,
|
|
totalPages: pageCount(totalCount, pageSize),
|
|
pageSizes: pageSizes,
|
|
getMessage: getMessage,
|
|
onCurrentPageChange: setCurrentPage$$1,
|
|
onPageSizeChange: setPageSize$$1
|
|
});
|
|
}
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return PagingPanel;
|
|
}(React.PureComponent);
|
|
|
|
PagingPanel.propTypes = {
|
|
pageSizes: PropTypes.arrayOf(PropTypes.number),
|
|
containerComponent: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
PagingPanel.defaultProps = {
|
|
pageSizes: [],
|
|
messages: {}
|
|
};
|
|
|
|
var GroupingPanel = function (_React$PureComponent) {
|
|
inherits(GroupingPanel, _React$PureComponent);
|
|
|
|
function GroupingPanel() {
|
|
classCallCheck(this, GroupingPanel);
|
|
return possibleConstructorReturn(this, (GroupingPanel.__proto__ || Object.getPrototypeOf(GroupingPanel)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(GroupingPanel, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Layout = _props.layoutComponent,
|
|
Container = _props.containerComponent,
|
|
Item = _props.itemComponent,
|
|
EmptyMessage = _props.emptyMessageComponent,
|
|
showSortingControls = _props.showSortingControls,
|
|
showGroupingControls = _props.showGroupingControls,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
|
|
var EmptyMessagePlaceholder = function EmptyMessagePlaceholder() {
|
|
return React.createElement(EmptyMessage, {
|
|
getMessage: getMessage
|
|
});
|
|
};
|
|
|
|
var ItemPlaceholder = function ItemPlaceholder(_ref) {
|
|
var item = _ref.item;
|
|
var columnName = item.column.name;
|
|
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref2, _ref3) {
|
|
var sorting = _ref2.sorting;
|
|
var changeColumnGrouping$$1 = _ref3.changeColumnGrouping,
|
|
changeColumnSorting$$1 = _ref3.changeColumnSorting;
|
|
return React.createElement(Item, {
|
|
item: item,
|
|
showSortingControls: showSortingControls && sorting !== undefined,
|
|
sortingDirection: sorting !== undefined ? getColumnSortingDirection(sorting, columnName) : undefined,
|
|
showGroupingControls: showGroupingControls,
|
|
onGroup: function onGroup() {
|
|
return changeColumnGrouping$$1({ columnName: columnName });
|
|
},
|
|
onSort: function onSort(_ref4) {
|
|
var direction = _ref4.direction,
|
|
keepOther = _ref4.keepOther;
|
|
return changeColumnSorting$$1({ columnName: columnName, direction: direction, keepOther: keepOther });
|
|
}
|
|
});
|
|
}
|
|
);
|
|
};
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'GroupingPanel',
|
|
dependencies: [{ name: 'GroupingState' }, { name: 'Toolbar' }, { name: 'SortingState', optional: !showSortingControls }]
|
|
},
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'toolbarContent' },
|
|
React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref5, _ref6) {
|
|
var columns = _ref5.columns,
|
|
grouping = _ref5.grouping,
|
|
draftGrouping = _ref5.draftGrouping,
|
|
draggingEnabled = _ref5.draggingEnabled;
|
|
var changeColumnGrouping$$1 = _ref6.changeColumnGrouping,
|
|
draftColumnGrouping$$1 = _ref6.draftColumnGrouping,
|
|
cancelColumnGroupingDraft$$1 = _ref6.cancelColumnGroupingDraft;
|
|
return React.createElement(Layout, {
|
|
items: groupingPanelItems(columns, grouping, draftGrouping),
|
|
draggingEnabled: draggingEnabled,
|
|
onGroup: changeColumnGrouping$$1,
|
|
onGroupDraft: draftColumnGrouping$$1,
|
|
onGroupDraftCancel: cancelColumnGroupingDraft$$1,
|
|
itemComponent: ItemPlaceholder,
|
|
emptyMessageComponent: EmptyMessagePlaceholder,
|
|
containerComponent: Container
|
|
});
|
|
}
|
|
),
|
|
React.createElement(TemplatePlaceholder, null)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return GroupingPanel;
|
|
}(React.PureComponent);
|
|
|
|
GroupingPanel.propTypes = {
|
|
showSortingControls: PropTypes.bool,
|
|
showGroupingControls: PropTypes.bool,
|
|
layoutComponent: PropTypes.func.isRequired,
|
|
containerComponent: PropTypes.func.isRequired,
|
|
itemComponent: PropTypes.func.isRequired,
|
|
emptyMessageComponent: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
GroupingPanel.defaultProps = {
|
|
showSortingControls: false,
|
|
showGroupingControls: false,
|
|
messages: {}
|
|
};
|
|
|
|
// eslint-disable-next-line react/prefer-stateless-function
|
|
var DataTypeProvider = function (_React$PureComponent) {
|
|
inherits(DataTypeProvider, _React$PureComponent);
|
|
|
|
function DataTypeProvider() {
|
|
classCallCheck(this, DataTypeProvider);
|
|
return possibleConstructorReturn(this, (DataTypeProvider.__proto__ || Object.getPrototypeOf(DataTypeProvider)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(DataTypeProvider, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
columnNames = _props.for,
|
|
Formatter = _props.formatterComponent,
|
|
Editor = _props.editorComponent;
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{ name: 'DataTypeProvider' },
|
|
Formatter ? React.createElement(
|
|
Template,
|
|
{
|
|
name: 'valueFormatter',
|
|
predicate: function predicate(_ref) {
|
|
var column = _ref.column;
|
|
return columnNames.includes(column.name);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Formatter, params);
|
|
}
|
|
) : null,
|
|
Editor ? React.createElement(
|
|
Template,
|
|
{
|
|
name: 'valueEditor',
|
|
predicate: function predicate(_ref2) {
|
|
var column = _ref2.column;
|
|
return columnNames.includes(column.name);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(Editor, params);
|
|
}
|
|
) : null
|
|
);
|
|
}
|
|
}]);
|
|
return DataTypeProvider;
|
|
}(React.PureComponent);
|
|
|
|
DataTypeProvider.propTypes = {
|
|
for: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
formatterComponent: PropTypes.func,
|
|
editorComponent: PropTypes.func
|
|
};
|
|
|
|
DataTypeProvider.defaultProps = {
|
|
formatterComponent: undefined,
|
|
editorComponent: undefined
|
|
};
|
|
|
|
var pluginDependencies$17 = [{ name: 'Table' }];
|
|
|
|
var visibleTableColumnsComputed = function visibleTableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns,
|
|
hiddenColumnNames = _ref.hiddenColumnNames;
|
|
return visibleTableColumns(tableColumns, hiddenColumnNames);
|
|
};
|
|
|
|
var TableColumnVisibility = function (_React$PureComponent) {
|
|
inherits(TableColumnVisibility, _React$PureComponent);
|
|
|
|
function TableColumnVisibility(props) {
|
|
classCallCheck(this, TableColumnVisibility);
|
|
|
|
var _this = possibleConstructorReturn(this, (TableColumnVisibility.__proto__ || Object.getPrototypeOf(TableColumnVisibility)).call(this, props));
|
|
|
|
_this.state = {
|
|
hiddenColumnNames: props.hiddenColumnNames || props.defaultHiddenColumnNames
|
|
};
|
|
var stateHelper = createStateHelper(_this, {
|
|
hiddenColumnNames: function hiddenColumnNames() {
|
|
return _this.props.onHiddenColumnNamesChange;
|
|
}
|
|
});
|
|
|
|
_this.toggleColumnVisibility = stateHelper.applyFieldReducer.bind(stateHelper, 'hiddenColumnNames', toggleColumn);
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableColumnVisibility, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var hiddenColumnNames = nextProps.hiddenColumnNames;
|
|
|
|
this.setState(_extends({}, hiddenColumnNames !== undefined ? { hiddenColumnNames: hiddenColumnNames } : null));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
EmptyMessage = _props.emptyMessageComponent,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = getMessagesFormatter(messages);
|
|
var hiddenColumnNames = this.state.hiddenColumnNames;
|
|
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'TableColumnVisibility',
|
|
dependencies: pluginDependencies$17
|
|
},
|
|
React.createElement(Getter, { name: 'hiddenColumnNames', value: hiddenColumnNames }),
|
|
React.createElement(Getter, { name: 'tableColumns', computed: visibleTableColumnsComputed }),
|
|
React.createElement(Action, {
|
|
name: 'toggleColumnVisibility',
|
|
action: this.toggleColumnVisibility
|
|
}),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'table' },
|
|
function (params) {
|
|
return React.createElement(
|
|
TemplateConnector,
|
|
null,
|
|
function (_ref2) {
|
|
var tableColumns = _ref2.tableColumns;
|
|
return tableDataColumnsExist(tableColumns) ? React.createElement(TemplatePlaceholder, null) : React.createElement(EmptyMessage, _extends({
|
|
getMessage: getMessage
|
|
}, params));
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnVisibility;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnVisibility.propTypes = {
|
|
hiddenColumnNames: PropTypes.arrayOf(PropTypes.string),
|
|
defaultHiddenColumnNames: PropTypes.arrayOf(PropTypes.string),
|
|
emptyMessageComponent: PropTypes.func.isRequired,
|
|
onHiddenColumnNamesChange: PropTypes.func,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
TableColumnVisibility.defaultProps = {
|
|
hiddenColumnNames: undefined,
|
|
defaultHiddenColumnNames: [],
|
|
onHiddenColumnNamesChange: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
/* globals requestAnimationFrame */
|
|
|
|
var TABLE_FLEX_TYPE = 'flex';
|
|
|
|
var areColumnsChanged = function areColumnsChanged(prevColumns, nextColumns) {
|
|
if (prevColumns.length !== nextColumns.length) return true;
|
|
var prevKeys = prevColumns.map(function (column) {
|
|
return column.key;
|
|
});
|
|
return nextColumns.find(function (column) {
|
|
return prevKeys.indexOf(column.key) === -1;
|
|
}) !== undefined;
|
|
};
|
|
|
|
var TableLayout = function (_React$PureComponent) {
|
|
inherits(TableLayout, _React$PureComponent);
|
|
|
|
function TableLayout(props) {
|
|
classCallCheck(this, TableLayout);
|
|
|
|
var _this = possibleConstructorReturn(this, (TableLayout.__proto__ || Object.getPrototypeOf(TableLayout)).call(this, props));
|
|
|
|
_this.state = {
|
|
animationState: new Map()
|
|
};
|
|
|
|
_this.animations = new Map();
|
|
_this.tableNode = null;
|
|
|
|
_this.setRef = function (ref) {
|
|
if (ref) _this.tableNode = ref;
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableLayout, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var nextColumns = nextProps.columns;
|
|
var columns = this.props.columns;
|
|
|
|
|
|
if (areColumnsChanged(columns, nextColumns)) return;
|
|
|
|
// eslint-disable-next-line react/no-find-dom-node
|
|
var tableWidth = findDOMNode(this).scrollWidth;
|
|
this.animations = getAnimations(columns, nextColumns, tableWidth, this.animations);
|
|
this.processAnimationFrame();
|
|
}
|
|
}, {
|
|
key: 'getColumns',
|
|
value: function getColumns() {
|
|
var columns = this.props.columns;
|
|
var animationState = this.state.animationState;
|
|
|
|
|
|
var result = columns;
|
|
|
|
var isFixedWidth = columns.filter(function (column) {
|
|
return column.width === undefined;
|
|
}).length === 0;
|
|
if (isFixedWidth) {
|
|
result = result.slice();
|
|
result.push({ key: TABLE_FLEX_TYPE, type: TABLE_FLEX_TYPE });
|
|
}
|
|
|
|
if (animationState.size) {
|
|
result = result.map(function (column) {
|
|
return animationState.has(column.key) ? _extends({}, column, { animationState: animationState.get(column.key) }) : column;
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}
|
|
}, {
|
|
key: 'processAnimationFrame',
|
|
value: function processAnimationFrame() {
|
|
this.animations = filterActiveAnimations(this.animations);
|
|
|
|
if (!this.animations.size) {
|
|
if (this.state.animationState.size) {
|
|
this.setState({ animationState: new Map() });
|
|
}
|
|
return;
|
|
}
|
|
|
|
var animationState = evalAnimations(this.animations);
|
|
this.setState({ animationState: animationState });
|
|
|
|
requestAnimationFrame(this.processAnimationFrame.bind(this));
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Layout = _props.layoutComponent,
|
|
minColumnWidth = _props.minColumnWidth,
|
|
restProps = objectWithoutProperties(_props, ['layoutComponent', 'minColumnWidth']);
|
|
|
|
var columns = this.getColumns();
|
|
var minWidth = columns.map(function (column) {
|
|
return column.width || (column.type === TABLE_FLEX_TYPE ? 0 : minColumnWidth);
|
|
}).reduce(function (acc, width) {
|
|
return acc + width;
|
|
}, 0);
|
|
|
|
return React.createElement(Layout, _extends({}, restProps, {
|
|
columns: columns,
|
|
minWidth: minWidth
|
|
}));
|
|
}
|
|
}]);
|
|
return TableLayout;
|
|
}(React.PureComponent);
|
|
|
|
TableLayout.propTypes = {
|
|
columns: PropTypes.array.isRequired,
|
|
minColumnWidth: PropTypes.number.isRequired,
|
|
layoutComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
var ColumnGroup = function (_React$PureComponent) {
|
|
inherits(ColumnGroup, _React$PureComponent);
|
|
|
|
function ColumnGroup() {
|
|
classCallCheck(this, ColumnGroup);
|
|
return possibleConstructorReturn(this, (ColumnGroup.__proto__ || Object.getPrototypeOf(ColumnGroup)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(ColumnGroup, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var columns = this.props.columns;
|
|
|
|
|
|
return React.createElement(
|
|
'colgroup',
|
|
null,
|
|
columns.map(function (column) {
|
|
return React.createElement('col', {
|
|
key: column.key,
|
|
style: column.width !== undefined ? { width: column.width + 'px' } : null
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return ColumnGroup;
|
|
}(React.PureComponent);
|
|
|
|
ColumnGroup.propTypes = {
|
|
columns: PropTypes.array.isRequired
|
|
};
|
|
|
|
var getColumnStyle = function getColumnStyle(_ref) {
|
|
var column = _ref.column;
|
|
return column.animationState;
|
|
};
|
|
|
|
var getRowStyle = function getRowStyle(_ref2) {
|
|
var row = _ref2.row;
|
|
return row.height !== undefined ? { height: row.height + 'px' } : undefined;
|
|
};
|
|
|
|
var RowLayout = function (_React$PureComponent) {
|
|
inherits(RowLayout, _React$PureComponent);
|
|
|
|
function RowLayout() {
|
|
classCallCheck(this, RowLayout);
|
|
return possibleConstructorReturn(this, (RowLayout.__proto__ || Object.getPrototypeOf(RowLayout)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(RowLayout, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
row = _props.row,
|
|
columns = _props.columns,
|
|
Row = _props.rowComponent,
|
|
Cell = _props.cellComponent;
|
|
|
|
|
|
return React.createElement(
|
|
Row,
|
|
{
|
|
tableRow: row,
|
|
style: getRowStyle({ row: row })
|
|
},
|
|
getTableRowColumnsWithColSpan(columns, row.colSpanStart).map(function (column) {
|
|
return React.createElement(Cell, {
|
|
key: column.key,
|
|
tableRow: row,
|
|
tableColumn: column,
|
|
style: getColumnStyle({ column: column }),
|
|
colSpan: column.colSpan
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return RowLayout;
|
|
}(React.PureComponent);
|
|
|
|
RowLayout.propTypes = {
|
|
row: PropTypes.object.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
var OVERSCAN = 3;
|
|
|
|
var STUB_TYPE = 'stub';
|
|
var VISIBLE_TYPE = 'visible';
|
|
var OVERSCAN_TYPE = 'overscan';
|
|
|
|
var STARTING_KEY = 'starting';
|
|
var ENDING_KEY = 'ending';
|
|
|
|
var getVisibleRows = function getVisibleRows(rows, viewportTop, viewportHeight, getRowHeight) {
|
|
var result = [];
|
|
|
|
var viewportBottom = viewportTop + viewportHeight;
|
|
var topPosition = 0;
|
|
|
|
var _loop = function _loop(_i) {
|
|
var row = rows[_i];
|
|
var lastIndex = result.length - 1;
|
|
var last = result[lastIndex];
|
|
|
|
var height = getRowHeight(row);
|
|
var bottomPosition = topPosition + height;
|
|
if (topPosition >= viewportTop && topPosition < viewportBottom || bottomPosition > viewportTop && bottomPosition <= viewportBottom || topPosition < viewportTop && bottomPosition > viewportBottom) {
|
|
if (last && last.type === STUB_TYPE) {
|
|
rows.slice(Math.max(0, _i - OVERSCAN), _i).forEach(function (overscanRow) {
|
|
var overscanRowSize = getRowHeight(overscanRow);
|
|
last.height -= overscanRowSize;
|
|
result.push({ type: OVERSCAN_TYPE, height: overscanRowSize, row: overscanRow });
|
|
});
|
|
if (last.height === 0) {
|
|
result.splice(lastIndex, 1);
|
|
}
|
|
}
|
|
result.push({ type: VISIBLE_TYPE, height: height, row: row });
|
|
} else if (last && last.type === STUB_TYPE) {
|
|
last.height += height;
|
|
} else if (_i > 0) {
|
|
rows.slice(_i, _i + OVERSCAN).forEach(function (overscanRow) {
|
|
var overscanRowSize = getRowHeight(overscanRow);
|
|
result.push({ type: OVERSCAN_TYPE, height: overscanRowSize, row: overscanRow });
|
|
});
|
|
_i += OVERSCAN - 1;
|
|
if (_i < rows.length) {
|
|
result.push({ type: STUB_TYPE, key: ENDING_KEY, height: 0 });
|
|
}
|
|
} else {
|
|
result.push({ type: STUB_TYPE, key: STARTING_KEY, height: height });
|
|
}
|
|
topPosition = bottomPosition;
|
|
i = _i;
|
|
};
|
|
|
|
for (var i = 0; i < rows.length; i += 1) {
|
|
_loop(i);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
var getRowPosition = function getRowPosition(visibleRows, index) {
|
|
return visibleRows.slice(0, index).reduce(function (acc, row) {
|
|
return acc + row.height;
|
|
}, 0);
|
|
};
|
|
|
|
var firstVisibleRowOffset = function firstVisibleRowOffset(prevVisibleRows, visibleRows) {
|
|
var firstVisibleRowIndex = visibleRows.findIndex(function (row) {
|
|
return row.type === VISIBLE_TYPE;
|
|
});
|
|
if (firstVisibleRowIndex === -1) return 0;
|
|
|
|
var firstVisibleRow = visibleRows[firstVisibleRowIndex].row;
|
|
var prevIndex = prevVisibleRows.findIndex(function (row) {
|
|
return row.row === firstVisibleRow;
|
|
});
|
|
if (prevIndex === -1) return 0;
|
|
|
|
var position = getRowPosition(visibleRows, firstVisibleRowIndex);
|
|
var prevPosition = getRowPosition(prevVisibleRows, prevIndex);
|
|
return position - prevPosition;
|
|
};
|
|
|
|
var VirtualTableLayout = function (_React$PureComponent) {
|
|
inherits(VirtualTableLayout, _React$PureComponent);
|
|
|
|
function VirtualTableLayout(props) {
|
|
classCallCheck(this, VirtualTableLayout);
|
|
|
|
var _this = possibleConstructorReturn(this, (VirtualTableLayout.__proto__ || Object.getPrototypeOf(VirtualTableLayout)).call(this, props));
|
|
|
|
_this.state = {
|
|
rowHeights: new Map(),
|
|
viewportTop: 0
|
|
};
|
|
|
|
_this.rowRefs = new Map();
|
|
_this.updateViewport = _this.updateViewport.bind(_this);
|
|
_this.registerRowRef = _this.registerRowRef.bind(_this);
|
|
_this.getRowHeight = _this.getRowHeight.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(VirtualTableLayout, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
this.storeRowHeights();
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (this.props.headerRows !== nextProps.headerRows || this.props.rows !== nextProps.rows) {
|
|
var prevRowHeight = this.state.rowHeights;
|
|
|
|
this.setState({
|
|
rowHeights: [].concat(toConsumableArray(nextProps.headerRows), toConsumableArray(nextProps.rows)).reduce(function (acc, row) {
|
|
var rowHeight = prevRowHeight.get(row.key);
|
|
if (rowHeight !== undefined) {
|
|
acc.set(row.key, rowHeight);
|
|
}
|
|
return acc;
|
|
}, new Map())
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate() {
|
|
this.storeRowHeights();
|
|
}
|
|
}, {
|
|
key: 'getRowHeight',
|
|
value: function getRowHeight(row) {
|
|
var storedHeight = this.state.rowHeights.get(row.key);
|
|
if (storedHeight !== undefined) return storedHeight;
|
|
if (row.height) return row.height;
|
|
return this.props.estimatedRowHeight;
|
|
}
|
|
}, {
|
|
key: 'getVisibleRows',
|
|
value: function getVisibleRows$$1() {
|
|
var _this2 = this;
|
|
|
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
|
|
rows = _ref.rows,
|
|
headerRows = _ref.headerRows,
|
|
height = _ref.height;
|
|
|
|
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.viewportTop;
|
|
|
|
var headHeight = headerRows.reduce(function (acc, row) {
|
|
return acc + _this2.getRowHeight(row);
|
|
}, 0);
|
|
return getVisibleRows(rows, top, height - headHeight, this.getRowHeight);
|
|
}
|
|
}, {
|
|
key: 'storeRowHeights',
|
|
value: function storeRowHeights() {
|
|
var _this3 = this;
|
|
|
|
var rowsWithChangedHeights = Array.from(this.rowRefs.entries())
|
|
// eslint-disable-next-line react/no-find-dom-node
|
|
.map(function (_ref2) {
|
|
var _ref3 = slicedToArray(_ref2, 2),
|
|
row = _ref3[0],
|
|
ref = _ref3[1];
|
|
|
|
return [row, findDOMNode(ref).getBoundingClientRect().height];
|
|
}).filter(function (_ref4) {
|
|
var _ref5 = slicedToArray(_ref4, 2),
|
|
row = _ref5[0],
|
|
height = _ref5[1];
|
|
|
|
return height !== _this3.getRowHeight(row);
|
|
});
|
|
|
|
if (rowsWithChangedHeights.length) {
|
|
var prevVisibleBodyRows = this.getVisibleRows();
|
|
|
|
var rowHeights = this.state.rowHeights;
|
|
|
|
rowsWithChangedHeights.forEach(function (_ref6) {
|
|
var _ref7 = slicedToArray(_ref6, 2),
|
|
row = _ref7[0],
|
|
height = _ref7[1];
|
|
|
|
return rowHeights.set(row.key, height);
|
|
});
|
|
|
|
this.setState({
|
|
rowHeights: rowHeights
|
|
});
|
|
|
|
var visibleBodyRows = this.getVisibleRows();
|
|
var scrollOffset = firstVisibleRowOffset(prevVisibleBodyRows, visibleBodyRows);
|
|
if (scrollOffset !== 0) {
|
|
// eslint-disable-next-line react/no-find-dom-node
|
|
findDOMNode(this).scrollTop += scrollOffset;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'registerRowRef',
|
|
value: function registerRowRef(row, ref) {
|
|
if (ref === null) {
|
|
this.rowRefs.delete(row);
|
|
} else {
|
|
this.rowRefs.set(row, ref);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'updateViewport',
|
|
value: function updateViewport(e) {
|
|
var node = e.target;
|
|
|
|
// NOTE: prevent iOS to flicker in bounces
|
|
if (node.scrollTop < 0 || node.scrollLeft < 0 || node.scrollLeft + node.clientWidth > node.scrollWidth || node.scrollTop + node.clientHeight > node.scrollHeight) {
|
|
return;
|
|
}
|
|
|
|
if (this.viewportTop !== node.scrollTop) {
|
|
this.setState({
|
|
viewportTop: node.scrollTop
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _props = this.props,
|
|
headerRows = _props.headerRows,
|
|
columns = _props.columns,
|
|
minWidth = _props.minWidth,
|
|
height = _props.height,
|
|
Container = _props.containerComponent,
|
|
HeadTable = _props.headTableComponent,
|
|
Table = _props.tableComponent,
|
|
Head = _props.headComponent,
|
|
Body = _props.bodyComponent,
|
|
rowComponent = _props.rowComponent,
|
|
cellComponent = _props.cellComponent;
|
|
|
|
var visibleBodyRows = this.getVisibleRows();
|
|
|
|
return React.createElement(
|
|
Container,
|
|
{
|
|
style: { height: height + 'px' },
|
|
onScroll: this.updateViewport
|
|
},
|
|
!!headerRows.length && React.createElement(
|
|
HeadTable,
|
|
{
|
|
style: { minWidth: minWidth + 'px' }
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
React.createElement(
|
|
Head,
|
|
null,
|
|
headerRows.map(function (row) {
|
|
return React.createElement(RowLayout, {
|
|
key: row.key,
|
|
ref: function ref(_ref8) {
|
|
return _this4.registerRowRef(row, _ref8);
|
|
},
|
|
row: row,
|
|
columns: columns,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
});
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
Table,
|
|
{
|
|
style: { minWidth: minWidth + 'px' }
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
React.createElement(
|
|
Body,
|
|
null,
|
|
visibleBodyRows.map(function (visibleRow) {
|
|
if (visibleRow.type === 'stub') {
|
|
return React.createElement('tr', { key: visibleRow.key, style: { height: visibleRow.height + 'px' } });
|
|
}
|
|
var row = visibleRow.row;
|
|
|
|
return React.createElement(RowLayout, {
|
|
key: row.key,
|
|
ref: function ref(_ref9) {
|
|
return _this4.registerRowRef(row, _ref9);
|
|
},
|
|
row: row,
|
|
columns: columns,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
});
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return VirtualTableLayout;
|
|
}(React.PureComponent);
|
|
|
|
VirtualTableLayout.propTypes = {
|
|
minWidth: PropTypes.number.isRequired,
|
|
height: PropTypes.number.isRequired,
|
|
headerRows: PropTypes.array,
|
|
rows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
bodyComponent: PropTypes.func.isRequired,
|
|
headComponent: PropTypes.func,
|
|
tableComponent: PropTypes.func.isRequired,
|
|
headTableComponent: PropTypes.func,
|
|
containerComponent: PropTypes.func.isRequired,
|
|
estimatedRowHeight: PropTypes.number.isRequired
|
|
};
|
|
|
|
VirtualTableLayout.defaultProps = {
|
|
headerRows: [],
|
|
headComponent: function headComponent() {
|
|
return null;
|
|
},
|
|
headTableComponent: function headTableComponent() {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
var RowsBlockLayout = function (_React$PureComponent) {
|
|
inherits(RowsBlockLayout, _React$PureComponent);
|
|
|
|
function RowsBlockLayout() {
|
|
classCallCheck(this, RowsBlockLayout);
|
|
return possibleConstructorReturn(this, (RowsBlockLayout.__proto__ || Object.getPrototypeOf(RowsBlockLayout)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(RowsBlockLayout, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
rows = _props.rows,
|
|
columns = _props.columns,
|
|
Block = _props.blockComponent,
|
|
rowComponent = _props.rowComponent,
|
|
cellComponent = _props.cellComponent;
|
|
|
|
|
|
return React.createElement(
|
|
Block,
|
|
null,
|
|
rows.map(function (row) {
|
|
return React.createElement(RowLayout, {
|
|
key: row.key,
|
|
row: row,
|
|
columns: columns,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return RowsBlockLayout;
|
|
}(React.PureComponent);
|
|
|
|
RowsBlockLayout.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
blockComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
var StaticTableLayout = function (_React$PureComponent) {
|
|
inherits(StaticTableLayout, _React$PureComponent);
|
|
|
|
function StaticTableLayout() {
|
|
classCallCheck(this, StaticTableLayout);
|
|
return possibleConstructorReturn(this, (StaticTableLayout.__proto__ || Object.getPrototypeOf(StaticTableLayout)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(StaticTableLayout, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
headerRows = _props.headerRows,
|
|
rows = _props.rows,
|
|
columns = _props.columns,
|
|
minWidth = _props.minWidth,
|
|
Container = _props.containerComponent,
|
|
Table = _props.tableComponent,
|
|
headComponent = _props.headComponent,
|
|
bodyComponent = _props.bodyComponent,
|
|
rowComponent = _props.rowComponent,
|
|
cellComponent = _props.cellComponent;
|
|
|
|
|
|
return React.createElement(
|
|
Container,
|
|
null,
|
|
React.createElement(
|
|
Table,
|
|
{
|
|
style: { minWidth: minWidth + 'px' }
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
!!headerRows.length && React.createElement(RowsBlockLayout, {
|
|
rows: headerRows,
|
|
columns: columns,
|
|
blockComponent: headComponent,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
}),
|
|
React.createElement(RowsBlockLayout, {
|
|
rows: rows,
|
|
columns: columns,
|
|
blockComponent: bodyComponent,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return StaticTableLayout;
|
|
}(React.PureComponent);
|
|
|
|
StaticTableLayout.propTypes = {
|
|
headerRows: PropTypes.array,
|
|
rows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
minWidth: PropTypes.number.isRequired,
|
|
containerComponent: PropTypes.func.isRequired,
|
|
tableComponent: PropTypes.func.isRequired,
|
|
headComponent: PropTypes.func,
|
|
bodyComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
cellComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
StaticTableLayout.defaultProps = {
|
|
headerRows: [],
|
|
headComponent: function headComponent() {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
var ItemLayout = function (_React$PureComponent) {
|
|
inherits(ItemLayout, _React$PureComponent);
|
|
|
|
function ItemLayout(props) {
|
|
classCallCheck(this, ItemLayout);
|
|
|
|
var _this = possibleConstructorReturn(this, (ItemLayout.__proto__ || Object.getPrototypeOf(ItemLayout)).call(this, props));
|
|
|
|
_this.state = {
|
|
dragging: false
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(ItemLayout, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
item = _props.item,
|
|
Item = _props.itemComponent,
|
|
draggingEnabled = _props.draggingEnabled,
|
|
onDragStart = _props.onDragStart,
|
|
onDragEnd = _props.onDragEnd;
|
|
var dragging = this.state.dragging;
|
|
|
|
|
|
var itemElement = React.createElement(Item, { item: _extends({}, item, { draft: dragging || item.draft }) });
|
|
|
|
return draggingEnabled ? React.createElement(
|
|
DragSource,
|
|
{
|
|
payload: [{ type: 'column', columnName: item.column.name }],
|
|
onStart: function onStart() {
|
|
_this2.setState({ dragging: true });
|
|
onDragStart();
|
|
},
|
|
onEnd: function onEnd() {
|
|
_this2.setState({ dragging: false });
|
|
onDragEnd();
|
|
}
|
|
},
|
|
itemElement
|
|
) : itemElement;
|
|
}
|
|
}]);
|
|
return ItemLayout;
|
|
}(React.PureComponent);
|
|
|
|
ItemLayout.propTypes = {
|
|
item: PropTypes.shape({
|
|
column: PropTypes.object,
|
|
draft: PropTypes.bool
|
|
}).isRequired,
|
|
itemComponent: PropTypes.func.isRequired,
|
|
draggingEnabled: PropTypes.bool,
|
|
onDragStart: PropTypes.func,
|
|
onDragEnd: PropTypes.func
|
|
};
|
|
|
|
ItemLayout.defaultProps = {
|
|
draggingEnabled: false,
|
|
onDragStart: function onDragStart() {},
|
|
onDragEnd: function onDragEnd() {}
|
|
};
|
|
|
|
var GroupPanelLayout = function (_React$PureComponent) {
|
|
inherits(GroupPanelLayout, _React$PureComponent);
|
|
|
|
function GroupPanelLayout(props) {
|
|
classCallCheck(this, GroupPanelLayout);
|
|
|
|
var _this = possibleConstructorReturn(this, (GroupPanelLayout.__proto__ || Object.getPrototypeOf(GroupPanelLayout)).call(this, props));
|
|
|
|
_this.state = {
|
|
sourceColumnName: null,
|
|
targetItemIndex: -1
|
|
};
|
|
|
|
_this.onEnter = function (_ref) {
|
|
var payload = _ref.payload;
|
|
|
|
_this.setState({
|
|
sourceColumnName: payload[0].columnName
|
|
});
|
|
};
|
|
_this.onOver = function (_ref2) {
|
|
var clientOffset = _ref2.clientOffset;
|
|
var _this$props = _this.props,
|
|
onGroupDraft = _this$props.onGroupDraft,
|
|
items = _this$props.items;
|
|
var _this$state = _this.state,
|
|
sourceColumnName = _this$state.sourceColumnName,
|
|
prevTargetItemIndex = _this$state.targetItemIndex;
|
|
// eslint-disable-next-line react/no-find-dom-node
|
|
|
|
var itemGeometries = _this.itemRefs.map(function (ref) {
|
|
return findDOMNode(ref).getBoundingClientRect();
|
|
});
|
|
var sourceItemIndex = items.findIndex(function (_ref3) {
|
|
var column = _ref3.column;
|
|
return column.name === sourceColumnName;
|
|
});
|
|
var targetItemIndex = getGroupCellTargetIndex(itemGeometries, sourceItemIndex, clientOffset);
|
|
|
|
if (prevTargetItemIndex === targetItemIndex) return;
|
|
|
|
onGroupDraft({
|
|
columnName: sourceColumnName,
|
|
groupIndex: targetItemIndex
|
|
});
|
|
_this.setState({ targetItemIndex: targetItemIndex });
|
|
};
|
|
_this.onLeave = function () {
|
|
var onGroupDraft = _this.props.onGroupDraft;
|
|
var sourceColumnName = _this.state.sourceColumnName;
|
|
|
|
if (!_this.draggingColumnName) {
|
|
_this.resetState();
|
|
return;
|
|
}
|
|
onGroupDraft({
|
|
columnName: sourceColumnName,
|
|
groupIndex: -1
|
|
});
|
|
_this.setState({
|
|
targetItemIndex: -1
|
|
});
|
|
};
|
|
_this.onDrop = function () {
|
|
var onGroup = _this.props.onGroup;
|
|
var _this$state2 = _this.state,
|
|
sourceColumnName = _this$state2.sourceColumnName,
|
|
targetItemIndex = _this$state2.targetItemIndex;
|
|
|
|
_this.resetState();
|
|
onGroup({
|
|
columnName: sourceColumnName,
|
|
groupIndex: targetItemIndex
|
|
});
|
|
};
|
|
_this.onDragStart = function (columnName) {
|
|
_this.draggingColumnName = columnName;
|
|
};
|
|
_this.onDragEnd = function () {
|
|
_this.draggingColumnName = null;
|
|
var _this$state3 = _this.state,
|
|
sourceColumnName = _this$state3.sourceColumnName,
|
|
targetItemIndex = _this$state3.targetItemIndex;
|
|
var onGroup = _this.props.onGroup;
|
|
|
|
if (sourceColumnName && targetItemIndex === -1) {
|
|
onGroup({
|
|
columnName: sourceColumnName
|
|
});
|
|
}
|
|
_this.resetState();
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(GroupPanelLayout, [{
|
|
key: 'resetState',
|
|
value: function resetState() {
|
|
var onGroupDraftCancel = this.props.onGroupDraftCancel;
|
|
|
|
onGroupDraftCancel();
|
|
this.setState({
|
|
sourceColumnName: null,
|
|
targetItemIndex: -1
|
|
});
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
items = _props.items,
|
|
EmptyMessage = _props.emptyMessageComponent,
|
|
Container = _props.containerComponent,
|
|
Item = _props.itemComponent,
|
|
draggingEnabled = _props.draggingEnabled;
|
|
|
|
|
|
this.itemRefs = [];
|
|
|
|
var groupPanel = items.length ? React.createElement(
|
|
Container,
|
|
null,
|
|
items.map(function (item) {
|
|
return React.createElement(ItemLayout, {
|
|
key: item.column.name,
|
|
ref: function ref(element) {
|
|
return element && _this2.itemRefs.push(element);
|
|
},
|
|
item: item,
|
|
itemComponent: Item,
|
|
draggingEnabled: draggingEnabled,
|
|
onDragStart: function onDragStart() {
|
|
return _this2.onDragStart(item.column.name);
|
|
},
|
|
onDragEnd: _this2.onDragEnd
|
|
});
|
|
})
|
|
) : React.createElement(EmptyMessage, null);
|
|
|
|
return draggingEnabled ? React.createElement(
|
|
DropTarget,
|
|
{
|
|
onEnter: this.onEnter,
|
|
onOver: this.onOver,
|
|
onLeave: this.onLeave,
|
|
onDrop: this.onDrop
|
|
},
|
|
groupPanel
|
|
) : groupPanel;
|
|
}
|
|
}]);
|
|
return GroupPanelLayout;
|
|
}(React.PureComponent);
|
|
|
|
GroupPanelLayout.propTypes = {
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
column: PropTypes.object,
|
|
draft: PropTypes.bool
|
|
})).isRequired,
|
|
onGroup: PropTypes.func,
|
|
itemComponent: PropTypes.func.isRequired,
|
|
containerComponent: PropTypes.func.isRequired,
|
|
emptyMessageComponent: PropTypes.func.isRequired,
|
|
draggingEnabled: PropTypes.bool,
|
|
onGroupDraft: PropTypes.func,
|
|
onGroupDraftCancel: PropTypes.func
|
|
};
|
|
|
|
GroupPanelLayout.defaultProps = {
|
|
onGroup: function onGroup() {},
|
|
draggingEnabled: false,
|
|
onGroupDraft: function onGroupDraft() {},
|
|
onGroupDraftCancel: function onGroupDraftCancel() {}
|
|
};
|
|
|
|
var Toolbar = function (_React$PureComponent) {
|
|
inherits(Toolbar, _React$PureComponent);
|
|
|
|
function Toolbar() {
|
|
classCallCheck(this, Toolbar);
|
|
return possibleConstructorReturn(this, (Toolbar.__proto__ || Object.getPrototypeOf(Toolbar)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Toolbar, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
Root = _props.rootComponent,
|
|
FlexibleSpaceComponent = _props.flexibleSpaceComponent;
|
|
|
|
return React.createElement(
|
|
Plugin,
|
|
{
|
|
name: 'Toolbar'
|
|
},
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'header' },
|
|
React.createElement(
|
|
Root,
|
|
null,
|
|
React.createElement(TemplatePlaceholder, { name: 'toolbarContent' })
|
|
),
|
|
React.createElement(TemplatePlaceholder, null)
|
|
),
|
|
React.createElement(
|
|
Template,
|
|
{ name: 'toolbarContent' },
|
|
React.createElement(FlexibleSpaceComponent, null)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return Toolbar;
|
|
}(React.PureComponent);
|
|
|
|
Toolbar.propTypes = {
|
|
rootComponent: PropTypes.func.isRequired,
|
|
flexibleSpaceComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
export { Grid, ColumnChooser, FilteringState, IntegratedFiltering, EditingState, PagingState, IntegratedPaging, CustomPaging, GroupingState, IntegratedGrouping, CustomGrouping, SelectionState, IntegratedSelection, SortingState, IntegratedSorting, DragDropProvider$1 as DragDropProvider, TableColumnReordering, Table, TableSelection, RowDetailState, TableRowDetail, TableGroupRow, TableHeaderRow, TableFilterRow, TableEditRow, TableEditColumn, TableColumnResizing, PagingPanel, GroupingPanel, DataTypeProvider, TableColumnVisibility, TableLayout, VirtualTableLayout, StaticTableLayout, GroupPanelLayout, Toolbar };
|
|
//# sourceMappingURL=dx-react-grid.es.js.map
|