4634 lines
148 KiB
JavaScript
4634 lines
148 KiB
JavaScript
/**
|
|
* Bundle of @devexpress/dx-react-grid
|
|
* Generated: 2017-11-10
|
|
* Version: 1.0.0-beta.1
|
|
* License: https://js.devexpress.com/Licensing
|
|
*/
|
|
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@devexpress/dx-react-core'), require('@devexpress/dx-grid-core'), require('react-dom')) :
|
|
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@devexpress/dx-react-core', '@devexpress/dx-grid-core', 'react-dom'], factory) :
|
|
(factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactGrid = {}),global.React,global.PropTypes,global.DevExpress.DXReactCore,global.DevExpress.DXGridCore,global.ReactDOM));
|
|
}(this, (function (exports,React,PropTypes,dxReactCore,dxGridCore,reactDom) { 'use strict';
|
|
|
|
React = React && React.hasOwnProperty('default') ? React['default'] : React;
|
|
PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
|
|
|
|
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,
|
|
rootTemplate = _props.rootTemplate,
|
|
headerPlaceholderTemplate = _props.headerPlaceholderTemplate,
|
|
footerPlaceholderTemplate = _props.footerPlaceholderTemplate;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
null,
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', value: rows }),
|
|
React.createElement(dxReactCore.Getter, { name: 'getRowId', value: dxGridCore.rowIdGetter(getRowId, rows) }),
|
|
React.createElement(dxReactCore.Getter, { name: 'columns', value: columns }),
|
|
React.createElement(dxReactCore.Getter, { name: 'getCellValue', value: dxGridCore.cellValueGetter(getCellValue, columns) }),
|
|
React.createElement(dxReactCore.Template, { name: 'header' }),
|
|
React.createElement(dxReactCore.Template, { name: 'body' }),
|
|
React.createElement(dxReactCore.Template, { name: 'footer' }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'root' },
|
|
function () {
|
|
return rootTemplate({
|
|
headerTemplate: function headerTemplate() {
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{ name: 'header' },
|
|
function (content) {
|
|
return headerPlaceholderTemplate ? headerPlaceholderTemplate({ children: content }) : content;
|
|
}
|
|
);
|
|
},
|
|
bodyTemplate: function bodyTemplate() {
|
|
return React.createElement(dxReactCore.TemplatePlaceholder, { name: 'body' });
|
|
},
|
|
footerTemplate: function footerTemplate() {
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{ name: 'footer' },
|
|
function (content) {
|
|
return footerPlaceholderTemplate ? footerPlaceholderTemplate({ children: content }) : content;
|
|
}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return GridCore;
|
|
}(React.PureComponent);
|
|
|
|
GridCore.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
getRowId: PropTypes.func,
|
|
getCellValue: PropTypes.func,
|
|
columns: PropTypes.array.isRequired,
|
|
rootTemplate: PropTypes.func.isRequired,
|
|
headerPlaceholderTemplate: PropTypes.func,
|
|
footerPlaceholderTemplate: PropTypes.func
|
|
};
|
|
|
|
GridCore.defaultProps = {
|
|
getRowId: null,
|
|
getCellValue: null,
|
|
headerPlaceholderTemplate: null,
|
|
footerPlaceholderTemplate: null
|
|
};
|
|
|
|
var Grid = function Grid(_ref) {
|
|
var rows = _ref.rows,
|
|
columns = _ref.columns,
|
|
getRowId = _ref.getRowId,
|
|
getCellValue = _ref.getCellValue,
|
|
rootTemplate = _ref.rootTemplate,
|
|
headerPlaceholderTemplate = _ref.headerPlaceholderTemplate,
|
|
footerPlaceholderTemplate = _ref.footerPlaceholderTemplate,
|
|
children = _ref.children;
|
|
return React.createElement(
|
|
dxReactCore.PluginHost,
|
|
null,
|
|
React.createElement(GridCore, {
|
|
rows: rows,
|
|
columns: columns,
|
|
getRowId: getRowId,
|
|
getCellValue: getCellValue,
|
|
rootTemplate: rootTemplate,
|
|
headerPlaceholderTemplate: headerPlaceholderTemplate,
|
|
footerPlaceholderTemplate: footerPlaceholderTemplate
|
|
}),
|
|
children
|
|
);
|
|
};
|
|
|
|
Grid.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
getRowId: PropTypes.func,
|
|
getCellValue: PropTypes.func,
|
|
columns: PropTypes.array.isRequired,
|
|
rootTemplate: PropTypes.func.isRequired,
|
|
headerPlaceholderTemplate: PropTypes.func,
|
|
footerPlaceholderTemplate: PropTypes.func,
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
|
};
|
|
|
|
Grid.defaultProps = {
|
|
getRowId: null,
|
|
getCellValue: null,
|
|
headerPlaceholderTemplate: null,
|
|
footerPlaceholderTemplate: null,
|
|
children: null
|
|
};
|
|
|
|
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));
|
|
|
|
var onHiddenColumnsChange = props.onHiddenColumnsChange;
|
|
|
|
|
|
_this.handleColumnToggle = function (columnName) {
|
|
if (!onHiddenColumnsChange) return;
|
|
|
|
var hiddenColumns = _this.props.hiddenColumns;
|
|
|
|
var nextHiddenColumnNames = dxGridCore.toggleColumn(hiddenColumns, columnName);
|
|
onHiddenColumnsChange(nextHiddenColumnNames);
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(ColumnChooser, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
columns = _props.columns,
|
|
hiddenColumns = _props.hiddenColumns,
|
|
containerTemplate = _props.containerTemplate,
|
|
itemTemplate = _props.itemTemplate;
|
|
|
|
var items = dxGridCore.columnChooserItems(columns, hiddenColumns);
|
|
var handleItemToggle = function handleItemToggle(item) {
|
|
return _this2.handleColumnToggle(item.column.name);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: containerTemplate,
|
|
params: {
|
|
items: items,
|
|
onItemToggle: handleItemToggle
|
|
}
|
|
},
|
|
items.map(function (item) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
key: item.column.name,
|
|
template: itemTemplate,
|
|
params: {
|
|
item: item,
|
|
onToggle: function onToggle() {
|
|
return handleItemToggle(item);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return ColumnChooser;
|
|
}(React.PureComponent);
|
|
|
|
ColumnChooser.propTypes = {
|
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
hiddenColumns: PropTypes.arrayOf(PropTypes.string),
|
|
onHiddenColumnsChange: PropTypes.func,
|
|
containerTemplate: PropTypes.func.isRequired,
|
|
itemTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
ColumnChooser.defaultProps = {
|
|
hiddenColumns: [],
|
|
onHiddenColumnsChange: undefined
|
|
};
|
|
|
|
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.defaultFilters || []
|
|
};
|
|
|
|
_this.setColumnFilter = function (filters, _ref) {
|
|
var columnName = _ref.columnName,
|
|
config = _ref.config;
|
|
var onFiltersChange = _this.props.onFiltersChange;
|
|
|
|
var nextFilters = dxGridCore.setColumnFilter(filters, { columnName: columnName, config: config });
|
|
_this.setState({ filters: nextFilters });
|
|
if (onFiltersChange) {
|
|
onFiltersChange(nextFilters);
|
|
}
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(FilteringState, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var filters = this.props.filters || this.state.filters;
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'FilteringState'
|
|
},
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'setColumnFilter',
|
|
action: function action(_ref2) {
|
|
var columnName = _ref2.columnName,
|
|
config = _ref2.config;
|
|
return _this2.setColumnFilter(filters, { columnName: columnName, config: config });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Getter, { name: 'filters', value: filters })
|
|
);
|
|
}
|
|
}]);
|
|
return FilteringState;
|
|
}(React.PureComponent);
|
|
|
|
FilteringState.propTypes = {
|
|
filters: PropTypes.array,
|
|
defaultFilters: PropTypes.array,
|
|
onFiltersChange: PropTypes.func
|
|
};
|
|
|
|
FilteringState.defaultProps = {
|
|
filters: undefined,
|
|
defaultFilters: undefined,
|
|
onFiltersChange: undefined
|
|
};
|
|
|
|
var pluginDependencies = [{ pluginName: 'FilteringState' }];
|
|
|
|
var LocalFiltering = function (_React$PureComponent) {
|
|
inherits(LocalFiltering, _React$PureComponent);
|
|
|
|
function LocalFiltering() {
|
|
classCallCheck(this, LocalFiltering);
|
|
return possibleConstructorReturn(this, (LocalFiltering.__proto__ || Object.getPrototypeOf(LocalFiltering)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(LocalFiltering, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var getColumnPredicate = this.props.getColumnPredicate;
|
|
|
|
|
|
var rowsComputed = function rowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
filters = _ref.filters,
|
|
getCellValue = _ref.getCellValue,
|
|
isGroupRow = _ref.isGroupRow,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return dxGridCore.filteredRows(rows, filters, getCellValue, getColumnPredicate, isGroupRow, getRowLevelKey);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'LocalFiltering',
|
|
dependencies: pluginDependencies
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: rowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return LocalFiltering;
|
|
}(React.PureComponent);
|
|
|
|
LocalFiltering.propTypes = {
|
|
getColumnPredicate: PropTypes.func
|
|
};
|
|
|
|
LocalFiltering.defaultProps = {
|
|
getColumnPredicate: 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 = {
|
|
editingRows: props.defaultEditingRows || [],
|
|
addedRows: props.defaultAddedRows || [],
|
|
changedRows: props.defaultChangedRows || {},
|
|
deletedRows: props.defaultDeletedRows || []
|
|
};
|
|
|
|
_this.reduceEditingRows = function (reducer) {
|
|
return function (editingRows, payload) {
|
|
var onEditingRowsChange = _this.props.onEditingRowsChange;
|
|
|
|
var nextEditingRows = reducer(editingRows, payload);
|
|
_this.setState({ editingRows: nextEditingRows });
|
|
if (onEditingRowsChange) {
|
|
onEditingRowsChange(nextEditingRows);
|
|
}
|
|
};
|
|
};
|
|
_this.reduceChangedRows = function (reducer) {
|
|
return function (changedRows, payload) {
|
|
var onChangedRowsChange = _this.props.onChangedRowsChange;
|
|
|
|
var nextChangedRows = reducer(changedRows, payload);
|
|
_this.setState({ changedRows: nextChangedRows });
|
|
if (onChangedRowsChange) {
|
|
onChangedRowsChange(nextChangedRows);
|
|
}
|
|
};
|
|
};
|
|
_this.reduceAddedRows = function (reducer) {
|
|
return function (addedRows, payload) {
|
|
var onAddedRowsChange = _this.props.onAddedRowsChange;
|
|
|
|
var nextAddedRows = reducer(addedRows, payload);
|
|
_this.setState({ addedRows: nextAddedRows });
|
|
if (onAddedRowsChange) {
|
|
onAddedRowsChange(nextAddedRows);
|
|
}
|
|
};
|
|
};
|
|
_this.reduceDeletedRows = function (reducer) {
|
|
return function (deletedRows, payload) {
|
|
var onDeletedRowsChange = _this.props.onDeletedRowsChange;
|
|
|
|
var nextDeletedRows = reducer(deletedRows, payload);
|
|
_this.setState({ deletedRows: nextDeletedRows });
|
|
if (onDeletedRowsChange) {
|
|
onDeletedRowsChange(nextDeletedRows);
|
|
}
|
|
};
|
|
};
|
|
|
|
_this.startEditRows = _this.reduceEditingRows(dxGridCore.startEditRows);
|
|
_this.stopEditRows = _this.reduceEditingRows(dxGridCore.stopEditRows);
|
|
|
|
_this.changeRow = _this.reduceChangedRows(dxGridCore.changeRow);
|
|
_this.cancelChangedRows = _this.reduceChangedRows(dxGridCore.cancelChanges);
|
|
|
|
_this.addRow = _this.reduceAddedRows(dxGridCore.addRow);
|
|
_this.changeAddedRow = _this.reduceAddedRows(dxGridCore.changeAddedRow);
|
|
_this.cancelAddedRows = _this.reduceAddedRows(dxGridCore.cancelAddedRows);
|
|
|
|
_this.deleteRows = _this.reduceDeletedRows(dxGridCore.deleteRows);
|
|
_this.cancelDeletedRows = _this.reduceDeletedRows(dxGridCore.cancelDeletedRows);
|
|
|
|
_this.commitAddedRows = function (addedRows, _ref) {
|
|
var rowIds = _ref.rowIds;
|
|
|
|
var toCommit = dxGridCore.addedRowsByIds(addedRows, rowIds);
|
|
var changeSet = { added: toCommit };
|
|
_this.commitChanges(changeSet);
|
|
_this.cancelAddedRows(addedRows, { rowIds: rowIds });
|
|
};
|
|
_this.commitChangedRows = function (changedRows, _ref2) {
|
|
var rowIds = _ref2.rowIds;
|
|
|
|
var toCommit = dxGridCore.changedRowsByIds(changedRows, rowIds);
|
|
var changeSet = { changed: toCommit };
|
|
_this.commitChanges(changeSet);
|
|
_this.cancelChangedRows(changedRows, { rowIds: rowIds });
|
|
};
|
|
_this.commitDeletedRows = function (deletedRows, _ref3) {
|
|
var rowIds = _ref3.rowIds;
|
|
|
|
var changeSet = { deleted: rowIds };
|
|
_this.commitChanges(changeSet);
|
|
_this.cancelDeletedRows(deletedRows, { rowIds: rowIds });
|
|
};
|
|
|
|
_this.commitChanges = function (changeSet) {
|
|
var onCommitChanges = _this.props.onCommitChanges;
|
|
|
|
if (onCommitChanges) {
|
|
onCommitChanges(changeSet);
|
|
}
|
|
};
|
|
|
|
_this.createRowChangeComputed = function (_ref4) {
|
|
var columns = _ref4.columns;
|
|
return dxGridCore.computedCreateRowChange(columns);
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(EditingState, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var editingRows = this.props.editingRows || this.state.editingRows;
|
|
var changedRows = this.props.changedRows || this.state.changedRows;
|
|
var addedRows = this.props.addedRows || this.state.addedRows;
|
|
var deletedRows = this.props.deletedRows || this.state.deletedRows;
|
|
var createRowChange = this.props.createRowChange;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'EditingState'
|
|
},
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'startEditRows',
|
|
action: function action(_ref5) {
|
|
var rowIds = _ref5.rowIds;
|
|
return _this2.startEditRows(editingRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'stopEditRows',
|
|
action: function action(_ref6) {
|
|
var rowIds = _ref6.rowIds;
|
|
return _this2.stopEditRows(editingRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'addRow',
|
|
action: function action() {
|
|
return _this2.addRow(addedRows, { row: {} });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'changeAddedRow',
|
|
action: function action(_ref7) {
|
|
var rowId = _ref7.rowId,
|
|
change = _ref7.change;
|
|
return _this2.changeAddedRow(addedRows, { rowId: rowId, change: change });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'cancelAddedRows',
|
|
action: function action(_ref8) {
|
|
var rowIds = _ref8.rowIds;
|
|
return _this2.cancelAddedRows(addedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'commitAddedRows',
|
|
action: function action(_ref9) {
|
|
var rowIds = _ref9.rowIds;
|
|
return _this2.commitAddedRows(addedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'changeRow',
|
|
action: function action(_ref10) {
|
|
var rowId = _ref10.rowId,
|
|
change = _ref10.change;
|
|
return _this2.changeRow(changedRows, { rowId: rowId, change: change });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'cancelChangedRows',
|
|
action: function action(_ref11) {
|
|
var rowIds = _ref11.rowIds;
|
|
return _this2.cancelChangedRows(changedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'commitChangedRows',
|
|
action: function action(_ref12) {
|
|
var rowIds = _ref12.rowIds;
|
|
return _this2.commitChangedRows(changedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'deleteRows',
|
|
action: function action(_ref13) {
|
|
var rowIds = _ref13.rowIds;
|
|
return _this2.deleteRows(deletedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'cancelDeletedRows',
|
|
action: function action(_ref14) {
|
|
var rowIds = _ref14.rowIds;
|
|
return _this2.cancelDeletedRows(deletedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'commitDeletedRows',
|
|
action: function action(_ref15) {
|
|
var rowIds = _ref15.rowIds;
|
|
return _this2.commitDeletedRows(deletedRows, { rowIds: rowIds });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Getter, { name: 'editingRows', value: editingRows }),
|
|
React.createElement(dxReactCore.Getter, { name: 'changedRows', value: changedRows }),
|
|
React.createElement(dxReactCore.Getter, { name: 'addedRows', value: addedRows }),
|
|
React.createElement(dxReactCore.Getter, { name: 'deletedRows', value: deletedRows }),
|
|
React.createElement(dxReactCore.Getter, {
|
|
name: 'createRowChange',
|
|
computed: createRowChange ? function () {
|
|
return createRowChange;
|
|
} : this.createRowChangeComputed
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return EditingState;
|
|
}(React.PureComponent);
|
|
|
|
EditingState.propTypes = {
|
|
editingRows: PropTypes.array,
|
|
defaultEditingRows: PropTypes.array,
|
|
onEditingRowsChange: PropTypes.func,
|
|
|
|
addedRows: PropTypes.array,
|
|
defaultAddedRows: PropTypes.array,
|
|
onAddedRowsChange: PropTypes.func,
|
|
|
|
changedRows: PropTypes.object,
|
|
defaultChangedRows: PropTypes.object,
|
|
onChangedRowsChange: PropTypes.func,
|
|
createRowChange: PropTypes.func,
|
|
|
|
deletedRows: PropTypes.array,
|
|
defaultDeletedRows: PropTypes.array,
|
|
onDeletedRowsChange: PropTypes.func,
|
|
|
|
onCommitChanges: PropTypes.func.isRequired
|
|
};
|
|
|
|
EditingState.defaultProps = {
|
|
editingRows: undefined,
|
|
defaultEditingRows: undefined,
|
|
onEditingRowsChange: undefined,
|
|
|
|
addedRows: undefined,
|
|
defaultAddedRows: undefined,
|
|
onAddedRowsChange: undefined,
|
|
|
|
deletedRows: undefined,
|
|
defaultDeletedRows: undefined,
|
|
onDeletedRowsChange: undefined,
|
|
|
|
changedRows: undefined,
|
|
defaultChangedRows: undefined,
|
|
onChangedRowsChange: undefined,
|
|
createRowChange: 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.defaultCurrentPage,
|
|
pageSize: props.defaultPageSize
|
|
};
|
|
|
|
_this.setCurrentPage = function (page) {
|
|
var onCurrentPageChange = _this.props.onCurrentPageChange;
|
|
|
|
var currentPage = dxGridCore.setCurrentPage(_this.state.currentPage, page);
|
|
_this.setState({ currentPage: currentPage });
|
|
if (onCurrentPageChange) {
|
|
onCurrentPageChange(currentPage);
|
|
}
|
|
};
|
|
|
|
_this.setPageSize = function (size) {
|
|
var onPageSizeChange = _this.props.onPageSizeChange;
|
|
|
|
var pageSize = dxGridCore.setPageSize(_this.state.pageSize, size);
|
|
_this.setState({ pageSize: pageSize });
|
|
if (onPageSizeChange) {
|
|
onPageSizeChange(pageSize);
|
|
}
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(PagingState, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
_props$pageSize = _props.pageSize,
|
|
pageSize = _props$pageSize === undefined ? this.state.pageSize : _props$pageSize,
|
|
_props$currentPage = _props.currentPage,
|
|
currentPage = _props$currentPage === undefined ? this.state.currentPage : _props$currentPage,
|
|
totalCount = _props.totalCount;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'PagingState'
|
|
},
|
|
React.createElement(dxReactCore.Action, { name: 'setCurrentPage', action: function action(page) {
|
|
return _this2.setCurrentPage(page);
|
|
} }),
|
|
React.createElement(dxReactCore.Action, { name: 'setPageSize', action: function action(size) {
|
|
return _this2.setPageSize(size);
|
|
} }),
|
|
React.createElement(dxReactCore.Getter, { name: 'currentPage', value: currentPage }),
|
|
React.createElement(dxReactCore.Getter, { name: 'pageSize', value: pageSize }),
|
|
React.createElement(dxReactCore.Getter, { name: 'totalCount', value: totalCount })
|
|
);
|
|
}
|
|
}]);
|
|
return PagingState;
|
|
}(React.PureComponent);
|
|
|
|
PagingState.propTypes = {
|
|
pageSize: PropTypes.number,
|
|
defaultPageSize: PropTypes.number,
|
|
onPageSizeChange: PropTypes.func,
|
|
currentPage: PropTypes.number,
|
|
defaultCurrentPage: PropTypes.number,
|
|
onCurrentPageChange: PropTypes.func,
|
|
totalCount: PropTypes.number
|
|
};
|
|
|
|
PagingState.defaultProps = {
|
|
pageSize: undefined,
|
|
defaultPageSize: 10,
|
|
onPageSizeChange: undefined,
|
|
currentPage: undefined,
|
|
defaultCurrentPage: 0,
|
|
onCurrentPageChange: undefined,
|
|
totalCount: 0
|
|
};
|
|
|
|
var pluginDependencies$1 = [{ pluginName: 'PagingState' }];
|
|
|
|
var rowsWithHeadersComputed = function rowsWithHeadersComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
pageSize = _ref.pageSize,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return dxGridCore.rowsWithPageHeaders(rows, pageSize, getRowLevelKey);
|
|
};
|
|
var totalCountComputed = function totalCountComputed(_ref2) {
|
|
var rows = _ref2.rows;
|
|
return dxGridCore.rowCount(rows);
|
|
};
|
|
var paginatedRowsComputed = function paginatedRowsComputed(_ref3) {
|
|
var rows = _ref3.rows,
|
|
pageSize = _ref3.pageSize,
|
|
currentPage = _ref3.currentPage;
|
|
return dxGridCore.paginatedRows(rows, pageSize, currentPage);
|
|
};
|
|
|
|
// eslint-disable-next-line react/prefer-stateless-function
|
|
var LocalPaging = function (_React$PureComponent) {
|
|
inherits(LocalPaging, _React$PureComponent);
|
|
|
|
function LocalPaging() {
|
|
classCallCheck(this, LocalPaging);
|
|
return possibleConstructorReturn(this, (LocalPaging.__proto__ || Object.getPrototypeOf(LocalPaging)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(LocalPaging, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'LocalPaging',
|
|
dependencies: pluginDependencies$1
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: rowsWithHeadersComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'totalCount', computed: totalCountComputed }),
|
|
React.createElement(dxReactCore.Watcher, {
|
|
watch: function watch(getter) {
|
|
return [getter('totalCount'), getter('currentPage'), getter('pageSize')];
|
|
},
|
|
onChange: function onChange(action, totalCount, currentPage, pageSize) {
|
|
var totalPages = dxGridCore.pageCount(totalCount, pageSize);
|
|
if (totalPages - 1 < currentPage) {
|
|
action('setCurrentPage')(Math.max(totalPages - 1, 0));
|
|
}
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: paginatedRowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return LocalPaging;
|
|
}(React.PureComponent);
|
|
|
|
var dependencies = [{ pluginName: '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.defaultGrouping,
|
|
groupingChange: null,
|
|
expandedGroups: props.defaultExpandedGroups
|
|
};
|
|
|
|
_this.groupByColumn = _this.groupByColumn.bind(_this);
|
|
_this.toggleGroupExpanded = _this.applyReducer.bind(_this, dxGridCore.toggleExpandedGroups);
|
|
_this.draftGroupingChange = _this.applyReducer.bind(_this, dxGridCore.draftGroupingChange);
|
|
_this.cancelGroupingChange = _this.applyReducer.bind(_this, dxGridCore.cancelGroupingChange);
|
|
_this.setColumnSorting = _this.setColumnSorting.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
createClass(GroupingState, [{
|
|
key: 'getState',
|
|
value: function getState() {
|
|
return _extends({}, this.state, {
|
|
grouping: this.props.grouping || this.state.grouping,
|
|
expandedGroups: this.props.expandedGroups || this.state.expandedGroups
|
|
});
|
|
}
|
|
}, {
|
|
key: 'setColumnSorting',
|
|
value: function setColumnSorting$$1(_ref, _ref2, _ref3) {
|
|
var sorting = _ref2.sorting;
|
|
var _setColumnSorting = _ref3.setColumnSorting;
|
|
var columnName = _ref.columnName,
|
|
keepOther = _ref.keepOther,
|
|
restParams = objectWithoutProperties(_ref, ['columnName', 'keepOther']);
|
|
|
|
var _getState = this.getState(),
|
|
grouping = _getState.grouping;
|
|
|
|
var groupingIndex = grouping.findIndex(function (columnGrouping) {
|
|
return columnGrouping.columnName === columnName;
|
|
});
|
|
if (groupingIndex === -1) {
|
|
_setColumnSorting(_extends({
|
|
columnName: columnName,
|
|
keepOther: keepOther || grouping.map(function (columnGrouping) {
|
|
return columnGrouping.columnName;
|
|
})
|
|
}, restParams));
|
|
return false;
|
|
}
|
|
|
|
var sortIndex = adjustSortIndex(groupingIndex, grouping, sorting);
|
|
_setColumnSorting(_extends({
|
|
columnName: columnName,
|
|
keepOther: true,
|
|
sortIndex: sortIndex
|
|
}, restParams));
|
|
return false;
|
|
}
|
|
}, {
|
|
key: 'groupByColumn',
|
|
value: function groupByColumn$$1(_ref4, _ref5, _ref6) {
|
|
var columnName = _ref4.columnName,
|
|
groupIndex = _ref4.groupIndex;
|
|
var sorting = _ref5.sorting;
|
|
var setColumnSorting$$1 = _ref6.setColumnSorting;
|
|
var prevGrouping = this.state.grouping;
|
|
|
|
var _applyReducer = this.applyReducer(dxGridCore.groupByColumn, { columnName: columnName, groupIndex: groupIndex }),
|
|
grouping = _applyReducer.grouping;
|
|
|
|
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;
|
|
|
|
setColumnSorting$$1(_extends({
|
|
keepOther: true,
|
|
sortIndex: sortIndex
|
|
}, sorting[columnSortingIndex]));
|
|
}
|
|
}, {
|
|
key: 'applyReducer',
|
|
value: function applyReducer(reduce, payload) {
|
|
var prevState = this.getState();
|
|
var statePart = reduce(prevState, payload);
|
|
this.setState(statePart);
|
|
var state = _extends({}, prevState, statePart);
|
|
|
|
var grouping = state.grouping;
|
|
var onGroupingChange = this.props.onGroupingChange;
|
|
|
|
if (onGroupingChange && grouping !== prevState.grouping) {
|
|
onGroupingChange(grouping);
|
|
}
|
|
|
|
var expandedGroups = state.expandedGroups;
|
|
var onExpandedGroupsChange = this.props.onExpandedGroupsChange;
|
|
|
|
if (onExpandedGroupsChange && expandedGroups !== prevState.expandedGroups) {
|
|
onExpandedGroupsChange(expandedGroups);
|
|
}
|
|
|
|
return state;
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _getState2 = this.getState(),
|
|
grouping = _getState2.grouping,
|
|
groupingChange = _getState2.groupingChange,
|
|
expandedGroups = _getState2.expandedGroups;
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'GroupingState',
|
|
dependencies: dependencies
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'grouping', value: grouping }),
|
|
React.createElement(dxReactCore.Getter, { name: 'draftGrouping', value: dxGridCore.draftGrouping(grouping, groupingChange) }),
|
|
React.createElement(dxReactCore.Getter, { name: 'expandedGroups', value: new Set(expandedGroups) }),
|
|
React.createElement(dxReactCore.Action, { name: 'groupByColumn', action: this.groupByColumn }),
|
|
React.createElement(dxReactCore.Action, { name: 'toggleGroupExpanded', action: this.toggleGroupExpanded }),
|
|
React.createElement(dxReactCore.Action, { name: 'draftGroupingChange', action: this.draftGroupingChange }),
|
|
React.createElement(dxReactCore.Action, { name: 'cancelGroupingChange', action: this.cancelGroupingChange }),
|
|
React.createElement(dxReactCore.Action, { name: 'setColumnSorting', action: this.setColumnSorting })
|
|
);
|
|
}
|
|
}]);
|
|
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$2 = [{ pluginName: 'GroupingState' }];
|
|
|
|
var expandedGroupedRowsComputed = function expandedGroupedRowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
grouping = _ref.grouping,
|
|
expandedGroups = _ref.expandedGroups;
|
|
return dxGridCore.expandedGroupRows(rows, grouping, expandedGroups);
|
|
};
|
|
|
|
var LocalGrouping = function (_React$PureComponent) {
|
|
inherits(LocalGrouping, _React$PureComponent);
|
|
|
|
function LocalGrouping() {
|
|
classCallCheck(this, LocalGrouping);
|
|
return possibleConstructorReturn(this, (LocalGrouping.__proto__ || Object.getPrototypeOf(LocalGrouping)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(LocalGrouping, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var getColumnIdentity = this.props.getColumnIdentity;
|
|
|
|
|
|
var groupedRowsComputed = function groupedRowsComputed(_ref2) {
|
|
var rows = _ref2.rows,
|
|
grouping = _ref2.grouping,
|
|
getCellValue = _ref2.getCellValue;
|
|
return dxGridCore.groupedRows(rows, grouping, getCellValue, getColumnIdentity);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'LocalGrouping',
|
|
dependencies: pluginDependencies$2
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'isGroupRow', value: dxGridCore.groupRowChecker }),
|
|
React.createElement(dxReactCore.Getter, { name: 'getRowLevelKey', value: dxGridCore.groupRowLevelKeyGetter }),
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: groupedRowsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: expandedGroupedRowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return LocalGrouping;
|
|
}(React.PureComponent);
|
|
|
|
LocalGrouping.propTypes = {
|
|
getColumnIdentity: PropTypes.func
|
|
};
|
|
|
|
LocalGrouping.defaultProps = {
|
|
getColumnIdentity: undefined
|
|
};
|
|
|
|
var pluginDependencies$3 = [{ pluginName: 'GroupingState' }];
|
|
|
|
var expandedGroupedRowsComputed$1 = function expandedGroupedRowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
grouping = _ref.grouping,
|
|
expandedGroups = _ref.expandedGroups;
|
|
return dxGridCore.expandedGroupRows(rows, grouping, expandedGroups);
|
|
};
|
|
var getRowIdComputed = function getRowIdComputed(_ref2) {
|
|
var getRowId = _ref2.getRowId,
|
|
rows = _ref2.rows;
|
|
return dxGridCore.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 dxGridCore.customGroupedRows(rows, grouping, getChildGroups);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'CustomGrouping',
|
|
dependencies: pluginDependencies$3
|
|
},
|
|
appliedGrouping && React.createElement(dxReactCore.Getter, { name: 'grouping', value: appliedGrouping }),
|
|
appliedExpandedGroups && React.createElement(dxReactCore.Getter, { name: 'expandedGroups', value: new Set(appliedExpandedGroups) }),
|
|
React.createElement(dxReactCore.Getter, { name: 'isGroupRow', value: dxGridCore.groupRowChecker }),
|
|
React.createElement(dxReactCore.Getter, { name: 'getRowLevelKey', value: dxGridCore.groupRowLevelKeyGetter }),
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: groupedRowsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'getRowId', computed: getRowIdComputed }),
|
|
React.createElement(dxReactCore.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 availableToSelectComputed = function availableToSelectComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
getRowId = _ref.getRowId,
|
|
isGroupRow = _ref.isGroupRow;
|
|
return dxGridCore.getAvailableToSelect(rows, getRowId, isGroupRow);
|
|
};
|
|
|
|
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.defaultSelection || []
|
|
};
|
|
|
|
_this.changeSelection = function (selection) {
|
|
var onSelectionChange = _this.props.onSelectionChange;
|
|
|
|
_this.setState({ selection: selection });
|
|
if (onSelectionChange) {
|
|
onSelectionChange(selection);
|
|
}
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(SelectionState, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var selection = this.props.selection || this.state.selection;
|
|
|
|
var selectionComputed = function selectionComputed(_ref2) {
|
|
var availableToSelect = _ref2.availableToSelect;
|
|
return dxGridCore.getAvailableSelection(selection, availableToSelect);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'SelectionState'
|
|
},
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'setRowsSelection',
|
|
action: function action(_ref3) {
|
|
var rowIds = _ref3.rowIds,
|
|
selected = _ref3.selected;
|
|
|
|
_this2.changeSelection(dxGridCore.setRowsSelection(selection, { rowIds: rowIds, selected: selected }));
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Getter, { name: 'availableToSelect', computed: availableToSelectComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'selection', computed: selectionComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return SelectionState;
|
|
}(React.PureComponent);
|
|
|
|
SelectionState.propTypes = {
|
|
selection: PropTypes.array,
|
|
defaultSelection: PropTypes.array,
|
|
onSelectionChange: PropTypes.func
|
|
};
|
|
|
|
SelectionState.defaultProps = {
|
|
selection: undefined,
|
|
defaultSelection: undefined,
|
|
onSelectionChange: undefined
|
|
};
|
|
|
|
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.defaultSorting
|
|
};
|
|
|
|
_this.setColumnSorting = _this.applyReducer.bind(_this, dxGridCore.setColumnSorting);
|
|
return _this;
|
|
}
|
|
|
|
createClass(SortingState, [{
|
|
key: 'getState',
|
|
value: function getState() {
|
|
return {
|
|
sorting: this.props.sorting || this.state.sorting
|
|
};
|
|
}
|
|
}, {
|
|
key: 'applyReducer',
|
|
value: function applyReducer(reduce, payload) {
|
|
var prevState = this.getState();
|
|
var statePart = reduce(prevState, payload);
|
|
this.setState(statePart);
|
|
var state = _extends({}, prevState, statePart);
|
|
|
|
var sorting = state.sorting;
|
|
var onSortingChange = this.props.onSortingChange;
|
|
|
|
if (onSortingChange && sorting !== prevState.sorting) {
|
|
onSortingChange(sorting);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _getState = this.getState(),
|
|
sorting = _getState.sorting;
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'SortingState'
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'sorting', value: sorting }),
|
|
React.createElement(dxReactCore.Action, { name: 'setColumnSorting', action: this.setColumnSorting })
|
|
);
|
|
}
|
|
}]);
|
|
return SortingState;
|
|
}(React.PureComponent);
|
|
|
|
SortingState.propTypes = {
|
|
sorting: PropTypes.array,
|
|
defaultSorting: PropTypes.array,
|
|
onSortingChange: PropTypes.func
|
|
};
|
|
|
|
SortingState.defaultProps = {
|
|
sorting: undefined,
|
|
defaultSorting: [],
|
|
onSortingChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$4 = [{ pluginName: 'SortingState' }];
|
|
|
|
var LocalSorting = function (_React$PureComponent) {
|
|
inherits(LocalSorting, _React$PureComponent);
|
|
|
|
function LocalSorting() {
|
|
classCallCheck(this, LocalSorting);
|
|
return possibleConstructorReturn(this, (LocalSorting.__proto__ || Object.getPrototypeOf(LocalSorting)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(LocalSorting, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var getColumnCompare = this.props.getColumnCompare;
|
|
|
|
var rowsComputed = function rowsComputed(_ref) {
|
|
var rows = _ref.rows,
|
|
sorting = _ref.sorting,
|
|
getCellValue = _ref.getCellValue,
|
|
isGroupRow = _ref.isGroupRow,
|
|
getRowLevelKey = _ref.getRowLevelKey;
|
|
return dxGridCore.sortedRows(rows, sorting, getCellValue, getColumnCompare, isGroupRow, getRowLevelKey);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'LocalSorting',
|
|
dependencies: pluginDependencies$4
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'rows', computed: rowsComputed })
|
|
);
|
|
}
|
|
}]);
|
|
return LocalSorting;
|
|
}(React.PureComponent);
|
|
|
|
LocalSorting.propTypes = {
|
|
getColumnCompare: PropTypes.func
|
|
};
|
|
|
|
LocalSorting.defaultProps = {
|
|
getColumnCompare: undefined
|
|
};
|
|
|
|
var getContainerTemplateArgs = function getContainerTemplateArgs(_ref, _ref2) {
|
|
var payload = _ref.payload,
|
|
clientOffset = _ref.clientOffset,
|
|
columnTemplate = _ref.columnTemplate;
|
|
var columns = _ref2.columns;
|
|
return {
|
|
clientOffset: clientOffset,
|
|
columns: payload.filter(function (item) {
|
|
return item.type === 'column';
|
|
}).map(function (item) {
|
|
return columns.find(function (column) {
|
|
return column.name === item.columnName;
|
|
});
|
|
}),
|
|
columnTemplate: columnTemplate
|
|
};
|
|
};
|
|
|
|
var DragDropContext$1 = function (_React$PureComponent) {
|
|
inherits(DragDropContext$$1, _React$PureComponent);
|
|
|
|
function DragDropContext$$1(props) {
|
|
classCallCheck(this, DragDropContext$$1);
|
|
|
|
var _this = possibleConstructorReturn(this, (DragDropContext$$1.__proto__ || Object.getPrototypeOf(DragDropContext$$1)).call(this, props));
|
|
|
|
_this.state = {
|
|
payload: null,
|
|
clientOffset: null
|
|
};
|
|
|
|
_this.change = function (_ref3) {
|
|
var payload = _ref3.payload,
|
|
clientOffset = _ref3.clientOffset;
|
|
return _this.setState({ payload: payload, clientOffset: clientOffset });
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(DragDropContext$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
containerTemplate = _props.containerTemplate,
|
|
columnTemplate = _props.columnTemplate;
|
|
var _state = this.state,
|
|
payload = _state.payload,
|
|
clientOffset = _state.clientOffset;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'DragDropContext'
|
|
},
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'root' },
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(
|
|
dxReactCore.DragDropContext,
|
|
{
|
|
onChange: this.change
|
|
},
|
|
React.createElement(dxReactCore.TemplatePlaceholder, null)
|
|
),
|
|
payload && React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: containerTemplate,
|
|
params: getContainerTemplateArgs({ payload: payload, clientOffset: clientOffset, columnTemplate: columnTemplate }, getters)
|
|
});
|
|
}
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return DragDropContext$$1;
|
|
}(React.PureComponent);
|
|
|
|
DragDropContext$1.propTypes = {
|
|
containerTemplate: PropTypes.func.isRequired,
|
|
columnTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
var pluginDependencies$5 = [{ pluginName: 'TableView' }];
|
|
|
|
var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref) {
|
|
var tableHeaderRows = _ref.tableHeaderRows;
|
|
return dxGridCore.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 || props.order,
|
|
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 state = this.state;
|
|
var _props$order = this.props.order,
|
|
order = _props$order === undefined ? state.order : _props$order;
|
|
|
|
return _extends({}, state, { order: order });
|
|
}
|
|
}, {
|
|
key: 'getDraftOrder',
|
|
value: function getDraftOrder() {
|
|
var _getState = this.getState(),
|
|
order = _getState.order,
|
|
sourceColumnIndex = _getState.sourceColumnIndex,
|
|
targetColumnIndex = _getState.targetColumnIndex;
|
|
|
|
return dxGridCore.draftOrder(order, sourceColumnIndex, targetColumnIndex);
|
|
}
|
|
}, {
|
|
key: 'getAvailableColumns',
|
|
value: function getAvailableColumns() {
|
|
var _this2 = this;
|
|
|
|
return this.getDraftOrder().filter(function (columnName) {
|
|
return !!_this2.cellDimensionGetters[columnName];
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getCellDimensions',
|
|
value: function getCellDimensions() {
|
|
var _this3 = this;
|
|
|
|
return this.getAvailableColumns().map(function (columnName) {
|
|
return _this3.cellDimensionGetters[columnName]();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'storeCellDimensionsGetter',
|
|
value: function storeCellDimensionsGetter(tableColumn, data) {
|
|
if (tableColumn.type === dxGridCore.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;
|
|
|
|
var cellDimensions = this.getCellDimensions();
|
|
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 = dxGridCore.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
|
|
});
|
|
}
|
|
}, {
|
|
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 = dxGridCore.changeColumnOrder(order, {
|
|
sourceColumnName: order[sourceColumnIndex],
|
|
targetColumnName: order[targetColumnIndex]
|
|
});
|
|
|
|
this.setState({
|
|
order: nextOrder,
|
|
sourceColumnIndex: -1,
|
|
targetColumnIndex: -1
|
|
});
|
|
|
|
if (onOrderChange) {
|
|
onOrderChange(nextOrder);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _props = this.props,
|
|
tableContainerTemplate = _props.tableContainerTemplate,
|
|
reorderingRowTemplate = _props.reorderingRowTemplate,
|
|
reorderingCellTemplate = _props.reorderingCellTemplate;
|
|
|
|
var columnsComputed = function columnsComputed(_ref4) {
|
|
var tableColumns = _ref4.tableColumns;
|
|
return dxGridCore.orderedColumns(tableColumns, _this4.getDraftOrder());
|
|
};
|
|
|
|
this.cellDimensionGetters = {};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableColumnReordering',
|
|
dependencies: pluginDependencies$5
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: columnsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'tableView' },
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: tableContainerTemplate,
|
|
params: _extends({}, params, {
|
|
onOver: _this4.onOver,
|
|
onLeave: _this4.onLeave,
|
|
onDrop: _this4.onDrop
|
|
})
|
|
},
|
|
React.createElement(dxReactCore.TemplatePlaceholder, null)
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow;
|
|
return tableRow.type === dxGridCore.TABLE_REORDERING_TYPE;
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: reorderingRowTemplate,
|
|
params: params
|
|
});
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow;
|
|
return tableRow.type === dxGridCore.TABLE_REORDERING_TYPE;
|
|
}
|
|
},
|
|
function (params) {
|
|
var cellDimensionsGetter = function cellDimensionsGetter(fn) {
|
|
return _this4.storeCellDimensionsGetter(params.tableColumn, fn);
|
|
};
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: reorderingCellTemplate,
|
|
params: _extends({}, params, {
|
|
getCellDimensions: cellDimensionsGetter
|
|
})
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnReordering;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnReordering.propTypes = {
|
|
order: PropTypes.arrayOf(PropTypes.string),
|
|
defaultOrder: PropTypes.arrayOf(PropTypes.string),
|
|
onOrderChange: PropTypes.func,
|
|
tableContainerTemplate: PropTypes.func.isRequired,
|
|
reorderingRowTemplate: PropTypes.func.isRequired,
|
|
reorderingCellTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableColumnReordering.defaultProps = {
|
|
order: undefined,
|
|
defaultOrder: undefined,
|
|
onOrderChange: undefined
|
|
};
|
|
|
|
var getTableLayoutTemplateArgs = function getTableLayoutTemplateArgs(_ref, _ref2) {
|
|
var rowTemplate = _ref.rowTemplate,
|
|
cellTemplate = _ref.cellTemplate;
|
|
var tableHeaderRows = _ref2.tableHeaderRows,
|
|
tableBodyRows = _ref2.tableBodyRows,
|
|
tableColumns = _ref2.tableColumns;
|
|
return {
|
|
headerRows: tableHeaderRows,
|
|
bodyRows: tableBodyRows,
|
|
columns: tableColumns,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
};
|
|
};
|
|
|
|
var getDataTableCellTemplateArgs = function getDataTableCellTemplateArgs(params, _ref3) {
|
|
var getCellValue = _ref3.getCellValue;
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column,
|
|
value: getCellValue(params.tableRow.row, params.tableColumn.column.name)
|
|
});
|
|
};
|
|
|
|
var getValueFormatterArgs = function getValueFormatterArgs(params) {
|
|
return {
|
|
row: params.row,
|
|
column: params.column,
|
|
value: params.value
|
|
};
|
|
};
|
|
|
|
var getDataTableRowTemplateArgs = function getDataTableRowTemplateArgs(params) {
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row
|
|
});
|
|
};
|
|
|
|
var tableHeaderRows = [];
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref4) {
|
|
var rows = _ref4.rows,
|
|
getRowId = _ref4.getRowId;
|
|
return dxGridCore.tableRowsWithDataRows(rows, getRowId);
|
|
};
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref5) {
|
|
var columns = _ref5.columns;
|
|
return dxGridCore.tableColumnsWithDataRows(columns);
|
|
};
|
|
|
|
var cellTemplate = function cellTemplate(params) {
|
|
return React.createElement(dxReactCore.TemplatePlaceholder, { name: 'tableViewCell', params: params });
|
|
};
|
|
var rowTemplate = function rowTemplate(params) {
|
|
return React.createElement(dxReactCore.TemplatePlaceholder, { name: 'tableViewRow', params: params });
|
|
};
|
|
|
|
var TableView = function (_React$PureComponent) {
|
|
inherits(TableView, _React$PureComponent);
|
|
|
|
function TableView() {
|
|
classCallCheck(this, TableView);
|
|
return possibleConstructorReturn(this, (TableView.__proto__ || Object.getPrototypeOf(TableView)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableView, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
tableLayoutTemplate = _props.tableLayoutTemplate,
|
|
tableCellTemplate = _props.tableCellTemplate,
|
|
tableRowTemplate = _props.tableRowTemplate,
|
|
tableNoDataRowTemplate = _props.tableNoDataRowTemplate,
|
|
tableNoDataCellTemplate = _props.tableNoDataCellTemplate,
|
|
tableStubCellTemplate = _props.tableStubCellTemplate,
|
|
tableStubHeaderCellTemplate = _props.tableStubHeaderCellTemplate,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableView',
|
|
dependencies: [{ pluginName: 'DataTypeProvider', optional: true }]
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableHeaderRows', value: tableHeaderRows }),
|
|
React.createElement(dxReactCore.Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'body' },
|
|
React.createElement(dxReactCore.TemplatePlaceholder, { name: 'tableView' })
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'tableView' },
|
|
React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableLayoutTemplate,
|
|
params: getTableLayoutTemplateArgs({ rowTemplate: rowTemplate, cellTemplate: cellTemplate }, getters, actions)
|
|
});
|
|
}
|
|
)
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'tableViewCell' },
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (_ref6) {
|
|
var headerRows = _ref6.tableHeaderRows;
|
|
return dxGridCore.isHeaderStubTableCell(params.tableRow, headerRows) ? React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableStubHeaderCellTemplate,
|
|
params: params
|
|
}) : React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableStubCellTemplate,
|
|
params: params
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow,
|
|
tableColumn = _ref7.tableColumn;
|
|
return dxGridCore.isDataTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters) {
|
|
var templateArgs = getDataTableCellTemplateArgs(params, getters);
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{
|
|
name: 'valueFormatter',
|
|
params: getValueFormatterArgs(templateArgs)
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: tableCellTemplate,
|
|
params: templateArgs
|
|
},
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow;
|
|
return dxGridCore.isNoDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableNoDataCellTemplate,
|
|
params: _extends({
|
|
getMessage: getMessage
|
|
}, params)
|
|
});
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref9) {
|
|
var tableRow = _ref9.tableRow;
|
|
return dxGridCore.isDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function () {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableRowTemplate,
|
|
params: getDataTableRowTemplateArgs(params)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref10) {
|
|
var tableRow = _ref10.tableRow;
|
|
return dxGridCore.isNoDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: tableNoDataRowTemplate,
|
|
params: params
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableView;
|
|
}(React.PureComponent);
|
|
|
|
TableView.propTypes = {
|
|
tableLayoutTemplate: PropTypes.func.isRequired,
|
|
tableCellTemplate: PropTypes.func.isRequired,
|
|
tableRowTemplate: PropTypes.func.isRequired,
|
|
tableNoDataCellTemplate: PropTypes.func.isRequired,
|
|
tableNoDataRowTemplate: PropTypes.func.isRequired,
|
|
tableStubCellTemplate: PropTypes.func.isRequired,
|
|
tableStubHeaderCellTemplate: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
TableView.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var getSelectTableCellTemplateArgs = function getSelectTableCellTemplateArgs(params, _ref, _ref2) {
|
|
var selection = _ref.selection;
|
|
var setRowsSelection$$1 = _ref2.setRowsSelection;
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
selected: selection.indexOf(params.tableRow.rowId) > -1,
|
|
changeSelected: function changeSelected() {
|
|
return setRowsSelection$$1({ rowIds: [params.tableRow.rowId] });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getSelectAllTableCellTemplateArgs = function getSelectAllTableCellTemplateArgs(params, _ref3, _ref4) {
|
|
var availableToSelect = _ref3.availableToSelect,
|
|
selection = _ref3.selection;
|
|
var setRowsSelection$$1 = _ref4.setRowsSelection;
|
|
return _extends({}, params, {
|
|
selectionAvailable: !!availableToSelect.length,
|
|
allSelected: selection.length === availableToSelect.length && selection.length !== 0,
|
|
someSelected: selection.length !== availableToSelect.length && selection.length !== 0,
|
|
toggleAll: function toggleAll() {
|
|
return setRowsSelection$$1({ rowIds: availableToSelect });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getSelectTableRowTemplateArgs = function getSelectTableRowTemplateArgs(_ref5, _ref6, _ref7) {
|
|
var selection = _ref6.selection;
|
|
var setRowsSelection$$1 = _ref7.setRowsSelection;
|
|
var selectByRowClick = _ref5.selectByRowClick,
|
|
highlightSelected = _ref5.highlightSelected,
|
|
restParams = objectWithoutProperties(_ref5, ['selectByRowClick', 'highlightSelected']);
|
|
var rowId = restParams.tableRow.rowId;
|
|
|
|
return _extends({}, restParams, {
|
|
selectByRowClick: selectByRowClick,
|
|
selected: highlightSelected && selection.indexOf(rowId) > -1,
|
|
changeSelected: function changeSelected() {
|
|
return setRowsSelection$$1({ rowIds: [rowId] });
|
|
}
|
|
});
|
|
};
|
|
|
|
var pluginDependencies$6 = [{ pluginName: 'SelectionState' }, { pluginName: 'TableView' }];
|
|
|
|
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,
|
|
highlightSelected = _props.highlightSelected,
|
|
showSelectionColumn = _props.showSelectionColumn,
|
|
showSelectAll = _props.showSelectAll,
|
|
selectionColumnWidth = _props.selectionColumnWidth,
|
|
selectAllCellTemplate = _props.selectAllCellTemplate,
|
|
selectCellTemplate = _props.selectCellTemplate,
|
|
selectRowTemplate = _props.selectRowTemplate,
|
|
selectByRowClick = _props.selectByRowClick;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref8) {
|
|
var tableColumns = _ref8.tableColumns;
|
|
return dxGridCore.tableColumnsWithSelection(tableColumns, selectionColumnWidth);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableSelection',
|
|
dependencies: pluginDependencies$6
|
|
},
|
|
showSelectionColumn && React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
showSelectionColumn && showSelectAll && React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref9) {
|
|
var tableRow = _ref9.tableRow,
|
|
tableColumn = _ref9.tableColumn;
|
|
return dxGridCore.isSelectAllTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: selectAllCellTemplate,
|
|
params: getSelectAllTableCellTemplateArgs(params, getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
showSelectionColumn && React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref10) {
|
|
var tableRow = _ref10.tableRow,
|
|
tableColumn = _ref10.tableColumn;
|
|
return dxGridCore.isSelectTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: selectCellTemplate,
|
|
params: getSelectTableCellTemplateArgs(params, getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
(highlightSelected || selectByRowClick) && React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref11) {
|
|
var tableRow = _ref11.tableRow;
|
|
return dxGridCore.isDataTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: selectRowTemplate,
|
|
params: getSelectTableRowTemplateArgs(_extends({
|
|
selectByRowClick: selectByRowClick,
|
|
highlightSelected: highlightSelected
|
|
}, params), getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableSelection;
|
|
}(React.PureComponent);
|
|
|
|
TableSelection.propTypes = {
|
|
selectAllCellTemplate: PropTypes.func.isRequired,
|
|
selectCellTemplate: PropTypes.func.isRequired,
|
|
selectRowTemplate: PropTypes.func.isRequired,
|
|
highlightSelected: PropTypes.bool,
|
|
selectByRowClick: PropTypes.bool,
|
|
showSelectAll: PropTypes.bool,
|
|
showSelectionColumn: PropTypes.bool,
|
|
selectionColumnWidth: PropTypes.number.isRequired
|
|
};
|
|
|
|
TableSelection.defaultProps = {
|
|
highlightSelected: false,
|
|
selectByRowClick: false,
|
|
showSelectAll: true,
|
|
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 = {
|
|
expandedRows: props.defaultExpandedRows || []
|
|
};
|
|
|
|
_this.setDetailRowExpanded = function (_ref) {
|
|
var rowId = _ref.rowId;
|
|
|
|
var prevExpandedDetails = _this.props.expandedRows || _this.state.expandedRows;
|
|
var expandedRows = dxGridCore.setDetailRowExpanded(prevExpandedDetails, { rowId: rowId });
|
|
var onExpandedRowsChange = _this.props.onExpandedRowsChange;
|
|
|
|
_this.setState({ expandedRows: expandedRows });
|
|
if (onExpandedRowsChange) {
|
|
onExpandedRowsChange(expandedRows);
|
|
}
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(RowDetailState, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var expandedRows = this.props.expandedRows || this.state.expandedRows;
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'RowDetailState'
|
|
},
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'setDetailRowExpanded',
|
|
action: function action(_ref2) {
|
|
var rowId = _ref2.rowId;
|
|
return _this2.setDetailRowExpanded({ rowId: rowId });
|
|
}
|
|
}),
|
|
React.createElement(dxReactCore.Getter, { name: 'expandedRows', value: expandedRows })
|
|
);
|
|
}
|
|
}]);
|
|
return RowDetailState;
|
|
}(React.PureComponent);
|
|
|
|
RowDetailState.propTypes = {
|
|
expandedRows: PropTypes.array,
|
|
defaultExpandedRows: PropTypes.array,
|
|
onExpandedRowsChange: PropTypes.func
|
|
};
|
|
|
|
RowDetailState.defaultProps = {
|
|
expandedRows: undefined,
|
|
defaultExpandedRows: undefined,
|
|
onExpandedRowsChange: undefined
|
|
};
|
|
|
|
var getDetailToggleTableCellTemplateArgs = function getDetailToggleTableCellTemplateArgs(params, _ref, _ref2) {
|
|
var expandedRows = _ref.expandedRows;
|
|
var setDetailRowExpanded$$1 = _ref2.setDetailRowExpanded;
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
expanded: dxGridCore.isDetailRowExpanded(expandedRows, params.tableRow.rowId),
|
|
toggleExpanded: function toggleExpanded() {
|
|
return setDetailRowExpanded$$1({ rowId: params.tableRow.rowId });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getDetailTableCellTemplateArgs = function getDetailTableCellTemplateArgs(_ref3) {
|
|
var _template = _ref3.template,
|
|
params = objectWithoutProperties(_ref3, ['template']);
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
template: function template() {
|
|
return _template({ row: params.tableRow.row });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getDetailTableRowTemplateArgs = function getDetailTableRowTemplateArgs(params) {
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row
|
|
});
|
|
};
|
|
|
|
var pluginDependencies$7 = [{ pluginName: 'TableView' }];
|
|
|
|
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,
|
|
template = _props.template,
|
|
detailToggleCellTemplate = _props.detailToggleCellTemplate,
|
|
detailCellTemplate = _props.detailCellTemplate,
|
|
detailRowTemplate = _props.detailRowTemplate,
|
|
detailToggleCellWidth = _props.detailToggleCellWidth;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref4) {
|
|
var tableColumns = _ref4.tableColumns;
|
|
return dxGridCore.tableColumnsWithDetail(tableColumns, detailToggleCellWidth);
|
|
};
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref5) {
|
|
var tableBodyRows = _ref5.tableBodyRows,
|
|
expandedRows = _ref5.expandedRows;
|
|
return dxGridCore.tableRowsWithExpandedDetail(tableBodyRows, expandedRows, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableRowDetail',
|
|
dependencies: pluginDependencies$7
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow,
|
|
tableColumn = _ref6.tableColumn;
|
|
return dxGridCore.isDetailToggleTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: detailToggleCellTemplate,
|
|
params: getDetailToggleTableCellTemplateArgs(params, getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow;
|
|
return dxGridCore.isDetailTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: detailCellTemplate,
|
|
params: getDetailTableCellTemplateArgs(_extends({ template: template }, params))
|
|
});
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow;
|
|
return dxGridCore.isDetailTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function () {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: detailRowTemplate,
|
|
params: getDetailTableRowTemplateArgs(params)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableRowDetail;
|
|
}(React.PureComponent);
|
|
|
|
TableRowDetail.propTypes = {
|
|
template: PropTypes.func,
|
|
detailToggleCellTemplate: PropTypes.func.isRequired,
|
|
detailCellTemplate: PropTypes.func.isRequired,
|
|
detailRowTemplate: PropTypes.func.isRequired,
|
|
detailToggleCellWidth: PropTypes.number.isRequired,
|
|
rowHeight: PropTypes.number
|
|
};
|
|
|
|
TableRowDetail.defaultProps = {
|
|
template: undefined,
|
|
rowHeight: undefined
|
|
};
|
|
|
|
var getGroupIndentTableCellTemplateArgs = function getGroupIndentTableCellTemplateArgs(_ref) {
|
|
var params = _ref.params;
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column
|
|
});
|
|
};
|
|
|
|
var getGroupTableCellTemplateArgs = function getGroupTableCellTemplateArgs(params, _ref2, _ref3) {
|
|
var expandedGroups = _ref2.expandedGroups;
|
|
var _toggleGroupExpanded = _ref3.toggleGroupExpanded;
|
|
var compoundKey = params.tableRow.row.compoundKey;
|
|
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
column: params.tableColumn.column,
|
|
isExpanded: expandedGroups.has(compoundKey),
|
|
toggleGroupExpanded: function toggleGroupExpanded() {
|
|
return _toggleGroupExpanded({ groupKey: compoundKey });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getValueFormatterArgs$1 = function getValueFormatterArgs(params) {
|
|
return {
|
|
column: params.column,
|
|
value: params.row.value
|
|
};
|
|
};
|
|
|
|
var getGroupTableRowTemplateArgs = function getGroupTableRowTemplateArgs(params) {
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row
|
|
});
|
|
};
|
|
|
|
var pluginDependencies$8 = [{ pluginName: 'GroupingState' }, { pluginName: 'TableView' }, { pluginName: 'DataTypeProvider', optional: true }];
|
|
|
|
var tableBodyRowsComputed$1 = function tableBodyRowsComputed(_ref4) {
|
|
var tableBodyRows = _ref4.tableBodyRows,
|
|
isGroupRow = _ref4.isGroupRow;
|
|
return dxGridCore.tableRowsWithGrouping(tableBodyRows, isGroupRow);
|
|
};
|
|
|
|
var createShowWhenGrouped = function createShowWhenGrouped(columns) {
|
|
var cache = columns.reduce(function (acc, column) {
|
|
acc[column.name] = column.showWhenGrouped;
|
|
return acc;
|
|
}, {});
|
|
|
|
return function (columnName) {
|
|
return cache[columnName] || false;
|
|
};
|
|
};
|
|
|
|
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,
|
|
groupCellTemplate = _props.groupCellTemplate,
|
|
groupRowTemplate = _props.groupRowTemplate,
|
|
groupIndentCellTemplate = _props.groupIndentCellTemplate,
|
|
groupIndentColumnWidth = _props.groupIndentColumnWidth,
|
|
showColumnWhenGrouped = _props.showColumnWhenGrouped;
|
|
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref5) {
|
|
var columns = _ref5.columns,
|
|
tableColumns = _ref5.tableColumns,
|
|
grouping = _ref5.grouping,
|
|
draftGrouping$$1 = _ref5.draftGrouping;
|
|
return dxGridCore.tableColumnsWithGrouping(tableColumns, grouping, draftGrouping$$1, groupIndentColumnWidth, showColumnWhenGrouped || createShowWhenGrouped(columns));
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableGroupRow',
|
|
dependencies: pluginDependencies$8
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(dxReactCore.Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed$1 }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref6) {
|
|
var tableRow = _ref6.tableRow,
|
|
tableColumn = _ref6.tableColumn;
|
|
return dxGridCore.isGroupTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
var templateArgs = getGroupTableCellTemplateArgs(params, getters, actions);
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{
|
|
name: 'valueFormatter',
|
|
params: getValueFormatterArgs$1(templateArgs)
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: groupCellTemplate,
|
|
params: templateArgs
|
|
},
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
groupIndentCellTemplate && React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref7) {
|
|
var tableRow = _ref7.tableRow,
|
|
tableColumn = _ref7.tableColumn;
|
|
return dxGridCore.isGroupIndentTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: groupIndentCellTemplate,
|
|
params: getGroupIndentTableCellTemplateArgs({ params: params })
|
|
});
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow;
|
|
return dxGridCore.isGroupTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: groupRowTemplate,
|
|
params: getGroupTableRowTemplateArgs(params)
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableGroupRow;
|
|
}(React.PureComponent);
|
|
|
|
TableGroupRow.propTypes = {
|
|
groupCellTemplate: PropTypes.func.isRequired,
|
|
groupRowTemplate: PropTypes.func.isRequired,
|
|
groupIndentCellTemplate: PropTypes.func,
|
|
groupIndentColumnWidth: PropTypes.number.isRequired,
|
|
showColumnWhenGrouped: PropTypes.func
|
|
};
|
|
|
|
TableGroupRow.defaultProps = {
|
|
groupIndentCellTemplate: null,
|
|
showColumnWhenGrouped: undefined
|
|
};
|
|
|
|
var getHeaderTableCellTemplateArgs = function getHeaderTableCellTemplateArgs(_ref, _ref2, _ref3) {
|
|
var sorting = _ref2.sorting,
|
|
columns = _ref2.columns,
|
|
grouping = _ref2.grouping;
|
|
var setColumnSorting$$1 = _ref3.setColumnSorting,
|
|
_groupByColumn = _ref3.groupByColumn,
|
|
changeTableColumnWidths$$1 = _ref3.changeTableColumnWidths,
|
|
changeDraftTableColumnWidths$$1 = _ref3.changeDraftTableColumnWidths;
|
|
var allowSorting = _ref.allowSorting,
|
|
allowDragging = _ref.allowDragging,
|
|
allowGroupingByClick = _ref.allowGroupingByClick,
|
|
allowResizing = _ref.allowResizing,
|
|
getMessage = _ref.getMessage,
|
|
params = objectWithoutProperties(_ref, ['allowSorting', 'allowDragging', 'allowGroupingByClick', 'allowResizing', 'getMessage']);
|
|
var column = params.tableColumn.column;
|
|
|
|
var groupingSupported = grouping !== undefined && grouping.length < columns.length - 1;
|
|
|
|
var result = _extends({}, params, {
|
|
getMessage: getMessage,
|
|
allowSorting: allowSorting && sorting !== undefined,
|
|
allowGroupingByClick: allowGroupingByClick && groupingSupported,
|
|
allowDragging: allowDragging && (!grouping || groupingSupported),
|
|
allowResizing: allowResizing,
|
|
column: params.tableColumn.column,
|
|
changeSortingDirection: function changeSortingDirection(_ref4) {
|
|
var keepOther = _ref4.keepOther,
|
|
cancel = _ref4.cancel;
|
|
return setColumnSorting$$1({ columnName: column.name, keepOther: keepOther, cancel: cancel });
|
|
},
|
|
groupByColumn: function groupByColumn$$1() {
|
|
return _groupByColumn({ columnName: column.name });
|
|
},
|
|
changeColumnWidth: function changeColumnWidth(_ref5) {
|
|
var shift = _ref5.shift;
|
|
return changeTableColumnWidths$$1({ shifts: defineProperty({}, column.name, shift) });
|
|
},
|
|
changeDraftColumnWidth: function changeDraftColumnWidth(_ref6) {
|
|
var shift = _ref6.shift;
|
|
return changeDraftTableColumnWidths$$1({ shifts: defineProperty({}, column.name, shift) });
|
|
}
|
|
});
|
|
|
|
if (result.allowSorting) {
|
|
result.sortingDirection = dxGridCore.getColumnSortingDirection(sorting, column.name);
|
|
}
|
|
|
|
if (result.allowDragging) {
|
|
result.dragPayload = [{ type: 'column', columnName: column.name }];
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
var tableHeaderRowsComputed$1 = function tableHeaderRowsComputed(_ref7) {
|
|
var tableHeaderRows = _ref7.tableHeaderRows;
|
|
return dxGridCore.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,
|
|
allowSorting = _props.allowSorting,
|
|
allowGroupingByClick = _props.allowGroupingByClick,
|
|
allowDragging = _props.allowDragging,
|
|
allowResizing = _props.allowResizing,
|
|
headerCellTemplate = _props.headerCellTemplate,
|
|
headerRowTemplate = _props.headerRowTemplate,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableHeaderRow',
|
|
dependencies: [{ pluginName: 'TableView' }, { pluginName: 'SortingState', optional: !allowSorting }, { pluginName: 'GroupingState', optional: !allowGroupingByClick }, { pluginName: 'DragDropContext', optional: !allowDragging }, { pluginName: 'TableColumnResizing', optional: !allowResizing }]
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed$1 }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref8) {
|
|
var tableRow = _ref8.tableRow,
|
|
tableColumn = _ref8.tableColumn;
|
|
return dxGridCore.isHeadingTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: headerCellTemplate,
|
|
params: getHeaderTableCellTemplateArgs(_extends({
|
|
allowDragging: allowDragging,
|
|
allowGroupingByClick: allowGroupingByClick,
|
|
allowSorting: allowSorting,
|
|
allowResizing: allowResizing,
|
|
getMessage: getMessage
|
|
}, params), getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref9) {
|
|
var tableRow = _ref9.tableRow;
|
|
return dxGridCore.isHeadingTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: headerRowTemplate,
|
|
params: params
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableHeaderRow;
|
|
}(React.PureComponent);
|
|
|
|
TableHeaderRow.propTypes = {
|
|
allowSorting: PropTypes.bool,
|
|
allowGroupingByClick: PropTypes.bool,
|
|
allowDragging: PropTypes.bool,
|
|
allowResizing: PropTypes.bool,
|
|
headerCellTemplate: PropTypes.func.isRequired,
|
|
headerRowTemplate: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
TableHeaderRow.defaultProps = {
|
|
allowSorting: false,
|
|
allowGroupingByClick: false,
|
|
allowDragging: false,
|
|
allowResizing: false,
|
|
messages: null
|
|
};
|
|
|
|
var getFilterTableCellTemplateArgs = function getFilterTableCellTemplateArgs(params, _ref, _ref2) {
|
|
var filters = _ref.filters;
|
|
var setColumnFilter$$1 = _ref2.setColumnFilter;
|
|
return _extends({}, params, {
|
|
column: params.tableColumn.column,
|
|
filter: dxGridCore.getColumnFilterConfig(filters, params.tableColumn.column.name),
|
|
setFilter: function setFilter(config) {
|
|
return setColumnFilter$$1({ columnName: params.tableColumn.column.name, config: config });
|
|
}
|
|
});
|
|
};
|
|
|
|
var getValueEditorArgs = function getValueEditorArgs(params) {
|
|
return {
|
|
column: params.column,
|
|
value: params.filter ? params.filter.value : null,
|
|
onValueChange: function onValueChange(newValue) {
|
|
return params.setFilter(newValue ? { value: newValue } : null);
|
|
}
|
|
};
|
|
};
|
|
|
|
var pluginDependencies$9 = [{ pluginName: 'FilteringState' }, { pluginName: 'TableView' }, { pluginName: '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,
|
|
filterCellTemplate = _props.filterCellTemplate,
|
|
filterRowTemplate = _props.filterRowTemplate,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref3) {
|
|
var tableHeaderRows = _ref3.tableHeaderRows;
|
|
return dxGridCore.tableHeaderRowsWithFilter(tableHeaderRows, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableFilterRow',
|
|
dependencies: pluginDependencies$9
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref4) {
|
|
var tableRow = _ref4.tableRow,
|
|
tableColumn = _ref4.tableColumn;
|
|
return dxGridCore.isFilterTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
var templateArgs = getFilterTableCellTemplateArgs(_extends({ getMessage: getMessage }, params), getters, actions);
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{
|
|
name: 'valueEditor',
|
|
params: getValueEditorArgs(templateArgs)
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: filterCellTemplate,
|
|
params: templateArgs
|
|
},
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow;
|
|
return dxGridCore.isFilterTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: filterRowTemplate,
|
|
params: params
|
|
});
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableFilterRow;
|
|
}(React.PureComponent);
|
|
|
|
TableFilterRow.propTypes = {
|
|
rowHeight: PropTypes.any,
|
|
messages: PropTypes.object,
|
|
filterCellTemplate: PropTypes.func.isRequired,
|
|
filterRowTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableFilterRow.defaultProps = {
|
|
rowHeight: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var getEditTableCellTemplateArgs = function getEditTableCellTemplateArgs(params, getters, _ref) {
|
|
var changeRow$$1 = _ref.changeRow,
|
|
changeAddedRow$$1 = _ref.changeAddedRow;
|
|
var getCellValue = getters.getCellValue,
|
|
createRowChange = getters.createRowChange;
|
|
|
|
var isNew = dxGridCore.isAddedTableRow(params.tableRow);
|
|
var _params$tableRow = params.tableRow,
|
|
rowId = _params$tableRow.rowId,
|
|
row = _params$tableRow.row;
|
|
var column = params.tableColumn.column;
|
|
|
|
var changedRow = isNew ? row : _extends({}, row, dxGridCore.getRowChange(getters.changedRows, rowId));
|
|
return _extends({}, params, {
|
|
row: row,
|
|
column: column,
|
|
value: getCellValue(changedRow, column.name),
|
|
onValueChange: function onValueChange(newValue) {
|
|
var changeArgs = {
|
|
rowId: rowId,
|
|
change: createRowChange(changedRow, column.name, newValue)
|
|
};
|
|
if (isNew) {
|
|
changeAddedRow$$1(changeArgs);
|
|
} else {
|
|
changeRow$$1(changeArgs);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
var getValueEditorArgs$1 = function getValueEditorArgs(params) {
|
|
return {
|
|
column: params.column,
|
|
row: params.row,
|
|
value: params.value,
|
|
onValueChange: params.onValueChange
|
|
};
|
|
};
|
|
|
|
var getEditTableRowTemplateArgs = function getEditTableRowTemplateArgs(params) {
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row
|
|
});
|
|
};
|
|
|
|
var pluginDependencies$10 = [{ pluginName: 'EditingState' }, { pluginName: 'TableView' }, { pluginName: '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,
|
|
editCellTemplate = _props.editCellTemplate,
|
|
editRowTemplate = _props.editRowTemplate,
|
|
rowHeight = _props.rowHeight;
|
|
|
|
|
|
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref2) {
|
|
var tableBodyRows = _ref2.tableBodyRows,
|
|
editingRows = _ref2.editingRows,
|
|
addedRows = _ref2.addedRows;
|
|
return dxGridCore.tableRowsWithEditing(tableBodyRows, editingRows, addedRows, rowHeight);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableEditRow',
|
|
dependencies: pluginDependencies$10
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref3) {
|
|
var tableRow = _ref3.tableRow,
|
|
tableColumn = _ref3.tableColumn;
|
|
return dxGridCore.isEditTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
var templateArgs = getEditTableCellTemplateArgs(params, getters, actions);
|
|
return React.createElement(
|
|
dxReactCore.TemplatePlaceholder,
|
|
{
|
|
name: 'valueEditor',
|
|
params: getValueEditorArgs$1(templateArgs)
|
|
},
|
|
function (content) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: editCellTemplate,
|
|
params: templateArgs
|
|
},
|
|
content
|
|
);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewRow',
|
|
predicate: function predicate(_ref4) {
|
|
var tableRow = _ref4.tableRow;
|
|
return dxGridCore.isEditTableRow(tableRow) || dxGridCore.isAddedTableRow(tableRow);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function () {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: editRowTemplate,
|
|
params: getEditTableRowTemplateArgs(params)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableEditRow;
|
|
}(React.PureComponent);
|
|
|
|
TableEditRow.propTypes = {
|
|
rowHeight: PropTypes.any,
|
|
editCellTemplate: PropTypes.func.isRequired,
|
|
editRowTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableEditRow.defaultProps = {
|
|
rowHeight: undefined
|
|
};
|
|
|
|
var getHeadingEditCommandsTableCellTemplateArgs = function getHeadingEditCommandsTableCellTemplateArgs(params, getters, _ref) {
|
|
var _addRow = _ref.addRow;
|
|
return _extends({}, params, {
|
|
addRow: function addRow$$1() {
|
|
return _addRow();
|
|
}
|
|
});
|
|
};
|
|
|
|
var getEditCommandsTableCellTemplateArgs = function getEditCommandsTableCellTemplateArgs(params, getters, _ref2) {
|
|
var startEditRows$$1 = _ref2.startEditRows,
|
|
stopEditRows$$1 = _ref2.stopEditRows,
|
|
cancelChangedRows = _ref2.cancelChangedRows,
|
|
commitChangedRows = _ref2.commitChangedRows,
|
|
deleteRows$$1 = _ref2.deleteRows,
|
|
commitDeletedRows = _ref2.commitDeletedRows,
|
|
cancelAddedRows$$1 = _ref2.cancelAddedRows,
|
|
commitAddedRows = _ref2.commitAddedRows;
|
|
|
|
var isEdit = dxGridCore.isEditTableRow(params.tableRow);
|
|
var isNew = dxGridCore.isAddedTableRow(params.tableRow);
|
|
var rowIds = [params.tableRow.rowId];
|
|
|
|
return _extends({}, params, {
|
|
row: params.tableRow.row,
|
|
isEditing: isEdit || isNew,
|
|
startEditing: function startEditing() {
|
|
return startEditRows$$1({ rowIds: [params.tableRow.rowId] });
|
|
},
|
|
deleteRow: function deleteRow() {
|
|
deleteRows$$1({ rowIds: rowIds });
|
|
commitDeletedRows({ rowIds: rowIds });
|
|
},
|
|
cancelEditing: function cancelEditing() {
|
|
if (isNew) {
|
|
cancelAddedRows$$1({ rowIds: rowIds });
|
|
} else {
|
|
stopEditRows$$1({ rowIds: rowIds });
|
|
cancelChangedRows({ rowIds: rowIds });
|
|
}
|
|
},
|
|
commitChanges: function commitChanges() {
|
|
if (isNew) {
|
|
commitAddedRows({ rowIds: rowIds });
|
|
} else {
|
|
stopEditRows$$1({ rowIds: rowIds });
|
|
commitChangedRows({ rowIds: rowIds });
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
var pluginDependencies$11 = [{ pluginName: 'EditingState' }, { pluginName: 'TableView' }];
|
|
|
|
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,
|
|
cellTemplate = _props.cellTemplate,
|
|
headingCellTemplate = _props.headingCellTemplate,
|
|
commandTemplate = _props.commandTemplate,
|
|
allowAdding = _props.allowAdding,
|
|
allowEditing = _props.allowEditing,
|
|
allowDeleting = _props.allowDeleting,
|
|
width = _props.width,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref3) {
|
|
var tableColumns = _ref3.tableColumns;
|
|
return dxGridCore.tableColumnsWithEditing(tableColumns, width);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableEditColumn',
|
|
dependencies: pluginDependencies$11
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref4) {
|
|
var tableRow = _ref4.tableRow,
|
|
tableColumn = _ref4.tableColumn;
|
|
return dxGridCore.isHeadingEditCommandsTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: headingCellTemplate,
|
|
params: getHeadingEditCommandsTableCellTemplateArgs(_extends({
|
|
allowAdding: allowAdding, commandTemplate: commandTemplate, getMessage: getMessage }, params), getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'tableViewCell',
|
|
predicate: function predicate(_ref5) {
|
|
var tableRow = _ref5.tableRow,
|
|
tableColumn = _ref5.tableColumn;
|
|
return dxGridCore.isEditCommandsTableCell(tableRow, tableColumn);
|
|
}
|
|
},
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: cellTemplate,
|
|
params: getEditCommandsTableCellTemplateArgs(_extends({
|
|
allowEditing: allowEditing,
|
|
allowDeleting: allowDeleting,
|
|
commandTemplate: commandTemplate,
|
|
getMessage: getMessage
|
|
}, params), getters, actions)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableEditColumn;
|
|
}(React.PureComponent);
|
|
TableEditColumn.propTypes = {
|
|
cellTemplate: PropTypes.func.isRequired,
|
|
headingCellTemplate: PropTypes.func.isRequired,
|
|
commandTemplate: PropTypes.func.isRequired,
|
|
allowAdding: PropTypes.bool,
|
|
allowEditing: PropTypes.bool,
|
|
allowDeleting: PropTypes.bool,
|
|
width: PropTypes.number,
|
|
messages: PropTypes.object
|
|
};
|
|
TableEditColumn.defaultProps = {
|
|
allowAdding: false,
|
|
allowEditing: false,
|
|
allowDeleting: false,
|
|
width: 140,
|
|
messages: {}
|
|
};
|
|
|
|
var pluginDependencies$12 = [{ pluginName: 'TableView' }];
|
|
|
|
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.defaultColumnWidths,
|
|
draftColumnWidths: {}
|
|
};
|
|
|
|
_this.getState = function () {
|
|
var state = _this.state;
|
|
var columnWidths = _this.props.columnWidths;
|
|
|
|
|
|
return _extends({}, state, {
|
|
columnWidths: columnWidths || state.columnWidths
|
|
});
|
|
};
|
|
|
|
_this.changeTableColumnWidthsAction = function (payload) {
|
|
var nextState = dxGridCore.changeTableColumnWidths(_this.getState(), payload);
|
|
|
|
_this.setState(nextState);
|
|
|
|
var onColumnWidthsChange = _this.props.onColumnWidthsChange;
|
|
|
|
if (onColumnWidthsChange) {
|
|
onColumnWidthsChange(nextState.columnWidths);
|
|
}
|
|
};
|
|
|
|
_this.changeDraftTableColumnWidthsAction = function (payload) {
|
|
return _this.setState(dxGridCore.changeDraftTableColumnWidths(_this.getState(), payload));
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableColumnResizing, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _getState = this.getState(),
|
|
columnWidths = _getState.columnWidths,
|
|
draftColumnWidths = _getState.draftColumnWidths;
|
|
|
|
var tableColumnsComputed = function tableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return dxGridCore.tableColumnsWithWidths(tableColumns, columnWidths, draftColumnWidths);
|
|
};
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableColumnResizing',
|
|
dependencies: pluginDependencies$12
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
|
|
React.createElement(dxReactCore.Action, { name: 'changeTableColumnWidths', action: this.changeTableColumnWidthsAction }),
|
|
React.createElement(dxReactCore.Action, {
|
|
name: 'changeDraftTableColumnWidths',
|
|
action: this.changeDraftTableColumnWidthsAction
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnResizing;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnResizing.propTypes = {
|
|
defaultColumnWidths: PropTypes.objectOf(PropTypes.number),
|
|
columnWidths: PropTypes.objectOf(PropTypes.number),
|
|
onColumnWidthsChange: PropTypes.func
|
|
};
|
|
|
|
TableColumnResizing.defaultProps = {
|
|
defaultColumnWidths: {},
|
|
columnWidths: undefined,
|
|
onColumnWidthsChange: undefined
|
|
};
|
|
|
|
var pluginDependencies$13 = [{ pluginName: 'PagingState' }];
|
|
|
|
var getPagerTemplateArgs = function getPagerTemplateArgs(_ref, _ref2, _ref3) {
|
|
var allowedPageSizes = _ref.allowedPageSizes,
|
|
getMessage = _ref.getMessage;
|
|
var currentPage = _ref2.currentPage,
|
|
pageSize = _ref2.pageSize,
|
|
totalCount = _ref2.totalCount;
|
|
var setCurrentPage$$1 = _ref3.setCurrentPage,
|
|
setPageSize$$1 = _ref3.setPageSize;
|
|
return {
|
|
currentPage: currentPage,
|
|
totalPages: dxGridCore.pageCount(totalCount, pageSize),
|
|
pageSize: pageSize,
|
|
totalCount: totalCount,
|
|
allowedPageSizes: allowedPageSizes,
|
|
getMessage: getMessage,
|
|
onCurrentPageChange: setCurrentPage$$1,
|
|
onPageSizeChange: setPageSize$$1
|
|
};
|
|
};
|
|
|
|
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,
|
|
pagerTemplate = _props.pagerTemplate,
|
|
allowedPageSizes = _props.allowedPageSizes,
|
|
messages = _props.messages;
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'PagingPanel',
|
|
dependencies: pluginDependencies$13
|
|
},
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'footer' },
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(dxReactCore.TemplatePlaceholder, null),
|
|
React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: pagerTemplate,
|
|
params: getPagerTemplateArgs({ allowedPageSizes: allowedPageSizes, getMessage: getMessage }, getters, actions)
|
|
});
|
|
}
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return PagingPanel;
|
|
}(React.PureComponent);
|
|
|
|
PagingPanel.propTypes = {
|
|
allowedPageSizes: PropTypes.arrayOf(PropTypes.number),
|
|
pagerTemplate: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
PagingPanel.defaultProps = {
|
|
allowedPageSizes: [],
|
|
messages: {}
|
|
};
|
|
|
|
var getGroupPanelTemplateArgs = function getGroupPanelTemplateArgs(_ref, _ref2, _ref3) {
|
|
var allowDragging = _ref.allowDragging,
|
|
allowSorting = _ref.allowSorting,
|
|
allowUngroupingByClick = _ref.allowUngroupingByClick,
|
|
getMessage = _ref.getMessage;
|
|
var columns = _ref2.columns,
|
|
draftGrouping$$1 = _ref2.draftGrouping,
|
|
sorting = _ref2.sorting;
|
|
var groupByColumn$$1 = _ref3.groupByColumn,
|
|
setColumnSorting$$1 = _ref3.setColumnSorting,
|
|
_draftGroupingChange = _ref3.draftGroupingChange,
|
|
_cancelGroupingChange = _ref3.cancelGroupingChange;
|
|
return {
|
|
allowSorting: allowSorting,
|
|
allowDragging: allowDragging,
|
|
allowUngroupingByClick: allowUngroupingByClick,
|
|
sorting: sorting,
|
|
groupByColumn: groupByColumn$$1,
|
|
getMessage: getMessage,
|
|
groupingPanelItems: dxGridCore.groupingPanelItems(columns, draftGrouping$$1),
|
|
changeSortingDirection: function changeSortingDirection(_ref4) {
|
|
var columnName = _ref4.columnName,
|
|
keepOther = _ref4.keepOther,
|
|
cancel = _ref4.cancel;
|
|
return setColumnSorting$$1({ columnName: columnName, keepOther: keepOther, cancel: cancel });
|
|
},
|
|
draftGroupingChange: function draftGroupingChange$$1(groupingChange) {
|
|
return _draftGroupingChange(groupingChange);
|
|
},
|
|
cancelGroupingChange: function cancelGroupingChange$$1() {
|
|
return _cancelGroupingChange();
|
|
}
|
|
};
|
|
};
|
|
|
|
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,
|
|
groupPanelTemplate = _props.groupPanelTemplate,
|
|
allowSorting = _props.allowSorting,
|
|
allowDragging = _props.allowDragging,
|
|
allowUngroupingByClick = _props.allowUngroupingByClick,
|
|
messages = _props.messages;
|
|
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'GroupingPanel',
|
|
dependencies: [{ pluginName: 'GroupingState' }, { pluginName: 'SortingState', optional: !allowSorting }]
|
|
},
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'header' },
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (getters, actions) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: groupPanelTemplate,
|
|
params: getGroupPanelTemplateArgs({
|
|
allowDragging: allowDragging, allowSorting: allowSorting, allowUngroupingByClick: allowUngroupingByClick, getMessage: getMessage
|
|
}, getters, actions)
|
|
});
|
|
}
|
|
),
|
|
React.createElement(dxReactCore.TemplatePlaceholder, null)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return GroupingPanel;
|
|
}(React.PureComponent);
|
|
|
|
GroupingPanel.propTypes = {
|
|
allowSorting: PropTypes.bool,
|
|
allowDragging: PropTypes.bool,
|
|
allowUngroupingByClick: PropTypes.bool,
|
|
groupPanelTemplate: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
GroupingPanel.defaultProps = {
|
|
allowSorting: false,
|
|
allowDragging: false,
|
|
allowUngroupingByClick: 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,
|
|
formatterTemplate = _props.formatterTemplate,
|
|
editorTemplate = _props.editorTemplate,
|
|
type = _props.type;
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{ name: 'DataTypeProvider' },
|
|
formatterTemplate ? React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'valueFormatter',
|
|
predicate: function predicate(_ref) {
|
|
var column = _ref.column;
|
|
return column.dataType === type;
|
|
}
|
|
},
|
|
function (params) {
|
|
return formatterTemplate(params);
|
|
}
|
|
) : null,
|
|
editorTemplate ? React.createElement(
|
|
dxReactCore.Template,
|
|
{
|
|
name: 'valueEditor',
|
|
predicate: function predicate(_ref2) {
|
|
var column = _ref2.column;
|
|
return column.dataType === type;
|
|
}
|
|
},
|
|
function (params) {
|
|
return editorTemplate(params);
|
|
}
|
|
) : null
|
|
);
|
|
}
|
|
}]);
|
|
return DataTypeProvider;
|
|
}(React.PureComponent);
|
|
|
|
DataTypeProvider.propTypes = {
|
|
type: PropTypes.string,
|
|
formatterTemplate: PropTypes.func,
|
|
editorTemplate: PropTypes.func
|
|
};
|
|
|
|
DataTypeProvider.defaultProps = {
|
|
type: undefined,
|
|
formatterTemplate: undefined,
|
|
editorTemplate: undefined
|
|
};
|
|
|
|
var pluginDependencies$14 = [{ pluginName: 'TableView' }];
|
|
|
|
var TableColumnVisibility = function (_React$PureComponent) {
|
|
inherits(TableColumnVisibility, _React$PureComponent);
|
|
|
|
function TableColumnVisibility() {
|
|
classCallCheck(this, TableColumnVisibility);
|
|
return possibleConstructorReturn(this, (TableColumnVisibility.__proto__ || Object.getPrototypeOf(TableColumnVisibility)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableColumnVisibility, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
hiddenColumns = _props.hiddenColumns,
|
|
emptyMessageTemplate = _props.emptyMessageTemplate,
|
|
messages = _props.messages;
|
|
|
|
var visibleTableColumnsComputed = function visibleTableColumnsComputed(_ref) {
|
|
var tableColumns = _ref.tableColumns;
|
|
return dxGridCore.visibleTableColumns(tableColumns, hiddenColumns);
|
|
};
|
|
|
|
var getMessage = dxGridCore.getMessagesFormatter(messages);
|
|
|
|
return React.createElement(
|
|
dxReactCore.PluginContainer,
|
|
{
|
|
pluginName: 'TableColumnVisibility',
|
|
dependencies: pluginDependencies$14
|
|
},
|
|
React.createElement(dxReactCore.Getter, { name: 'tableColumns', computed: visibleTableColumnsComputed }),
|
|
React.createElement(
|
|
dxReactCore.Template,
|
|
{ name: 'tableView' },
|
|
function (params) {
|
|
return React.createElement(
|
|
dxReactCore.TemplateConnector,
|
|
null,
|
|
function (_ref2) {
|
|
var tableColumns = _ref2.tableColumns;
|
|
return tableColumns.length ? React.createElement(dxReactCore.TemplatePlaceholder, null) : React.createElement(dxReactCore.TemplateRenderer, {
|
|
template: emptyMessageTemplate,
|
|
params: _extends({ getMessage: getMessage }, params)
|
|
});
|
|
}
|
|
);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return TableColumnVisibility;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnVisibility.propTypes = {
|
|
hiddenColumns: PropTypes.arrayOf(PropTypes.string),
|
|
emptyMessageTemplate: PropTypes.func.isRequired,
|
|
messages: PropTypes.object
|
|
};
|
|
|
|
TableColumnVisibility.defaultProps = {
|
|
hiddenColumns: [],
|
|
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 = reactDom.findDOMNode(this).scrollWidth;
|
|
this.animations = dxGridCore.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 = dxGridCore.filterActiveAnimations(this.animations);
|
|
|
|
if (!this.animations.size) {
|
|
if (this.state.animationState.size) {
|
|
this.setState({ animationState: new Map() });
|
|
}
|
|
return;
|
|
}
|
|
|
|
var animationState = dxGridCore.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,
|
|
rowTemplate = _props.rowTemplate,
|
|
cellTemplate = _props.cellTemplate;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: rowTemplate,
|
|
params: {
|
|
tableRow: row,
|
|
style: getRowStyle({ row: row })
|
|
}
|
|
},
|
|
dxGridCore.getTableRowColumnsWithColSpan(columns, row.colSpanStart).map(function (column) {
|
|
return React.createElement(dxReactCore.TemplateRenderer, {
|
|
key: column.key,
|
|
template: cellTemplate,
|
|
params: _extends({
|
|
tableRow: row,
|
|
tableColumn: column,
|
|
style: getColumnStyle({ column: column })
|
|
}, column.colSpan ? { colSpan: column.colSpan } : null)
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return RowLayout;
|
|
}(React.PureComponent);
|
|
|
|
RowLayout.propTypes = {
|
|
row: PropTypes.object.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired,
|
|
cellTemplate: 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 bottom = viewportTop + viewportHeight;
|
|
var position = 0;
|
|
|
|
var _loop = function _loop(_i) {
|
|
var row = rows[_i];
|
|
var last = result[result.length - 1];
|
|
|
|
var height = getRowHeight(row);
|
|
var nextPosition = position + height;
|
|
if (viewportTop <= position && position < bottom && viewportTop < nextPosition && nextPosition <= bottom || viewportTop > position && nextPosition > bottom) {
|
|
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 });
|
|
});
|
|
}
|
|
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 });
|
|
}
|
|
position = nextPosition;
|
|
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 = {
|
|
visibleBodyRows: []
|
|
};
|
|
|
|
_this.rowRefs = new Map();
|
|
_this.rowHeights = new Map();
|
|
_this.viewportTop = 0;
|
|
_this.updateViewport = _this.updateViewport.bind(_this);
|
|
_this.registerRowRef = _this.registerRowRef.bind(_this);
|
|
_this.getRowHeight = _this.getRowHeight.bind(_this);
|
|
|
|
_this.state.visibleBodyRows = _this.getVisibleRows();
|
|
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.rowHeights;
|
|
|
|
this.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());
|
|
this.setState({
|
|
visibleBodyRows: this.getVisibleRows(nextProps, this.viewportTop)
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate() {
|
|
this.storeRowHeights();
|
|
}
|
|
}, {
|
|
key: 'getRowHeight',
|
|
value: function getRowHeight(row) {
|
|
var storedHeight = this.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.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, reactDom.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 rowHeights = this.rowHeights;
|
|
|
|
rowsWithChangedHeights.forEach(function (_ref6) {
|
|
var _ref7 = slicedToArray(_ref6, 2),
|
|
row = _ref7[0],
|
|
height = _ref7[1];
|
|
|
|
return rowHeights.set(row.key, height);
|
|
});
|
|
|
|
var prevVisibleBodyRows = this.state.visibleBodyRows;
|
|
|
|
var visibleBodyRows = this.getVisibleRows();
|
|
|
|
this.setState({
|
|
visibleBodyRows: visibleBodyRows
|
|
});
|
|
|
|
var scrollOffset = firstVisibleRowOffset(prevVisibleBodyRows, visibleBodyRows);
|
|
if (scrollOffset !== 0) {
|
|
// eslint-disable-next-line react/no-find-dom-node
|
|
reactDom.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.viewportTop = node.scrollTop;
|
|
this.setState({
|
|
visibleBodyRows: this.getVisibleRows()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _props = this.props,
|
|
headerRows = _props.headerRows,
|
|
columns = _props.columns,
|
|
minWidth = _props.minWidth,
|
|
height = _props.height,
|
|
containerTemplate = _props.containerTemplate,
|
|
headTableTemplate = _props.headTableTemplate,
|
|
tableTemplate = _props.tableTemplate,
|
|
headTemplate = _props.headTemplate,
|
|
bodyTemplate = _props.bodyTemplate,
|
|
rowTemplate = _props.rowTemplate,
|
|
cellTemplate = _props.cellTemplate;
|
|
var visibleBodyRows = this.state.visibleBodyRows;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: containerTemplate,
|
|
params: {
|
|
style: { height: height + 'px' },
|
|
onScroll: this.updateViewport
|
|
}
|
|
},
|
|
!!headerRows.length && React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: headTableTemplate,
|
|
params: { style: { minWidth: minWidth + 'px' } }
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: headTemplate
|
|
},
|
|
headerRows.map(function (row) {
|
|
return React.createElement(RowLayout, {
|
|
key: row.key,
|
|
ref: function ref(_ref8) {
|
|
return _this4.registerRowRef(row, _ref8);
|
|
},
|
|
row: row,
|
|
columns: columns,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
});
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: tableTemplate,
|
|
params: { style: { minWidth: minWidth + 'px' } }
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: bodyTemplate
|
|
},
|
|
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,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
});
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
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,
|
|
cellTemplate: PropTypes.func.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired,
|
|
bodyTemplate: PropTypes.func.isRequired,
|
|
headTemplate: PropTypes.func,
|
|
tableTemplate: PropTypes.func.isRequired,
|
|
headTableTemplate: PropTypes.func,
|
|
containerTemplate: PropTypes.func.isRequired,
|
|
estimatedRowHeight: PropTypes.number.isRequired
|
|
};
|
|
|
|
VirtualTableLayout.defaultProps = {
|
|
headerRows: [],
|
|
headTemplate: function headTemplate() {
|
|
return null;
|
|
},
|
|
headTableTemplate: function headTableTemplate() {
|
|
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,
|
|
blockTemplate = _props.blockTemplate,
|
|
rowTemplate = _props.rowTemplate,
|
|
cellTemplate = _props.cellTemplate;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: blockTemplate
|
|
},
|
|
rows.map(function (row) {
|
|
return React.createElement(RowLayout, {
|
|
key: row.key,
|
|
row: row,
|
|
columns: columns,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return RowsBlockLayout;
|
|
}(React.PureComponent);
|
|
|
|
RowsBlockLayout.propTypes = {
|
|
rows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
blockTemplate: PropTypes.func.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired,
|
|
cellTemplate: 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,
|
|
containerTemplate = _props.containerTemplate,
|
|
tableTemplate = _props.tableTemplate,
|
|
headTemplate = _props.headTemplate,
|
|
bodyTemplate = _props.bodyTemplate,
|
|
rowTemplate = _props.rowTemplate,
|
|
cellTemplate = _props.cellTemplate;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: containerTemplate
|
|
},
|
|
React.createElement(
|
|
dxReactCore.TemplateRenderer,
|
|
{
|
|
template: tableTemplate,
|
|
params: {
|
|
style: {
|
|
minWidth: minWidth + 'px'
|
|
}
|
|
}
|
|
},
|
|
React.createElement(ColumnGroup, { columns: columns }),
|
|
!!headerRows.length && React.createElement(RowsBlockLayout, {
|
|
key: 'head',
|
|
rows: headerRows,
|
|
columns: columns,
|
|
blockTemplate: headTemplate,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
}),
|
|
React.createElement(RowsBlockLayout, {
|
|
key: 'body',
|
|
rows: rows,
|
|
columns: columns,
|
|
blockTemplate: bodyTemplate,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return StaticTableLayout;
|
|
}(React.PureComponent);
|
|
|
|
StaticTableLayout.propTypes = {
|
|
headerRows: PropTypes.array,
|
|
rows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
minWidth: PropTypes.number.isRequired,
|
|
containerTemplate: PropTypes.func.isRequired,
|
|
tableTemplate: PropTypes.func.isRequired,
|
|
headTemplate: PropTypes.func,
|
|
bodyTemplate: PropTypes.func.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired,
|
|
cellTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
StaticTableLayout.defaultProps = {
|
|
headerRows: [],
|
|
headTemplate: function headTemplate() {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
var getSortingConfig = function getSortingConfig(sorting, column) {
|
|
var result = {
|
|
sortingSupported: sorting !== undefined
|
|
};
|
|
|
|
if (result.sortingSupported) {
|
|
result.sortingDirection = dxGridCore.getColumnSortingDirection(sorting, column.name);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
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,
|
|
targetColumnIndex: -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,
|
|
draftGroupingChange$$1 = _this$props.draftGroupingChange,
|
|
groupingPanelItems$$1 = _this$props.groupingPanelItems;
|
|
var _this$state = _this.state,
|
|
sourceColumnName = _this$state.sourceColumnName,
|
|
prevTargetColumnIndex = _this$state.targetColumnIndex;
|
|
|
|
var itemGeometries = _this.itemRefs.map(function (element) {
|
|
return element.getBoundingClientRect();
|
|
});
|
|
var sourceColumnIndex = groupingPanelItems$$1.findIndex(function (column) {
|
|
return column.name === sourceColumnName;
|
|
});
|
|
var targetColumnIndex = dxGridCore.getGroupCellTargetIndex(itemGeometries, sourceColumnIndex, clientOffset);
|
|
|
|
if (prevTargetColumnIndex === targetColumnIndex) return;
|
|
|
|
draftGroupingChange$$1({
|
|
columnName: sourceColumnName,
|
|
groupIndex: targetColumnIndex
|
|
});
|
|
_this.setState({ targetColumnIndex: targetColumnIndex });
|
|
};
|
|
_this.onLeave = function () {
|
|
var draftGroupingChange$$1 = _this.props.draftGroupingChange;
|
|
var sourceColumnName = _this.state.sourceColumnName;
|
|
|
|
draftGroupingChange$$1({
|
|
columnName: sourceColumnName,
|
|
groupIndex: -1
|
|
});
|
|
_this.setState({
|
|
targetColumnIndex: -1
|
|
});
|
|
};
|
|
_this.onDrop = function () {
|
|
var groupByColumn$$1 = _this.props.groupByColumn;
|
|
var _this$state2 = _this.state,
|
|
sourceColumnName = _this$state2.sourceColumnName,
|
|
targetColumnIndex = _this$state2.targetColumnIndex;
|
|
|
|
_this.resetState();
|
|
groupByColumn$$1({
|
|
columnName: sourceColumnName,
|
|
groupIndex: targetColumnIndex
|
|
});
|
|
};
|
|
_this.onDragEnd = function () {
|
|
var _this$state3 = _this.state,
|
|
sourceColumnName = _this$state3.sourceColumnName,
|
|
targetColumnIndex = _this$state3.targetColumnIndex;
|
|
var groupByColumn$$1 = _this.props.groupByColumn;
|
|
|
|
if (sourceColumnName && targetColumnIndex === -1) {
|
|
groupByColumn$$1({
|
|
columnName: sourceColumnName
|
|
});
|
|
}
|
|
_this.resetState();
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(GroupPanelLayout, [{
|
|
key: 'getItems',
|
|
value: function getItems() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
allowSorting = _props.allowSorting,
|
|
sorting = _props.sorting,
|
|
changeSortingDirection = _props.changeSortingDirection,
|
|
groupingPanelItems$$1 = _props.groupingPanelItems,
|
|
groupByColumn$$1 = _props.groupByColumn,
|
|
groupPanelItemTemplate = _props.groupPanelItemTemplate,
|
|
allowDragging = _props.allowDragging,
|
|
allowUngroupingByClick = _props.allowUngroupingByClick;
|
|
|
|
|
|
this.itemRefs = [];
|
|
return groupingPanelItems$$1.map(function (_ref3) {
|
|
var column = _ref3.column,
|
|
draft = _ref3.draft;
|
|
|
|
var _getSortingConfig = getSortingConfig(sorting, column),
|
|
sortingSupported = _getSortingConfig.sortingSupported,
|
|
sortingDirection = _getSortingConfig.sortingDirection;
|
|
|
|
var item = groupPanelItemTemplate({
|
|
column: column,
|
|
draft: draft,
|
|
allowSorting: allowSorting && sortingSupported,
|
|
sortingDirection: sortingDirection,
|
|
changeSortingDirection: changeSortingDirection,
|
|
groupByColumn: groupByColumn$$1,
|
|
allowUngroupingByClick: allowUngroupingByClick
|
|
});
|
|
|
|
return allowDragging ? React.createElement(
|
|
dxReactCore.DragSource,
|
|
{
|
|
key: column.name,
|
|
getPayload: function getPayload() {
|
|
return [{ type: 'column', columnName: column.name }];
|
|
},
|
|
onEnd: _this2.onDragEnd
|
|
},
|
|
React.createElement(
|
|
'div',
|
|
{
|
|
ref: function ref(element) {
|
|
return element && _this2.itemRefs.push(element);
|
|
},
|
|
style: { display: 'inline-block' }
|
|
},
|
|
item
|
|
)
|
|
) : React.createElement(
|
|
'div',
|
|
{
|
|
ref: function ref(element) {
|
|
return element && _this2.itemRefs.push(element);
|
|
},
|
|
key: column.name,
|
|
style: { display: 'inline-block' }
|
|
},
|
|
item
|
|
);
|
|
});
|
|
}
|
|
}, {
|
|
key: 'resetState',
|
|
value: function resetState() {
|
|
var cancelGroupingChange$$1 = this.props.cancelGroupingChange;
|
|
|
|
cancelGroupingChange$$1();
|
|
this.setState({
|
|
sourceColumnName: null,
|
|
targetColumnIndex: -1
|
|
});
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props2 = this.props,
|
|
groupByColumnText = _props2.groupByColumnText,
|
|
panelTemplate = _props2.panelTemplate,
|
|
allowDragging = _props2.allowDragging;
|
|
|
|
|
|
var items = this.getItems();
|
|
|
|
var groupPanel = items.length ? panelTemplate({ items: items }) : React.createElement(
|
|
'span',
|
|
null,
|
|
groupByColumnText
|
|
);
|
|
|
|
return allowDragging ? React.createElement(
|
|
dxReactCore.DropTarget,
|
|
{
|
|
onEnter: this.onEnter,
|
|
onOver: this.onOver,
|
|
onLeave: this.onLeave,
|
|
onDrop: this.onDrop
|
|
},
|
|
groupPanel
|
|
) : groupPanel;
|
|
}
|
|
}]);
|
|
return GroupPanelLayout;
|
|
}(React.PureComponent);
|
|
|
|
GroupPanelLayout.propTypes = {
|
|
allowSorting: PropTypes.bool,
|
|
sorting: PropTypes.any,
|
|
changeSortingDirection: PropTypes.func,
|
|
groupingPanelItems: PropTypes.arrayOf(PropTypes.shape({
|
|
column: PropTypes.object,
|
|
draft: PropTypes.bool
|
|
})).isRequired,
|
|
groupByColumn: PropTypes.func,
|
|
groupByColumnText: PropTypes.any,
|
|
allowUngroupingByClick: PropTypes.bool,
|
|
groupPanelItemTemplate: PropTypes.func.isRequired,
|
|
panelTemplate: PropTypes.func.isRequired,
|
|
allowDragging: PropTypes.bool,
|
|
draftGroupingChange: PropTypes.func,
|
|
cancelGroupingChange: PropTypes.func
|
|
};
|
|
|
|
GroupPanelLayout.defaultProps = {
|
|
allowSorting: false,
|
|
sorting: undefined,
|
|
changeSortingDirection: function changeSortingDirection() {},
|
|
groupByColumn: function groupByColumn$$1() {},
|
|
groupByColumnText: undefined,
|
|
allowUngroupingByClick: false,
|
|
allowDragging: false,
|
|
draftGroupingChange: function draftGroupingChange$$1() {},
|
|
cancelGroupingChange: function cancelGroupingChange$$1() {}
|
|
};
|
|
|
|
exports.Grid = Grid;
|
|
exports.ColumnChooser = ColumnChooser;
|
|
exports.FilteringState = FilteringState;
|
|
exports.LocalFiltering = LocalFiltering;
|
|
exports.EditingState = EditingState;
|
|
exports.PagingState = PagingState;
|
|
exports.LocalPaging = LocalPaging;
|
|
exports.GroupingState = GroupingState;
|
|
exports.LocalGrouping = LocalGrouping;
|
|
exports.CustomGrouping = CustomGrouping;
|
|
exports.SelectionState = SelectionState;
|
|
exports.SortingState = SortingState;
|
|
exports.LocalSorting = LocalSorting;
|
|
exports.DragDropContext = DragDropContext$1;
|
|
exports.TableColumnReordering = TableColumnReordering;
|
|
exports.TableView = TableView;
|
|
exports.TableSelection = TableSelection;
|
|
exports.RowDetailState = RowDetailState;
|
|
exports.TableRowDetail = TableRowDetail;
|
|
exports.TableGroupRow = TableGroupRow;
|
|
exports.TableHeaderRow = TableHeaderRow;
|
|
exports.TableFilterRow = TableFilterRow;
|
|
exports.TableEditRow = TableEditRow;
|
|
exports.TableEditColumn = TableEditColumn;
|
|
exports.TableColumnResizing = TableColumnResizing;
|
|
exports.PagingPanel = PagingPanel;
|
|
exports.GroupingPanel = GroupingPanel;
|
|
exports.DataTypeProvider = DataTypeProvider;
|
|
exports.TableColumnVisibility = TableColumnVisibility;
|
|
exports.TableLayout = TableLayout;
|
|
exports.VirtualTableLayout = VirtualTableLayout;
|
|
exports.StaticTableLayout = StaticTableLayout;
|
|
exports.GroupPanelLayout = GroupPanelLayout;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|
|
//# sourceMappingURL=dx-react-grid.umd.js.map
|