3256 lines
90 KiB
JavaScript
3256 lines
90 KiB
JavaScript
/**
|
|
* Bundle of @devexpress/dx-react-grid-material-ui
|
|
* Generated: 2017-11-10
|
|
* Version: 1.0.0-beta.1
|
|
* License: https://js.devexpress.com/Licensing
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
|
|
var React = _interopDefault(require('react'));
|
|
var PropTypes = _interopDefault(require('prop-types'));
|
|
var dxReactGrid = require('@devexpress/dx-react-grid');
|
|
var styles = require('material-ui/styles');
|
|
var materialUi = require('material-ui');
|
|
var List = require('material-ui/List');
|
|
var List__default = _interopDefault(List);
|
|
var Checkbox$1 = _interopDefault(require('material-ui/Checkbox'));
|
|
var Input$1 = _interopDefault(require('material-ui/Input'));
|
|
var Menu = require('material-ui/Menu');
|
|
var Select = _interopDefault(require('material-ui/Select'));
|
|
var classNames = _interopDefault(require('classnames'));
|
|
var ChevronLeft = _interopDefault(require('material-ui-icons/ChevronLeft'));
|
|
var ChevronRight = _interopDefault(require('material-ui-icons/ChevronRight'));
|
|
var dxGridCore = require('@devexpress/dx-grid-core');
|
|
var dxReactCore = require('@devexpress/dx-react-core');
|
|
var List$1 = _interopDefault(require('material-ui-icons/List'));
|
|
var ExpandMore = _interopDefault(require('material-ui-icons/ExpandMore'));
|
|
var IconButton$1 = _interopDefault(require('material-ui/IconButton'));
|
|
var Table$1 = require('material-ui/Table');
|
|
var Toolbar = _interopDefault(require('material-ui/Toolbar'));
|
|
var Typography$1 = _interopDefault(require('material-ui/Typography'));
|
|
|
|
var styles$1 = function styles$$1(theme) {
|
|
return {
|
|
headingPanel: {
|
|
paddingLeft: '12px',
|
|
paddingRight: '12px',
|
|
paddingTop: '12px',
|
|
borderBottom: '1px solid ' + theme.palette.text.lightDivider
|
|
},
|
|
footerPanel: {
|
|
padding: '12px'
|
|
}
|
|
};
|
|
};
|
|
|
|
var Root = function Root(_ref) {
|
|
var headerTemplate = _ref.headerTemplate,
|
|
bodyTemplate = _ref.bodyTemplate,
|
|
footerTemplate = _ref.footerTemplate;
|
|
return React.createElement(
|
|
materialUi.Paper,
|
|
null,
|
|
headerTemplate(),
|
|
bodyTemplate(),
|
|
footerTemplate()
|
|
);
|
|
};
|
|
|
|
Root.propTypes = {
|
|
headerTemplate: PropTypes.func.isRequired,
|
|
bodyTemplate: PropTypes.func.isRequired,
|
|
footerTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
var HeaderBase = function HeaderBase(_ref2) {
|
|
var children = _ref2.children,
|
|
classes = _ref2.classes;
|
|
return children && React.createElement(
|
|
'div',
|
|
{ className: classes.headingPanel },
|
|
children
|
|
);
|
|
};
|
|
|
|
HeaderBase.propTypes = {
|
|
children: PropTypes.node,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
HeaderBase.defaultProps = {
|
|
children: null
|
|
};
|
|
|
|
var Header = styles.withStyles(styles$1, { name: 'GridLayout' })(HeaderBase);
|
|
|
|
var FooterBase = function FooterBase(_ref3) {
|
|
var children = _ref3.children,
|
|
classes = _ref3.classes;
|
|
return children && React.createElement(
|
|
'div',
|
|
{ className: classes.footerPanel },
|
|
children
|
|
);
|
|
};
|
|
|
|
FooterBase.propTypes = {
|
|
children: PropTypes.node,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
FooterBase.defaultProps = {
|
|
children: null
|
|
};
|
|
|
|
var Footer = styles.withStyles(styles$1, { name: 'GridLayout' })(FooterBase);
|
|
|
|
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 rootTemplate = function rootTemplate(props) {
|
|
return React.createElement(Root, props);
|
|
};
|
|
var headerPlaceholderTemplate = function headerPlaceholderTemplate(props) {
|
|
return React.createElement(Header, props);
|
|
};
|
|
var footerPlaceholderTemplate = function footerPlaceholderTemplate(props) {
|
|
return React.createElement(Footer, props);
|
|
};
|
|
|
|
var Grid$1 = function Grid$$1(_ref) {
|
|
var children = _ref.children,
|
|
props = objectWithoutProperties(_ref, ['children']);
|
|
return React.createElement(
|
|
dxReactGrid.Grid,
|
|
_extends({
|
|
rootTemplate: rootTemplate,
|
|
headerPlaceholderTemplate: headerPlaceholderTemplate,
|
|
footerPlaceholderTemplate: footerPlaceholderTemplate
|
|
}, props),
|
|
children
|
|
);
|
|
};
|
|
|
|
Grid$1.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
|
};
|
|
|
|
var ColumnChooserContainer = function ColumnChooserContainer(_ref) {
|
|
var children = _ref.children;
|
|
return React.createElement(
|
|
List__default,
|
|
{ dense: true },
|
|
children
|
|
);
|
|
};
|
|
|
|
ColumnChooserContainer.propTypes = {
|
|
children: PropTypes.arrayOf(PropTypes.node).isRequired
|
|
};
|
|
|
|
var ColumnChooserItem = function ColumnChooserItem(_ref) {
|
|
var _ref$item = _ref.item,
|
|
column = _ref$item.column,
|
|
hidden = _ref$item.hidden,
|
|
onToggle = _ref.onToggle;
|
|
|
|
var handleClick = function handleClick() {
|
|
return onToggle();
|
|
};
|
|
return React.createElement(
|
|
List.ListItem,
|
|
{
|
|
key: column.name,
|
|
button: true,
|
|
onClick: handleClick
|
|
},
|
|
React.createElement(Checkbox$1, {
|
|
checked: !hidden,
|
|
tabIndex: -1,
|
|
disableRipple: true
|
|
}),
|
|
React.createElement(List.ListItemText, { primary: column.title || column.name })
|
|
);
|
|
};
|
|
|
|
ColumnChooserItem.propTypes = {
|
|
item: PropTypes.shape({
|
|
column: PropTypes.shape({
|
|
name: PropTypes.string
|
|
}),
|
|
hidden: PropTypes.bool
|
|
}).isRequired,
|
|
onToggle: PropTypes.func
|
|
};
|
|
|
|
ColumnChooserItem.defaultProps = {
|
|
onToggle: function onToggle() {}
|
|
};
|
|
|
|
var containerTemplate = function containerTemplate(props) {
|
|
return React.createElement(ColumnChooserContainer, props);
|
|
};
|
|
var itemTemplate = function itemTemplate(props) {
|
|
return React.createElement(ColumnChooserItem, props);
|
|
};
|
|
|
|
var ColumnChooser$1 = function ColumnChooser$$1(props) {
|
|
return React.createElement(dxReactGrid.ColumnChooser, _extends({
|
|
containerTemplate: containerTemplate,
|
|
itemTemplate: itemTemplate
|
|
}, props));
|
|
};
|
|
|
|
var styles$2 = function styles$$1(theme) {
|
|
return {
|
|
container: {
|
|
cursor: 'move',
|
|
position: 'fixed',
|
|
zIndex: 1000,
|
|
left: 0,
|
|
top: 0,
|
|
display: 'inline-block'
|
|
},
|
|
column: {
|
|
paddingTop: theme.spacing.unit,
|
|
paddingBottom: theme.spacing.unit,
|
|
paddingLeft: theme.spacing.unit * 2,
|
|
paddingRight: theme.spacing.unit * 2,
|
|
float: 'right'
|
|
}
|
|
};
|
|
};
|
|
|
|
var ContainerBase = function ContainerBase(_ref) {
|
|
var clientOffset = _ref.clientOffset,
|
|
columns = _ref.columns,
|
|
columnTemplate = _ref.columnTemplate,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.Paper,
|
|
{
|
|
className: classes.container,
|
|
style: {
|
|
transform: 'translate(calc(' + clientOffset.x + 'px - 50%), calc(' + clientOffset.y + 'px - 50%))'
|
|
}
|
|
},
|
|
columns.map(function (column) {
|
|
return React.cloneElement(columnTemplate({ column: column }), { key: column.name });
|
|
})
|
|
);
|
|
};
|
|
|
|
ContainerBase.propTypes = {
|
|
clientOffset: PropTypes.shape({
|
|
x: PropTypes.number.isRequired,
|
|
y: PropTypes.number.isRequired
|
|
}).isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
columnTemplate: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var Container = styles.withStyles(styles$2, { name: 'DragDrop' })(ContainerBase);
|
|
|
|
var ColumnBase = function ColumnBase(_ref2) {
|
|
var column = _ref2.column,
|
|
classes = _ref2.classes;
|
|
return React.createElement(
|
|
materialUi.Typography,
|
|
{
|
|
className: classes.column,
|
|
type: 'body1',
|
|
component: 'p'
|
|
},
|
|
column.title
|
|
);
|
|
};
|
|
|
|
ColumnBase.propTypes = {
|
|
column: PropTypes.object.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var Column = styles.withStyles(styles$2, { name: 'DragDrop' })(ColumnBase);
|
|
|
|
var containerTemplate$1 = function containerTemplate(props) {
|
|
return React.createElement(Container, props);
|
|
};
|
|
var columnTemplate = function columnTemplate(props) {
|
|
return React.createElement(Column, props);
|
|
};
|
|
|
|
var DragDropContext$1 = function (_React$PureComponent) {
|
|
inherits(DragDropContext$$1, _React$PureComponent);
|
|
|
|
function DragDropContext$$1() {
|
|
classCallCheck(this, DragDropContext$$1);
|
|
return possibleConstructorReturn(this, (DragDropContext$$1.__proto__ || Object.getPrototypeOf(DragDropContext$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(DragDropContext$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(dxReactGrid.DragDropContext, _extends({
|
|
containerTemplate: containerTemplate$1,
|
|
columnTemplate: columnTemplate
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return DragDropContext$$1;
|
|
}(React.PureComponent);
|
|
|
|
var styles$4 = function styles$$1(theme) {
|
|
return {
|
|
pageSizeSelector: _extends({}, theme.typography.caption, {
|
|
float: 'right',
|
|
paddingRight: theme.spacing.unit * 5
|
|
}),
|
|
label: {
|
|
paddingRight: theme.spacing.unit * 3,
|
|
lineHeight: theme.spacing.unit * 5 + 'px',
|
|
float: 'left'
|
|
},
|
|
pageSizes: {
|
|
display: 'inline-block'
|
|
},
|
|
pageSizeTitle: {
|
|
width: 'auto',
|
|
marginRight: theme.spacing.unit / 2
|
|
},
|
|
inputRoot: {
|
|
paddingTop: theme.spacing.unit * 0.75,
|
|
float: 'right',
|
|
fontSize: theme.spacing.unit * 1.75,
|
|
textAlign: 'right'
|
|
},
|
|
select: {
|
|
padding: '0 ' + theme.spacing.unit * 3.25 + 'px 0 0'
|
|
},
|
|
selectIcon: {
|
|
top: 2
|
|
},
|
|
'@media (max-width: 768px)': {
|
|
label: {
|
|
display: 'none'
|
|
},
|
|
pageSizeSelector: {
|
|
paddingRight: theme.spacing.unit * 2
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
var PageSizeSelectorBase = function PageSizeSelectorBase(_ref) {
|
|
var pageSize = _ref.pageSize,
|
|
onPageSizeChange = _ref.onPageSizeChange,
|
|
allowedPageSizes = _ref.allowedPageSizes,
|
|
getMessage = _ref.getMessage,
|
|
classes = _ref.classes;
|
|
|
|
var showAll = getMessage('showAll');
|
|
return React.createElement(
|
|
'div',
|
|
{ className: classes.pageSizeSelector },
|
|
React.createElement(
|
|
'span',
|
|
{ className: classes.label },
|
|
getMessage('rowsPerPage')
|
|
),
|
|
React.createElement(
|
|
Select,
|
|
{
|
|
value: pageSize,
|
|
onChange: function onChange(event) {
|
|
return onPageSizeChange(event.target.value);
|
|
},
|
|
classes: {
|
|
select: classes.select,
|
|
icon: classes.selectIcon
|
|
},
|
|
InputClasses: { root: classes.inputRoot },
|
|
input: React.createElement(Input$1, { disableUnderline: true })
|
|
},
|
|
allowedPageSizes.map(function (item) {
|
|
return React.createElement(
|
|
Menu.MenuItem,
|
|
{ key: item, value: item },
|
|
item !== 0 ? item : showAll
|
|
);
|
|
})
|
|
)
|
|
);
|
|
};
|
|
|
|
PageSizeSelectorBase.propTypes = {
|
|
pageSize: PropTypes.number.isRequired,
|
|
onPageSizeChange: PropTypes.func.isRequired,
|
|
allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var PageSizeSelector = styles.withStyles(styles$4, { name: 'PageSizeSelector' })(PageSizeSelectorBase);
|
|
|
|
var styles$5 = function styles$$1(theme) {
|
|
return {
|
|
pagination: {
|
|
float: 'right',
|
|
margin: 0
|
|
},
|
|
rowsLabel: _extends({}, theme.typography.caption, {
|
|
paddingRight: theme.spacing.unit * 5,
|
|
lineHeight: theme.spacing.unit * 5 + 'px'
|
|
}),
|
|
button: {
|
|
minWidth: theme.spacing.unit * 2,
|
|
height: theme.spacing.unit * 5
|
|
},
|
|
activeButton: {
|
|
fontWeight: 'bold'
|
|
},
|
|
arrowButton: {
|
|
width: theme.spacing.unit * 4,
|
|
height: theme.spacing.unit * 4,
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle'
|
|
},
|
|
prev: {
|
|
marginRight: 0
|
|
},
|
|
next: {
|
|
marginLeft: 0
|
|
},
|
|
'@media(max-width: 768px)': {
|
|
button: {
|
|
display: 'none'
|
|
},
|
|
prev: {
|
|
marginRight: theme.spacing.unit
|
|
},
|
|
next: {
|
|
marginLeft: theme.spacing.unit
|
|
},
|
|
rowsLabel: {
|
|
paddingRight: theme.spacing.unit * 2
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
var PageButton = function PageButton(_ref) {
|
|
var _classNames;
|
|
|
|
var text = _ref.text,
|
|
isActive = _ref.isActive,
|
|
isDisabled = _ref.isDisabled,
|
|
classes = _ref.classes,
|
|
onClick = _ref.onClick;
|
|
|
|
var buttonClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.button, true), defineProperty(_classNames, classes.activeButton, isActive), _classNames));
|
|
|
|
return React.createElement(
|
|
materialUi.Button,
|
|
{
|
|
className: buttonClasses,
|
|
disabled: isDisabled,
|
|
onClick: onClick
|
|
},
|
|
text
|
|
);
|
|
};
|
|
|
|
PageButton.propTypes = {
|
|
text: PropTypes.string.isRequired,
|
|
isActive: PropTypes.bool,
|
|
isDisabled: PropTypes.bool,
|
|
classes: PropTypes.object.isRequired,
|
|
onClick: PropTypes.func
|
|
};
|
|
|
|
PageButton.defaultProps = {
|
|
onClick: function onClick() {},
|
|
isDisabled: false,
|
|
isActive: false
|
|
};
|
|
|
|
var ellipsisSymbol = '\u2026';
|
|
|
|
var calculateStartPage = function calculateStartPage(currentPage, maxButtonCount, totalPageCount) {
|
|
return Math.max(Math.min(currentPage - Math.floor(maxButtonCount / 2, 10), totalPageCount - maxButtonCount + 1), 1);
|
|
};
|
|
|
|
var renderPageButtons = function renderPageButtons(currentPage, totalPageCount, classes, onCurrentPageChange) {
|
|
var pageButtons = [];
|
|
var maxButtonCount = 3;
|
|
var startPage = 1;
|
|
var endPage = totalPageCount || 1;
|
|
|
|
if (maxButtonCount < totalPageCount) {
|
|
startPage = calculateStartPage(currentPage + 1, maxButtonCount, totalPageCount);
|
|
endPage = startPage + maxButtonCount - 1;
|
|
}
|
|
if (startPage > 1) {
|
|
pageButtons.push(React.createElement(PageButton, {
|
|
key: 1,
|
|
text: String(1),
|
|
classes: classes,
|
|
onClick: function onClick() {
|
|
return onCurrentPageChange(0);
|
|
}
|
|
}));
|
|
|
|
if (startPage > 2) {
|
|
pageButtons.push(React.createElement(PageButton, {
|
|
key: 'ellipsisStart',
|
|
text: ellipsisSymbol,
|
|
classes: classes,
|
|
isDisabled: true
|
|
}));
|
|
}
|
|
}
|
|
|
|
var _loop = function _loop(page) {
|
|
pageButtons.push(React.createElement(PageButton, {
|
|
key: page,
|
|
text: String(page),
|
|
isActive: page === currentPage + 1,
|
|
classes: classes,
|
|
onClick: function onClick() {
|
|
return onCurrentPageChange(page - 1);
|
|
},
|
|
isDisabled: startPage === endPage
|
|
}));
|
|
};
|
|
|
|
for (var page = startPage; page <= endPage; page += 1) {
|
|
_loop(page);
|
|
}
|
|
|
|
if (endPage < totalPageCount) {
|
|
if (endPage < totalPageCount - 1) {
|
|
pageButtons.push(React.createElement(PageButton, {
|
|
key: 'ellipsisEnd',
|
|
text: ellipsisSymbol,
|
|
classes: classes,
|
|
isDisabled: true
|
|
}));
|
|
}
|
|
|
|
pageButtons.push(React.createElement(PageButton, {
|
|
key: totalPageCount,
|
|
text: String(totalPageCount),
|
|
classes: classes,
|
|
onClick: function onClick() {
|
|
return onCurrentPageChange(totalPageCount - 1);
|
|
}
|
|
}));
|
|
}
|
|
|
|
return pageButtons;
|
|
};
|
|
|
|
var PaginationBase = function PaginationBase(_ref2) {
|
|
var totalPages = _ref2.totalPages,
|
|
totalCount = _ref2.totalCount,
|
|
pageSize = _ref2.pageSize,
|
|
currentPage = _ref2.currentPage,
|
|
onCurrentPageChange = _ref2.onCurrentPageChange,
|
|
getMessage = _ref2.getMessage,
|
|
classes = _ref2.classes;
|
|
|
|
var from = dxGridCore.firstRowOnPage(currentPage, pageSize, totalCount);
|
|
var to = dxGridCore.lastRowOnPage(currentPage, pageSize, totalCount);
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: classes.pagination },
|
|
React.createElement(
|
|
'span',
|
|
{ className: classes.rowsLabel },
|
|
getMessage('info', { from: from, to: to, count: totalCount })
|
|
),
|
|
React.createElement(
|
|
materialUi.IconButton,
|
|
{
|
|
className: classNames(classes.arrowButton, classes.prev),
|
|
disabled: currentPage === 0,
|
|
onClick: function onClick() {
|
|
return currentPage > 0 && onCurrentPageChange(currentPage - 1);
|
|
}
|
|
},
|
|
React.createElement(ChevronLeft, null)
|
|
),
|
|
renderPageButtons(currentPage, totalPages, classes, onCurrentPageChange),
|
|
React.createElement(
|
|
materialUi.IconButton,
|
|
{
|
|
className: classNames(classes.arrowButton, classes.next),
|
|
disabled: currentPage === totalPages - 1 || totalCount === 0,
|
|
onClick: function onClick() {
|
|
return currentPage < totalPages - 1 && onCurrentPageChange(currentPage + 1);
|
|
}
|
|
},
|
|
React.createElement(ChevronRight, null)
|
|
)
|
|
);
|
|
};
|
|
|
|
PaginationBase.propTypes = {
|
|
totalPages: PropTypes.number.isRequired,
|
|
currentPage: PropTypes.number.isRequired,
|
|
onCurrentPageChange: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
totalCount: PropTypes.number.isRequired,
|
|
pageSize: PropTypes.number.isRequired,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var Pagination = styles.withStyles(styles$5, { name: 'Pagination' })(PaginationBase);
|
|
|
|
var styles$3 = {
|
|
pager: {
|
|
overflow: 'hidden'
|
|
}
|
|
};
|
|
|
|
var PagerBase = function PagerBase(_ref) {
|
|
var currentPage = _ref.currentPage,
|
|
allowedPageSizes = _ref.allowedPageSizes,
|
|
totalPages = _ref.totalPages,
|
|
pageSize = _ref.pageSize,
|
|
classes = _ref.classes,
|
|
_onCurrentPageChange = _ref.onCurrentPageChange,
|
|
onPageSizeChange = _ref.onPageSizeChange,
|
|
totalCount = _ref.totalCount,
|
|
getMessage = _ref.getMessage;
|
|
return React.createElement(
|
|
'div',
|
|
{ className: classes.pager },
|
|
React.createElement(Pagination, {
|
|
totalPages: totalPages,
|
|
totalCount: totalCount,
|
|
currentPage: currentPage,
|
|
onCurrentPageChange: function onCurrentPageChange(page) {
|
|
return _onCurrentPageChange(page);
|
|
},
|
|
pageSize: pageSize,
|
|
getMessage: getMessage
|
|
}),
|
|
!!allowedPageSizes.length && React.createElement(PageSizeSelector, {
|
|
pageSize: pageSize,
|
|
onPageSizeChange: onPageSizeChange,
|
|
allowedPageSizes: allowedPageSizes,
|
|
getMessage: getMessage
|
|
})
|
|
);
|
|
};
|
|
|
|
PagerBase.propTypes = {
|
|
currentPage: PropTypes.number.isRequired,
|
|
totalPages: PropTypes.number.isRequired,
|
|
allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
|
|
pageSize: PropTypes.number.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
onCurrentPageChange: PropTypes.func.isRequired,
|
|
onPageSizeChange: PropTypes.func.isRequired,
|
|
totalCount: PropTypes.number.isRequired,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var Pager = styles.withStyles(styles$3, { name: 'Pager' })(PagerBase);
|
|
|
|
var pagerTemplate = function pagerTemplate(props) {
|
|
return React.createElement(Pager, props);
|
|
};
|
|
|
|
var defaultMessages = {
|
|
showAll: 'All',
|
|
rowsPerPage: 'Rows per page:',
|
|
info: function info(_ref) {
|
|
var from = _ref.from,
|
|
to = _ref.to,
|
|
count = _ref.count;
|
|
return '' + from + (from < to ? '-' + to : '') + ' of ' + count;
|
|
}
|
|
};
|
|
|
|
var PagingPanel$1 = function (_React$PureComponent) {
|
|
inherits(PagingPanel$$1, _React$PureComponent);
|
|
|
|
function PagingPanel$$1() {
|
|
classCallCheck(this, PagingPanel$$1);
|
|
return possibleConstructorReturn(this, (PagingPanel$$1.__proto__ || Object.getPrototypeOf(PagingPanel$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(PagingPanel$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.PagingPanel, _extends({
|
|
pagerTemplate: pagerTemplate,
|
|
messages: _extends({}, defaultMessages, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return PagingPanel$$1;
|
|
}(React.PureComponent);
|
|
|
|
PagingPanel$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
showAll: PropTypes.string,
|
|
rowsPerPage: PropTypes.string,
|
|
info: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
|
|
})
|
|
};
|
|
|
|
PagingPanel$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var styles$6 = function styles$$1(theme) {
|
|
return {
|
|
panel: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
width: '100%'
|
|
},
|
|
groupInfo: {
|
|
padding: theme.spacing.unit * 0.75 + 'px 0',
|
|
marginBottom: theme.spacing.unit * 1.5,
|
|
display: 'inline-block',
|
|
color: theme.typography.title.color
|
|
},
|
|
groupIcon: {
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle'
|
|
}
|
|
};
|
|
};
|
|
|
|
var GroupPanelTextBase = function GroupPanelTextBase(_ref) {
|
|
var classes = _ref.classes,
|
|
allowDragging = _ref.allowDragging,
|
|
allowUngroupingByClick = _ref.allowUngroupingByClick,
|
|
getMessage = _ref.getMessage;
|
|
|
|
var message = getMessage('groupByColumn');
|
|
if (message) {
|
|
return React.createElement(
|
|
'span',
|
|
{ className: classes.groupInfo },
|
|
message
|
|
);
|
|
}
|
|
if (allowDragging) {
|
|
return React.createElement(
|
|
'span',
|
|
{ className: classes.groupInfo },
|
|
'Drag a column header here to group by that column'
|
|
);
|
|
}
|
|
if (allowUngroupingByClick) {
|
|
return React.createElement(
|
|
'span',
|
|
{ className: classes.groupInfo },
|
|
'Click \xA0',
|
|
React.createElement(
|
|
'span',
|
|
{ className: classes.groupIcon },
|
|
React.createElement(List$1, null)
|
|
),
|
|
'\xA0 icon in the column header to group by that column'
|
|
);
|
|
}
|
|
return React.createElement(
|
|
'span',
|
|
{ className: classes.groupInfo },
|
|
'Grouping is not available'
|
|
);
|
|
};
|
|
|
|
GroupPanelTextBase.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
allowDragging: PropTypes.bool,
|
|
allowUngroupingByClick: PropTypes.bool,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
GroupPanelTextBase.defaultProps = {
|
|
allowDragging: false,
|
|
allowUngroupingByClick: false
|
|
};
|
|
|
|
var GroupPanelText = styles.withStyles(styles$6, { name: 'GroupPanel' })(GroupPanelTextBase);
|
|
|
|
var PanelTemplateBase = function PanelTemplateBase(_ref2) {
|
|
var classes = _ref2.classes,
|
|
items = _ref2.items;
|
|
return React.createElement(
|
|
'div',
|
|
{ className: classes.panel },
|
|
items
|
|
);
|
|
};
|
|
|
|
PanelTemplateBase.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
items: PropTypes.arrayOf(PropTypes.node).isRequired
|
|
};
|
|
|
|
var PanelTemplate = styles.withStyles(styles$6, { name: 'GroupPanel' })(PanelTemplateBase);
|
|
|
|
var panelTemplate = function panelTemplate(props) {
|
|
return React.createElement(PanelTemplate, props);
|
|
};
|
|
|
|
var GroupPanelBase = function GroupPanelBase(_ref3) {
|
|
var getMessage = _ref3.getMessage,
|
|
classes = _ref3.classes,
|
|
restProps = objectWithoutProperties(_ref3, ['getMessage', 'classes']);
|
|
|
|
var groupPanelText = React.createElement(GroupPanelText, {
|
|
allowDragging: restProps.allowDragging,
|
|
allowUngroupingByClick: restProps.allowUngroupingByClick,
|
|
getMessage: getMessage
|
|
});
|
|
return React.createElement(
|
|
'div',
|
|
{ className: classes.panel },
|
|
React.createElement(dxReactGrid.GroupPanelLayout, _extends({
|
|
groupByColumnText: groupPanelText,
|
|
panelTemplate: panelTemplate
|
|
}, restProps))
|
|
);
|
|
};
|
|
|
|
GroupPanelBase.propTypes = {
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var GroupPanel = styles.withStyles(styles$6, { name: 'GroupPanel' })(GroupPanelBase);
|
|
|
|
var ENTER_KEY_CODE = 13;
|
|
var SPACE_KEY_CODE = 32;
|
|
|
|
var styles$7 = function styles$$1(theme) {
|
|
return {
|
|
button: {
|
|
marginRight: theme.spacing.unit,
|
|
marginBottom: '12px'
|
|
},
|
|
draftCell: {
|
|
opacity: 0.3
|
|
}
|
|
};
|
|
};
|
|
|
|
var label = function label(allowSorting, sortingDirection, column) {
|
|
var title = column.title || column.name;
|
|
return allowSorting ? React.createElement(
|
|
materialUi.TableSortLabel,
|
|
{
|
|
active: !!sortingDirection,
|
|
direction: sortingDirection,
|
|
tabIndex: -1
|
|
},
|
|
title
|
|
) : title;
|
|
};
|
|
|
|
var GroupPanelItemBase = function GroupPanelItemBase(_ref) {
|
|
var _classNames;
|
|
|
|
var column = _ref.column,
|
|
draft = _ref.draft,
|
|
groupByColumn = _ref.groupByColumn,
|
|
allowUngroupingByClick = _ref.allowUngroupingByClick,
|
|
allowSorting = _ref.allowSorting,
|
|
sortingDirection = _ref.sortingDirection,
|
|
changeSortingDirection = _ref.changeSortingDirection,
|
|
classes = _ref.classes;
|
|
|
|
var chipClassNames = classNames((_classNames = {}, defineProperty(_classNames, classes.button, true), defineProperty(_classNames, classes.draftCell, draft), _classNames));
|
|
var onClick = function onClick(e) {
|
|
if (!allowSorting) return;
|
|
var isActionKeyDown = e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE;
|
|
var isMouseClick = e.keyCode === undefined;
|
|
var cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
|
|
var cancel = isMouseClick && cancelSortingRelatedKey || isActionKeyDown && cancelSortingRelatedKey;
|
|
|
|
changeSortingDirection({
|
|
keepOther: cancelSortingRelatedKey,
|
|
cancel: cancel,
|
|
columnName: column.name
|
|
});
|
|
};
|
|
|
|
return React.createElement(materialUi.Chip, _extends({
|
|
label: label(allowSorting, sortingDirection, column),
|
|
className: chipClassNames
|
|
}, allowUngroupingByClick ? { onRequestDelete: function onRequestDelete() {
|
|
return groupByColumn({ columnName: column.name });
|
|
} } : null, {
|
|
onClick: onClick
|
|
}));
|
|
};
|
|
|
|
GroupPanelItemBase.propTypes = {
|
|
column: PropTypes.shape({
|
|
title: PropTypes.string
|
|
}).isRequired,
|
|
draft: PropTypes.bool,
|
|
allowSorting: PropTypes.bool,
|
|
sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
|
|
changeSortingDirection: PropTypes.func,
|
|
groupByColumn: PropTypes.func,
|
|
allowUngroupingByClick: PropTypes.bool,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
GroupPanelItemBase.defaultProps = {
|
|
draft: false,
|
|
allowSorting: false,
|
|
sortingDirection: undefined,
|
|
changeSortingDirection: undefined,
|
|
groupByColumn: undefined,
|
|
allowUngroupingByClick: false
|
|
};
|
|
|
|
var GroupPanelItem = styles.withStyles(styles$7, { name: 'GroupPanelItem' })(GroupPanelItemBase);
|
|
|
|
var defaultCellTemplate = function defaultCellTemplate(props) {
|
|
return React.createElement(GroupPanelItem, props);
|
|
};
|
|
|
|
var defaultMessages$1 = {
|
|
groupByColumn: ''
|
|
};
|
|
|
|
var GroupingPanel$1 = function (_React$PureComponent) {
|
|
inherits(GroupingPanel$$1, _React$PureComponent);
|
|
|
|
function GroupingPanel$$1() {
|
|
classCallCheck(this, GroupingPanel$$1);
|
|
return possibleConstructorReturn(this, (GroupingPanel$$1.__proto__ || Object.getPrototypeOf(GroupingPanel$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(GroupingPanel$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
groupPanelItemTemplate = _props.groupPanelItemTemplate,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['groupPanelItemTemplate', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.GroupingPanel, _extends({
|
|
groupPanelTemplate: function groupPanelTemplate(props) {
|
|
return React.createElement(GroupPanel, _extends({
|
|
groupPanelItemTemplate: dxReactCore.combineTemplates(groupPanelItemTemplate, defaultCellTemplate)
|
|
}, props));
|
|
},
|
|
messages: _extends({}, defaultMessages$1, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return GroupingPanel$$1;
|
|
}(React.PureComponent);
|
|
|
|
GroupingPanel$1.propTypes = {
|
|
allowSorting: PropTypes.bool,
|
|
groupPanelItemTemplate: PropTypes.func,
|
|
messages: PropTypes.shape({
|
|
groupByColumn: PropTypes.string
|
|
})
|
|
};
|
|
|
|
GroupingPanel$1.defaultProps = {
|
|
allowSorting: false,
|
|
groupPanelItemTemplate: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$8 = function styles$$1(theme) {
|
|
return {
|
|
toggleCell: {
|
|
textAlign: 'center',
|
|
textOverflow: 'initial',
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingLeft: theme.spacing.unit
|
|
},
|
|
toggleCellButton: {
|
|
verticalAlign: 'middle',
|
|
display: 'inline-block',
|
|
height: theme.spacing.unit * 5,
|
|
width: theme.spacing.unit * 5
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableDetailToggleCellBase = function TableDetailToggleCellBase(_ref) {
|
|
var style = _ref.style,
|
|
expanded = _ref.expanded,
|
|
classes = _ref.classes,
|
|
toggleExpanded = _ref.toggleExpanded;
|
|
|
|
var handleClick = function handleClick() {
|
|
toggleExpanded();
|
|
};
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
className: classes.toggleCell,
|
|
style: style
|
|
},
|
|
React.createElement(
|
|
IconButton$1,
|
|
{
|
|
className: classes.toggleCellButton,
|
|
onClick: handleClick
|
|
},
|
|
expanded ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null)
|
|
)
|
|
);
|
|
};
|
|
|
|
TableDetailToggleCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
expanded: PropTypes.bool,
|
|
classes: PropTypes.object.isRequired,
|
|
toggleExpanded: PropTypes.func
|
|
};
|
|
|
|
TableDetailToggleCellBase.defaultProps = {
|
|
style: null,
|
|
expanded: false,
|
|
toggleExpanded: function toggleExpanded() {}
|
|
};
|
|
|
|
var TableDetailToggleCell = styles.withStyles(styles$8, { name: 'TableDetailToggleCell' })(TableDetailToggleCellBase);
|
|
|
|
var styles$9 = function styles$$1(theme) {
|
|
return {
|
|
active: {
|
|
backgroundColor: theme.palette.background.contentFrame
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableDetailCellBase = function TableDetailCellBase(_ref) {
|
|
var colSpan = _ref.colSpan,
|
|
style = _ref.style,
|
|
template = _ref.template,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
style: style,
|
|
colSpan: colSpan,
|
|
className: classes.active
|
|
},
|
|
template()
|
|
);
|
|
};
|
|
|
|
TableDetailCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
colSpan: PropTypes.number,
|
|
template: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
TableDetailCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1
|
|
};
|
|
|
|
var TableDetailCell = styles.withStyles(styles$9, { name: 'TableDetailCell' })(TableDetailCellBase);
|
|
|
|
var TableRow$1 = function TableRow$$1(_ref) {
|
|
var children = _ref.children,
|
|
style = _ref.style;
|
|
return React.createElement(
|
|
materialUi.TableRow,
|
|
{
|
|
style: style
|
|
},
|
|
children
|
|
);
|
|
};
|
|
|
|
TableRow$1.propTypes = {
|
|
children: PropTypes.node,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
TableRow$1.defaultProps = {
|
|
children: null,
|
|
style: null
|
|
};
|
|
|
|
var defaultDetailToggleCellTemplate = function defaultDetailToggleCellTemplate(props) {
|
|
return React.createElement(TableDetailToggleCell, props);
|
|
};
|
|
var defaultDetailCellTemplate = function defaultDetailCellTemplate(props) {
|
|
return React.createElement(TableDetailCell, props);
|
|
};
|
|
var defaultDetailRowTemplate = function defaultDetailRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
|
|
var TableRowDetail$1 = function (_React$PureComponent) {
|
|
inherits(TableRowDetail$$1, _React$PureComponent);
|
|
|
|
function TableRowDetail$$1() {
|
|
classCallCheck(this, TableRowDetail$$1);
|
|
return possibleConstructorReturn(this, (TableRowDetail$$1.__proto__ || Object.getPrototypeOf(TableRowDetail$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableRowDetail$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
detailCellTemplate = _props.detailCellTemplate,
|
|
detailRowTemplate = _props.detailRowTemplate,
|
|
detailToggleCellTemplate = _props.detailToggleCellTemplate,
|
|
restProps = objectWithoutProperties(_props, ['detailCellTemplate', 'detailRowTemplate', 'detailToggleCellTemplate']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableRowDetail, _extends({
|
|
detailToggleCellTemplate: dxReactCore.combineTemplates(detailToggleCellTemplate, defaultDetailToggleCellTemplate),
|
|
detailCellTemplate: dxReactCore.combineTemplates(detailCellTemplate, defaultDetailCellTemplate),
|
|
detailRowTemplate: dxReactCore.combineTemplates(detailRowTemplate, defaultDetailRowTemplate),
|
|
detailToggleCellWidth: 32
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableRowDetail$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableRowDetail$1.propTypes = {
|
|
detailRowTemplate: PropTypes.func,
|
|
detailCellTemplate: PropTypes.func,
|
|
detailToggleCellTemplate: PropTypes.func
|
|
};
|
|
|
|
TableRowDetail$1.defaultProps = {
|
|
detailRowTemplate: undefined,
|
|
detailCellTemplate: undefined,
|
|
detailToggleCellTemplate: undefined
|
|
};
|
|
|
|
var styles$10 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
cursor: 'pointer',
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit,
|
|
paddingTop: theme.spacing.unit / 2 - 1
|
|
},
|
|
indentCell: {
|
|
padding: 0
|
|
},
|
|
groupButton: {
|
|
verticalAlign: 'middle',
|
|
display: 'inline-block',
|
|
marginRight: theme.spacing.unit,
|
|
height: theme.spacing.unit * 5,
|
|
width: theme.spacing.unit * 5
|
|
},
|
|
columnTitle: {
|
|
verticalAlign: 'middle'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableGroupCellBase = function TableGroupCellBase(_ref) {
|
|
var style = _ref.style,
|
|
colSpan = _ref.colSpan,
|
|
row = _ref.row,
|
|
column = _ref.column,
|
|
isExpanded = _ref.isExpanded,
|
|
toggleGroupExpanded = _ref.toggleGroupExpanded,
|
|
classes = _ref.classes,
|
|
children = _ref.children;
|
|
|
|
var handleClick = function handleClick() {
|
|
return toggleGroupExpanded();
|
|
};
|
|
|
|
return React.createElement(
|
|
Table$1.TableCell,
|
|
{
|
|
colSpan: colSpan,
|
|
style: style,
|
|
className: classes.cell,
|
|
onClick: handleClick
|
|
},
|
|
React.createElement(
|
|
IconButton$1,
|
|
{
|
|
className: classes.groupButton
|
|
},
|
|
isExpanded ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null)
|
|
),
|
|
React.createElement(
|
|
'span',
|
|
{ className: classes.columnTitle },
|
|
React.createElement(
|
|
'strong',
|
|
null,
|
|
column.title || column.name,
|
|
': '
|
|
),
|
|
children || row.value
|
|
)
|
|
);
|
|
};
|
|
|
|
TableGroupCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
colSpan: PropTypes.number,
|
|
row: PropTypes.object,
|
|
column: PropTypes.object,
|
|
isExpanded: PropTypes.bool,
|
|
toggleGroupExpanded: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
|
|
};
|
|
|
|
TableGroupCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1,
|
|
row: {},
|
|
column: {},
|
|
isExpanded: false,
|
|
toggleGroupExpanded: function toggleGroupExpanded() {},
|
|
children: undefined
|
|
};
|
|
|
|
var TableGroupCell = styles.withStyles(styles$10, { name: 'TableGroupCell' })(TableGroupCellBase);
|
|
|
|
var defaultGroupCellTemplate = function defaultGroupCellTemplate(props) {
|
|
return React.createElement(TableGroupCell, props);
|
|
};
|
|
var defaultGroupRowTemplate = function defaultGroupRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
|
|
var TableGroupRow$1 = function (_React$PureComponent) {
|
|
inherits(TableGroupRow$$1, _React$PureComponent);
|
|
|
|
function TableGroupRow$$1() {
|
|
classCallCheck(this, TableGroupRow$$1);
|
|
return possibleConstructorReturn(this, (TableGroupRow$$1.__proto__ || Object.getPrototypeOf(TableGroupRow$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableGroupRow$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
groupCellTemplate = _props.groupCellTemplate,
|
|
groupRowTemplate = _props.groupRowTemplate,
|
|
restProps = objectWithoutProperties(_props, ['groupCellTemplate', 'groupRowTemplate']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableGroupRow, _extends({
|
|
groupCellTemplate: dxReactCore.combineTemplates(groupCellTemplate, defaultGroupCellTemplate),
|
|
groupRowTemplate: dxReactCore.combineTemplates(groupRowTemplate, defaultGroupRowTemplate),
|
|
groupIndentColumnWidth: 32
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableGroupRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableGroupRow$1.propTypes = {
|
|
groupRowTemplate: PropTypes.func,
|
|
groupCellTemplate: PropTypes.func
|
|
};
|
|
|
|
TableGroupRow$1.defaultProps = {
|
|
groupRowTemplate: undefined,
|
|
groupCellTemplate: undefined
|
|
};
|
|
|
|
var styles$11 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
overflow: 'visible',
|
|
paddingRight: 0,
|
|
paddingLeft: theme.spacing.unit
|
|
},
|
|
pointer: {
|
|
cursor: 'pointer'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableSelectAllCellBase = function TableSelectAllCellBase(_ref) {
|
|
var _classNames;
|
|
|
|
var style = _ref.style,
|
|
allSelected = _ref.allSelected,
|
|
someSelected = _ref.someSelected,
|
|
selectionAvailable = _ref.selectionAvailable,
|
|
toggleAll = _ref.toggleAll,
|
|
classes = _ref.classes;
|
|
|
|
var cellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.pointer, selectionAvailable), _classNames));
|
|
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
padding: 'checkbox',
|
|
style: style,
|
|
className: cellClasses,
|
|
onClick: function onClick(e) {
|
|
if (!selectionAvailable) return;
|
|
|
|
e.stopPropagation();
|
|
toggleAll();
|
|
}
|
|
},
|
|
React.createElement(materialUi.Checkbox, {
|
|
checked: allSelected,
|
|
indeterminate: someSelected,
|
|
disabled: !selectionAvailable
|
|
})
|
|
);
|
|
};
|
|
|
|
TableSelectAllCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
allSelected: PropTypes.bool,
|
|
someSelected: PropTypes.bool,
|
|
selectionAvailable: PropTypes.bool,
|
|
toggleAll: PropTypes.func,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
TableSelectAllCellBase.defaultProps = {
|
|
style: null,
|
|
allSelected: false,
|
|
someSelected: false,
|
|
selectionAvailable: false,
|
|
toggleAll: function toggleAll() {}
|
|
};
|
|
|
|
var TableSelectAllCell = styles.withStyles(styles$11, { name: 'TableSelectAllCell' })(TableSelectAllCellBase);
|
|
|
|
var styles$12 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
overflow: 'visible',
|
|
paddingRight: 0,
|
|
paddingLeft: theme.spacing.unit * 1.5
|
|
},
|
|
checkbox: {
|
|
marginTop: '-1px',
|
|
marginBottom: '-1px',
|
|
width: theme.spacing.unit * 5,
|
|
height: theme.spacing.unit * 5
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableSelectCellBase = function TableSelectCellBase(_ref) {
|
|
var style = _ref.style,
|
|
selected = _ref.selected,
|
|
changeSelected = _ref.changeSelected,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
padding: 'checkbox',
|
|
style: style,
|
|
className: classes.cell,
|
|
onClick: function onClick(e) {
|
|
e.stopPropagation();
|
|
changeSelected();
|
|
}
|
|
},
|
|
React.createElement(materialUi.Checkbox, {
|
|
className: classes.checkbox,
|
|
checked: selected
|
|
})
|
|
);
|
|
};
|
|
|
|
TableSelectCellBase.defaultProps = {
|
|
style: null,
|
|
selected: false,
|
|
changeSelected: function changeSelected() {}
|
|
};
|
|
|
|
TableSelectCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
selected: PropTypes.bool,
|
|
changeSelected: PropTypes.func,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var TableSelectCell = styles.withStyles(styles$12, { name: 'TableSelectCell' })(TableSelectCellBase);
|
|
|
|
var TableSelectRow = function TableSelectRow(_ref) {
|
|
var selected = _ref.selected,
|
|
children = _ref.children,
|
|
style = _ref.style,
|
|
changeSelected = _ref.changeSelected,
|
|
selectByRowClick = _ref.selectByRowClick;
|
|
return React.createElement(
|
|
materialUi.TableRow,
|
|
{
|
|
style: style,
|
|
selected: selected,
|
|
onClick: function onClick(e) {
|
|
if (!selectByRowClick) return;
|
|
e.stopPropagation();
|
|
changeSelected();
|
|
}
|
|
},
|
|
children
|
|
);
|
|
};
|
|
|
|
TableSelectRow.propTypes = {
|
|
children: PropTypes.node,
|
|
changeSelected: PropTypes.func,
|
|
selected: PropTypes.bool,
|
|
selectByRowClick: PropTypes.bool,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
TableSelectRow.defaultProps = {
|
|
children: null,
|
|
changeSelected: function changeSelected() {},
|
|
selected: false,
|
|
selectByRowClick: false,
|
|
style: null
|
|
};
|
|
|
|
var selectCellTemplate = function selectCellTemplate(props) {
|
|
return React.createElement(TableSelectCell, props);
|
|
};
|
|
var selectAllCellTemplate = function selectAllCellTemplate(props) {
|
|
return React.createElement(TableSelectAllCell, props);
|
|
};
|
|
var selectRowTemplate = function selectRowTemplate(props) {
|
|
return React.createElement(TableSelectRow, props);
|
|
};
|
|
|
|
var TableSelection$1 = function (_React$PureComponent) {
|
|
inherits(TableSelection$$1, _React$PureComponent);
|
|
|
|
function TableSelection$$1() {
|
|
classCallCheck(this, TableSelection$$1);
|
|
return possibleConstructorReturn(this, (TableSelection$$1.__proto__ || Object.getPrototypeOf(TableSelection$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableSelection$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(dxReactGrid.TableSelection, _extends({
|
|
selectCellTemplate: selectCellTemplate,
|
|
selectRowTemplate: selectRowTemplate,
|
|
selectAllCellTemplate: selectAllCellTemplate,
|
|
selectionColumnWidth: 40
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return TableSelection$$1;
|
|
}(React.PureComponent);
|
|
|
|
var styles$13 = {
|
|
root: {
|
|
overflow: 'auto',
|
|
WebkitOverflowScrolling: 'touch'
|
|
}
|
|
};
|
|
|
|
var TableContainerBase = function TableContainerBase(_ref) {
|
|
var children = _ref.children,
|
|
classes = _ref.classes,
|
|
restProps = objectWithoutProperties(_ref, ['children', 'classes']);
|
|
return React.createElement(
|
|
'div',
|
|
_extends({
|
|
className: classes.root
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
TableContainerBase.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var TableContainer = styles.withStyles(styles$13, { name: 'TableContainer' })(TableContainerBase);
|
|
|
|
var styles$14 = {
|
|
table: {
|
|
tableLayout: 'fixed'
|
|
},
|
|
headTable: {
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1,
|
|
background: 'white',
|
|
overflow: 'visible',
|
|
fallbacks: {
|
|
position: '-webkit-sticky'
|
|
}
|
|
}
|
|
};
|
|
|
|
var TableBase = function TableBase(_ref) {
|
|
var _classNames;
|
|
|
|
var children = _ref.children,
|
|
classes = _ref.classes,
|
|
use = _ref.use,
|
|
restProps = objectWithoutProperties(_ref, ['children', 'classes', 'use']);
|
|
return React.createElement(
|
|
materialUi.Table,
|
|
_extends({
|
|
className: classNames((_classNames = {}, defineProperty(_classNames, classes.table, true), defineProperty(_classNames, classes.headTable, use === 'head'), _classNames))
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
TableBase.propTypes = {
|
|
use: PropTypes.oneOf(['head']),
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
TableBase.defaultProps = {
|
|
use: undefined
|
|
};
|
|
|
|
var Table$2 = styles.withStyles(styles$14, { name: 'Table' })(TableBase);
|
|
|
|
var MINIMAL_COLUMN_WIDTH = 120;
|
|
|
|
var containerTemplate$2 = function containerTemplate(props) {
|
|
return React.createElement(TableContainer, props);
|
|
};
|
|
var tableTemplate = function tableTemplate(props) {
|
|
return React.createElement(Table$2, props);
|
|
};
|
|
var headTemplate = function headTemplate(props) {
|
|
return React.createElement(materialUi.TableHead, props);
|
|
};
|
|
var bodyTemplate = function bodyTemplate(props) {
|
|
return React.createElement(materialUi.TableBody, props);
|
|
};
|
|
|
|
var TableLayout$1 = function TableLayout$$1(_ref) {
|
|
var headerRows = _ref.headerRows,
|
|
bodyRows = _ref.bodyRows,
|
|
columns = _ref.columns,
|
|
cellTemplate = _ref.cellTemplate,
|
|
rowTemplate = _ref.rowTemplate;
|
|
return React.createElement(dxReactGrid.TableLayout, {
|
|
layoutComponent: dxReactGrid.StaticTableLayout,
|
|
headerRows: headerRows,
|
|
rows: bodyRows,
|
|
columns: columns,
|
|
minColumnWidth: MINIMAL_COLUMN_WIDTH,
|
|
containerTemplate: containerTemplate$2,
|
|
tableTemplate: tableTemplate,
|
|
headTemplate: headTemplate,
|
|
bodyTemplate: bodyTemplate,
|
|
rowTemplate: rowTemplate,
|
|
cellTemplate: cellTemplate
|
|
});
|
|
};
|
|
|
|
TableLayout$1.propTypes = {
|
|
headerRows: PropTypes.array.isRequired,
|
|
bodyRows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
cellTemplate: PropTypes.func.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired
|
|
};
|
|
|
|
var styles$15 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
paddingRight: theme.spacing.unit,
|
|
'& ~ $cell': {
|
|
paddingLeft: theme.spacing.unit
|
|
},
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap'
|
|
},
|
|
cellRightAlign: {
|
|
textAlign: 'right'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableCellBase = function TableCellBase(_ref) {
|
|
var _classNames;
|
|
|
|
var style = _ref.style,
|
|
column = _ref.column,
|
|
value = _ref.value,
|
|
children = _ref.children,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
style: _extends({}, style),
|
|
className: classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRightAlign, column.align === 'right'), _classNames))
|
|
},
|
|
children || value
|
|
);
|
|
};
|
|
|
|
TableCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
value: PropTypes.any,
|
|
column: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
|
|
};
|
|
|
|
TableCellBase.defaultProps = {
|
|
style: null,
|
|
value: undefined,
|
|
column: {},
|
|
children: undefined
|
|
};
|
|
|
|
var TableCell$2 = styles.withStyles(styles$15, { name: 'TableCell' })(TableCellBase);
|
|
|
|
var styles$16 = {
|
|
cell: {
|
|
padding: 0
|
|
}
|
|
};
|
|
|
|
var TableStubCellBase = function TableStubCellBase(_ref) {
|
|
var style = _ref.style,
|
|
classes = _ref.classes;
|
|
return React.createElement(materialUi.TableCell, {
|
|
style: style,
|
|
className: classes.cell
|
|
});
|
|
};
|
|
|
|
TableStubCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
TableStubCellBase.defaultProps = {
|
|
style: {}
|
|
};
|
|
|
|
var TableStubCell = styles.withStyles(styles$16, { name: 'TableStubCell' })(TableStubCellBase);
|
|
|
|
var styles$17 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
textAlign: 'center',
|
|
padding: theme.spacing.unit * 5 + 'px 0'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableNoDataCellBase = function TableNoDataCellBase(_ref) {
|
|
var style = _ref.style,
|
|
colSpan = _ref.colSpan,
|
|
getMessage = _ref.getMessage,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
style: style,
|
|
className: classes.cell,
|
|
colSpan: colSpan
|
|
},
|
|
React.createElement(
|
|
'big',
|
|
{ className: 'text-muted' },
|
|
getMessage('noData')
|
|
)
|
|
);
|
|
};
|
|
|
|
TableNoDataCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
colSpan: PropTypes.number,
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
TableNoDataCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1
|
|
};
|
|
|
|
var TableNoDataCell = styles.withStyles(styles$17, { name: 'TableNoDataCell' })(TableNoDataCellBase);
|
|
|
|
var tableLayoutTemplate = function tableLayoutTemplate(props) {
|
|
return React.createElement(TableLayout$1, props);
|
|
};
|
|
var defaultRowTemplate = function defaultRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
var defaultNoDataRowTemplate = function defaultNoDataRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
var defaultCellTemplate$1 = function defaultCellTemplate(props) {
|
|
return React.createElement(TableCell$2, props);
|
|
};
|
|
var defaultStubCellTemplate = function defaultStubCellTemplate(props) {
|
|
return React.createElement(TableStubCell, props);
|
|
};
|
|
var defaultNoDataCellTemplate = function defaultNoDataCellTemplate(props) {
|
|
return React.createElement(TableNoDataCell, props);
|
|
};
|
|
|
|
var defaultMessages$2 = {
|
|
noData: 'No data'
|
|
};
|
|
|
|
var TableView$1 = function (_React$PureComponent) {
|
|
inherits(TableView$$1, _React$PureComponent);
|
|
|
|
function TableView$$1() {
|
|
classCallCheck(this, TableView$$1);
|
|
return possibleConstructorReturn(this, (TableView$$1.__proto__ || Object.getPrototypeOf(TableView$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableView$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
tableCellTemplate = _props.tableCellTemplate,
|
|
tableRowTemplate = _props.tableRowTemplate,
|
|
tableNoDataRowTemplate = _props.tableNoDataRowTemplate,
|
|
tableStubCellTemplate = _props.tableStubCellTemplate,
|
|
tableStubHeaderCellTemplate = _props.tableStubHeaderCellTemplate,
|
|
tableNoDataCellTemplate = _props.tableNoDataCellTemplate,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['tableCellTemplate', 'tableRowTemplate', 'tableNoDataRowTemplate', 'tableStubCellTemplate', 'tableStubHeaderCellTemplate', 'tableNoDataCellTemplate', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableView, _extends({
|
|
tableLayoutTemplate: tableLayoutTemplate,
|
|
tableRowTemplate: dxReactCore.combineTemplates(tableRowTemplate, defaultRowTemplate),
|
|
tableNoDataRowTemplate: dxReactCore.combineTemplates(tableNoDataRowTemplate, defaultNoDataRowTemplate),
|
|
tableCellTemplate: dxReactCore.combineTemplates(tableCellTemplate, defaultCellTemplate$1),
|
|
tableStubCellTemplate: dxReactCore.combineTemplates(tableStubCellTemplate, defaultStubCellTemplate),
|
|
tableStubHeaderCellTemplate: dxReactCore.combineTemplates(tableStubHeaderCellTemplate, defaultStubCellTemplate),
|
|
tableNoDataCellTemplate: dxReactCore.combineTemplates(tableNoDataCellTemplate, defaultNoDataCellTemplate),
|
|
messages: _extends({}, defaultMessages$2, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableView$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableView$1.propTypes = {
|
|
tableCellTemplate: PropTypes.func,
|
|
tableRowTemplate: PropTypes.func,
|
|
tableNoDataRowTemplate: PropTypes.func,
|
|
tableStubCellTemplate: PropTypes.func,
|
|
tableStubHeaderCellTemplate: PropTypes.func,
|
|
tableNoDataCellTemplate: PropTypes.func,
|
|
messages: PropTypes.shape({
|
|
noData: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableView$1.defaultProps = {
|
|
tableCellTemplate: undefined,
|
|
tableRowTemplate: undefined,
|
|
tableNoDataRowTemplate: undefined,
|
|
tableStubCellTemplate: undefined,
|
|
tableStubHeaderCellTemplate: undefined,
|
|
tableNoDataCellTemplate: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var MINIMAL_COLUMN_WIDTH$1 = 120;
|
|
|
|
var containerTemplate$3 = function containerTemplate(props) {
|
|
return React.createElement(TableContainer, props);
|
|
};
|
|
var headTableTemplate = function headTableTemplate(props) {
|
|
return React.createElement(Table$2, _extends({ use: 'head' }, props));
|
|
};
|
|
var tableTemplate$1 = function tableTemplate(props) {
|
|
return React.createElement(Table$2, props);
|
|
};
|
|
var headTemplate$1 = function headTemplate(props) {
|
|
return React.createElement(materialUi.TableHead, props);
|
|
};
|
|
var bodyTemplate$1 = function bodyTemplate(props) {
|
|
return React.createElement(materialUi.TableBody, props);
|
|
};
|
|
|
|
var VirtualTableLayout$1 = function VirtualTableLayout$$1(_ref) {
|
|
var headerRows = _ref.headerRows,
|
|
bodyRows = _ref.bodyRows,
|
|
columns = _ref.columns,
|
|
cellTemplate = _ref.cellTemplate,
|
|
rowTemplate = _ref.rowTemplate,
|
|
height = _ref.height,
|
|
estimatedRowHeight = _ref.estimatedRowHeight;
|
|
return React.createElement(dxReactGrid.TableLayout, {
|
|
layoutComponent: dxReactGrid.VirtualTableLayout,
|
|
headerRows: headerRows,
|
|
rows: bodyRows,
|
|
columns: columns,
|
|
cellTemplate: cellTemplate,
|
|
rowTemplate: rowTemplate,
|
|
bodyTemplate: bodyTemplate$1,
|
|
headTemplate: headTemplate$1,
|
|
tableTemplate: tableTemplate$1,
|
|
headTableTemplate: headTableTemplate,
|
|
containerTemplate: containerTemplate$3,
|
|
estimatedRowHeight: estimatedRowHeight,
|
|
minColumnWidth: MINIMAL_COLUMN_WIDTH$1,
|
|
height: height
|
|
});
|
|
};
|
|
|
|
VirtualTableLayout$1.propTypes = {
|
|
headerRows: PropTypes.array.isRequired,
|
|
bodyRows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
cellTemplate: PropTypes.func.isRequired,
|
|
rowTemplate: PropTypes.func.isRequired,
|
|
height: PropTypes.number.isRequired,
|
|
estimatedRowHeight: PropTypes.number.isRequired
|
|
};
|
|
|
|
var _tableLayoutTemplate = function _tableLayoutTemplate(props) {
|
|
return React.createElement(VirtualTableLayout$1, props);
|
|
};
|
|
var defaultRowTemplate$1 = function defaultRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
var defaultNoDataRowTemplate$1 = function defaultNoDataRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
var defaultCellTemplate$2 = function defaultCellTemplate(props) {
|
|
return React.createElement(TableCell$2, props);
|
|
};
|
|
var defaultStubCellTemplate$1 = function defaultStubCellTemplate(props) {
|
|
return React.createElement(TableStubCell, props);
|
|
};
|
|
var defaultNoDataCellTemplate$1 = function defaultNoDataCellTemplate(props) {
|
|
return React.createElement(TableNoDataCell, props);
|
|
};
|
|
|
|
var defaultMessages$3 = {
|
|
noData: 'No data'
|
|
};
|
|
|
|
var VirtualTableView = function (_React$PureComponent) {
|
|
inherits(VirtualTableView, _React$PureComponent);
|
|
|
|
function VirtualTableView() {
|
|
classCallCheck(this, VirtualTableView);
|
|
return possibleConstructorReturn(this, (VirtualTableView.__proto__ || Object.getPrototypeOf(VirtualTableView)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(VirtualTableView, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
tableCellTemplate = _props.tableCellTemplate,
|
|
tableRowTemplate = _props.tableRowTemplate,
|
|
tableNoDataRowTemplate = _props.tableNoDataRowTemplate,
|
|
tableStubCellTemplate = _props.tableStubCellTemplate,
|
|
tableStubHeaderCellTemplate = _props.tableStubHeaderCellTemplate,
|
|
tableNoDataCellTemplate = _props.tableNoDataCellTemplate,
|
|
height = _props.height,
|
|
estimatedRowHeight = _props.estimatedRowHeight,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['tableCellTemplate', 'tableRowTemplate', 'tableNoDataRowTemplate', 'tableStubCellTemplate', 'tableStubHeaderCellTemplate', 'tableNoDataCellTemplate', 'height', 'estimatedRowHeight', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableView, _extends({
|
|
tableLayoutTemplate: function tableLayoutTemplate(props) {
|
|
return _tableLayoutTemplate(_extends({}, props, {
|
|
height: height,
|
|
estimatedRowHeight: estimatedRowHeight
|
|
}));
|
|
},
|
|
tableRowTemplate: dxReactCore.combineTemplates(tableRowTemplate, defaultRowTemplate$1),
|
|
tableNoDataRowTemplate: dxReactCore.combineTemplates(tableNoDataRowTemplate, defaultNoDataRowTemplate$1),
|
|
tableCellTemplate: dxReactCore.combineTemplates(tableCellTemplate, defaultCellTemplate$2),
|
|
tableStubCellTemplate: dxReactCore.combineTemplates(tableStubCellTemplate, defaultStubCellTemplate$1),
|
|
tableStubHeaderCellTemplate: dxReactCore.combineTemplates(tableStubHeaderCellTemplate, defaultStubCellTemplate$1),
|
|
tableNoDataCellTemplate: dxReactCore.combineTemplates(tableNoDataCellTemplate, defaultNoDataCellTemplate$1),
|
|
messages: _extends({}, defaultMessages$3, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return VirtualTableView;
|
|
}(React.PureComponent);
|
|
|
|
VirtualTableView.propTypes = {
|
|
tableCellTemplate: PropTypes.func,
|
|
tableRowTemplate: PropTypes.func,
|
|
tableNoDataRowTemplate: PropTypes.func,
|
|
tableStubCellTemplate: PropTypes.func,
|
|
tableStubHeaderCellTemplate: PropTypes.func,
|
|
tableNoDataCellTemplate: PropTypes.func,
|
|
estimatedRowHeight: PropTypes.number,
|
|
height: PropTypes.number,
|
|
messages: PropTypes.shape({
|
|
noData: PropTypes.string
|
|
})
|
|
};
|
|
|
|
VirtualTableView.defaultProps = {
|
|
tableCellTemplate: undefined,
|
|
tableRowTemplate: undefined,
|
|
tableNoDataRowTemplate: undefined,
|
|
tableStubCellTemplate: undefined,
|
|
tableStubHeaderCellTemplate: undefined,
|
|
tableNoDataCellTemplate: undefined,
|
|
estimatedRowHeight: 48,
|
|
height: 530,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$18 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
verticalAlign: 'top',
|
|
paddingTop: theme.spacing.unit + 4,
|
|
paddingRight: theme.spacing.unit,
|
|
'& ~ $cell': {
|
|
paddingLeft: theme.spacing.unit
|
|
}
|
|
},
|
|
input: {
|
|
width: '100%'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableFilterCellBase = function TableFilterCellBase(_ref) {
|
|
var style = _ref.style,
|
|
filter = _ref.filter,
|
|
getMessage = _ref.getMessage,
|
|
setFilter = _ref.setFilter,
|
|
classes = _ref.classes,
|
|
children = _ref.children;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
className: classes.cell,
|
|
style: style
|
|
},
|
|
children || React.createElement(materialUi.Input, {
|
|
className: classes.input,
|
|
value: filter ? filter.value : '',
|
|
placeholder: getMessage('filterPlaceholder'),
|
|
onChange: function onChange(e) {
|
|
return setFilter(e.target.value ? { value: e.target.value } : null);
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
TableFilterCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
filter: PropTypes.object,
|
|
setFilter: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableFilterCellBase.defaultProps = {
|
|
style: null,
|
|
filter: null,
|
|
setFilter: function setFilter() {},
|
|
children: undefined
|
|
};
|
|
|
|
var TableFilterCell = styles.withStyles(styles$18, { name: 'TableFilterCell' })(TableFilterCellBase);
|
|
|
|
var defaultFilterCellTemplate = function defaultFilterCellTemplate(props) {
|
|
return React.createElement(TableFilterCell, props);
|
|
};
|
|
var defaultFilterRowTemplate = function defaultFilterRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
|
|
var defaultMessages$4 = {
|
|
filterPlaceholder: 'Filter...'
|
|
};
|
|
|
|
var TableFilterRow$1 = function (_React$PureComponent) {
|
|
inherits(TableFilterRow$$1, _React$PureComponent);
|
|
|
|
function TableFilterRow$$1() {
|
|
classCallCheck(this, TableFilterRow$$1);
|
|
return possibleConstructorReturn(this, (TableFilterRow$$1.__proto__ || Object.getPrototypeOf(TableFilterRow$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableFilterRow$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
filterCellTemplate = _props.filterCellTemplate,
|
|
filterRowTemplate = _props.filterRowTemplate,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['filterCellTemplate', 'filterRowTemplate', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableFilterRow, _extends({
|
|
filterCellTemplate: dxReactCore.combineTemplates(filterCellTemplate, defaultFilterCellTemplate),
|
|
filterRowTemplate: dxReactCore.combineTemplates(filterRowTemplate, defaultFilterRowTemplate),
|
|
messages: _extends({}, defaultMessages$4, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableFilterRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableFilterRow$1.propTypes = {
|
|
filterCellTemplate: PropTypes.func,
|
|
filterRowTemplate: PropTypes.func,
|
|
messages: PropTypes.shape({
|
|
filterPlaceholder: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableFilterRow$1.defaultProps = {
|
|
filterCellTemplate: undefined,
|
|
filterRowTemplate: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$20 = function styles$$1(theme) {
|
|
return {
|
|
groupingControl: {
|
|
cursor: 'pointer',
|
|
paddingLeft: 0,
|
|
height: theme.spacing.unit * 3
|
|
},
|
|
floatLeft: {
|
|
float: 'left',
|
|
textAlign: 'left'
|
|
},
|
|
floatRight: {
|
|
float: 'right',
|
|
textAlign: 'right'
|
|
}
|
|
};
|
|
};
|
|
|
|
var GroupingControlBase = function GroupingControlBase(_ref) {
|
|
var _classNames;
|
|
|
|
var align = _ref.align,
|
|
groupByColumn = _ref.groupByColumn,
|
|
classes = _ref.classes;
|
|
|
|
var invertedAlign = align === 'left' ? 'right' : 'left';
|
|
var groupingControlClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.groupingControl, true), defineProperty(_classNames, classes.floatLeft, invertedAlign === 'left'), defineProperty(_classNames, classes.floatRight, invertedAlign === 'right'), _classNames));
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{
|
|
onClick: function onClick(e) {
|
|
e.stopPropagation();
|
|
groupByColumn(e);
|
|
},
|
|
className: groupingControlClasses
|
|
},
|
|
React.createElement(List$1, null)
|
|
);
|
|
};
|
|
|
|
GroupingControlBase.propTypes = {
|
|
align: PropTypes.string.isRequired,
|
|
groupByColumn: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var GroupingControl = styles.withStyles(styles$20, { name: 'GroupingControl' })(GroupingControlBase);
|
|
|
|
var styles$21 = function styles$$1(theme) {
|
|
return {
|
|
resizeHandle: {
|
|
position: 'absolute',
|
|
userSelect: 'none',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
width: theme.spacing.unit * 2 + 'px',
|
|
top: 0,
|
|
right: '-' + theme.spacing.unit + 'px',
|
|
height: '100%',
|
|
cursor: 'col-resize',
|
|
zIndex: 100
|
|
},
|
|
resizeHandleLine: {
|
|
position: 'absolute',
|
|
backgroundColor: theme.palette.grey[300],
|
|
height: '50%',
|
|
width: '1px',
|
|
top: '25%',
|
|
transition: 'all linear 100ms'
|
|
},
|
|
resizeHandleFirstLine: {
|
|
left: theme.spacing.unit - 3 + 'px'
|
|
},
|
|
resizeHandleSecondLine: {
|
|
left: theme.spacing.unit - 1 + 'px'
|
|
},
|
|
resizeHandleActive: {
|
|
'& $resizeHandleLine': {
|
|
backgroundColor: theme.palette.primary[300]
|
|
}
|
|
},
|
|
'@media (pointer: fine)': {
|
|
resizeHandleLine: {
|
|
opacity: 0
|
|
},
|
|
resizeHandleActive: {
|
|
'& $resizeHandleLine': {
|
|
opacity: 1
|
|
}
|
|
},
|
|
resizeHandle: {
|
|
'&:hover $resizeHandleLine': {
|
|
opacity: 1
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
var ResizingControlBase = function (_React$PureComponent) {
|
|
inherits(ResizingControlBase, _React$PureComponent);
|
|
|
|
function ResizingControlBase(props) {
|
|
classCallCheck(this, ResizingControlBase);
|
|
|
|
var _this = possibleConstructorReturn(this, (ResizingControlBase.__proto__ || Object.getPrototypeOf(ResizingControlBase)).call(this, props));
|
|
|
|
_this.state = {
|
|
resizing: false
|
|
};
|
|
|
|
_this.onResizeStart = function (_ref) {
|
|
var x = _ref.x;
|
|
|
|
_this.resizeStartingX = x;
|
|
_this.setState({ resizing: true });
|
|
};
|
|
_this.onResizeUpdate = function (_ref2) {
|
|
var x = _ref2.x;
|
|
var changeDraftColumnWidth = _this.props.changeDraftColumnWidth;
|
|
|
|
changeDraftColumnWidth({ shift: x - _this.resizeStartingX });
|
|
};
|
|
_this.onResizeEnd = function (_ref3) {
|
|
var x = _ref3.x;
|
|
var changeColumnWidth = _this.props.changeColumnWidth;
|
|
|
|
changeColumnWidth({ shift: x - _this.resizeStartingX });
|
|
_this.setState({ resizing: false });
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(ResizingControlBase, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _classNames, _classNames2, _classNames3;
|
|
|
|
var classes = this.props.classes;
|
|
var resizing = this.state.resizing;
|
|
|
|
|
|
return React.createElement(
|
|
dxReactCore.Draggable,
|
|
{
|
|
onStart: this.onResizeStart,
|
|
onUpdate: this.onResizeUpdate,
|
|
onEnd: this.onResizeEnd
|
|
},
|
|
React.createElement(
|
|
'div',
|
|
{
|
|
className: classNames((_classNames = {}, defineProperty(_classNames, classes.resizeHandle, true), defineProperty(_classNames, classes.resizeHandleActive, resizing), _classNames))
|
|
},
|
|
React.createElement('div', {
|
|
className: classNames((_classNames2 = {}, defineProperty(_classNames2, classes.resizeHandleLine, true), defineProperty(_classNames2, classes.resizeHandleFirstLine, true), _classNames2))
|
|
}),
|
|
React.createElement('div', {
|
|
className: classNames((_classNames3 = {}, defineProperty(_classNames3, classes.resizeHandleLine, true), defineProperty(_classNames3, classes.resizeHandleSecondLine, true), _classNames3))
|
|
})
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
return ResizingControlBase;
|
|
}(React.PureComponent);
|
|
|
|
ResizingControlBase.propTypes = {
|
|
changeColumnWidth: PropTypes.func.isRequired,
|
|
changeDraftColumnWidth: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var ResizingControl = styles.withStyles(styles$21, { name: 'ResizingControl' })(ResizingControlBase);
|
|
|
|
var styles$22 = function styles$$1(theme) {
|
|
return {
|
|
tooltipRoot: {
|
|
display: 'block',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis'
|
|
},
|
|
sortLabelRoot: {
|
|
height: theme.spacing.unit * 3
|
|
},
|
|
sortLabelActive: {
|
|
color: 'inherit'
|
|
}
|
|
};
|
|
};
|
|
|
|
var SortingControlBase = function SortingControlBase(_ref) {
|
|
var align = _ref.align,
|
|
sortingDirection = _ref.sortingDirection,
|
|
columnTitle = _ref.columnTitle,
|
|
onClick = _ref.onClick,
|
|
classes = _ref.classes,
|
|
text = _ref.text;
|
|
return React.createElement(
|
|
materialUi.Tooltip,
|
|
{
|
|
title: text,
|
|
placement: align === 'right' ? 'bottom-end' : 'bottom-start',
|
|
enterDelay: 300,
|
|
classes: {
|
|
root: classes.tooltipRoot
|
|
}
|
|
},
|
|
React.createElement(
|
|
materialUi.TableSortLabel,
|
|
{
|
|
active: !!sortingDirection,
|
|
direction: sortingDirection,
|
|
onClick: onClick,
|
|
classes: {
|
|
root: classes.sortLabelRoot,
|
|
active: classes.sortLabelActive
|
|
}
|
|
},
|
|
columnTitle
|
|
)
|
|
);
|
|
};
|
|
|
|
SortingControlBase.propTypes = {
|
|
align: PropTypes.string.isRequired,
|
|
sortingDirection: PropTypes.oneOf(['asc', 'desc']),
|
|
columnTitle: PropTypes.string.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
text: PropTypes.string
|
|
};
|
|
|
|
SortingControlBase.defaultProps = {
|
|
sortingDirection: null,
|
|
text: 'Sort'
|
|
};
|
|
|
|
var SortingControl = styles.withStyles(styles$22, { name: 'SortingControl' })(SortingControlBase);
|
|
|
|
var ENTER_KEY_CODE$1 = 13;
|
|
var SPACE_KEY_CODE$1 = 32;
|
|
|
|
var styles$19 = function styles$$1(theme) {
|
|
return {
|
|
plainTitle: {
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
height: theme.spacing.unit * 3,
|
|
lineHeight: theme.spacing.unit * 3 + 'px'
|
|
},
|
|
cell: {
|
|
outline: 'none',
|
|
position: 'relative',
|
|
overflow: 'visible',
|
|
paddingRight: theme.spacing.unit,
|
|
'& ~ $cell': {
|
|
paddingLeft: theme.spacing.unit
|
|
}
|
|
},
|
|
cellNoUserSelect: {
|
|
userSelect: 'none',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
width: '100%'
|
|
},
|
|
cellDraggable: {
|
|
cursor: 'pointer'
|
|
},
|
|
cellDimmed: {
|
|
opacity: 0.3
|
|
},
|
|
cellRight: {
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit
|
|
},
|
|
clearPadding: {
|
|
padding: 0
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableHeaderCellBase = function (_React$PureComponent) {
|
|
inherits(TableHeaderCellBase, _React$PureComponent);
|
|
|
|
function TableHeaderCellBase(props) {
|
|
classCallCheck(this, TableHeaderCellBase);
|
|
|
|
var _this = possibleConstructorReturn(this, (TableHeaderCellBase.__proto__ || Object.getPrototypeOf(TableHeaderCellBase)).call(this, props));
|
|
|
|
_this.state = {
|
|
dragging: false
|
|
};
|
|
|
|
_this.onClick = function (e) {
|
|
var changeSortingDirection = _this.props.changeSortingDirection;
|
|
|
|
var isActionKeyDown = e.keyCode === ENTER_KEY_CODE$1 || e.keyCode === SPACE_KEY_CODE$1;
|
|
var isMouseClick = e.keyCode === undefined;
|
|
|
|
var cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
|
|
var cancel = isMouseClick && cancelSortingRelatedKey || isActionKeyDown && cancelSortingRelatedKey;
|
|
|
|
e.preventDefault();
|
|
changeSortingDirection({
|
|
keepOther: e.shiftKey || cancelSortingRelatedKey,
|
|
cancel: cancel
|
|
});
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
createClass(TableHeaderCellBase, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _classNames,
|
|
_this2 = this;
|
|
|
|
var _props = this.props,
|
|
style = _props.style,
|
|
column = _props.column,
|
|
tableColumn = _props.tableColumn,
|
|
allowSorting = _props.allowSorting,
|
|
sortingDirection = _props.sortingDirection,
|
|
allowGroupingByClick = _props.allowGroupingByClick,
|
|
groupByColumn = _props.groupByColumn,
|
|
allowDragging = _props.allowDragging,
|
|
dragPayload = _props.dragPayload,
|
|
allowResizing = _props.allowResizing,
|
|
changeColumnWidth = _props.changeColumnWidth,
|
|
changeDraftColumnWidth = _props.changeDraftColumnWidth,
|
|
classes = _props.classes,
|
|
getMessage = _props.getMessage;
|
|
var dragging = this.state.dragging;
|
|
|
|
var align = column.align || 'left';
|
|
var columnTitle = column.title || column.name;
|
|
var tooltipText = getMessage('sortingHint');
|
|
|
|
var tableCellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRight, align === 'right'), defineProperty(_classNames, classes.cellNoUserSelect, allowDragging || allowSorting), defineProperty(_classNames, classes.cellDraggable, allowDragging), defineProperty(_classNames, classes.cellDimmed, dragging || tableColumn.draft), _classNames));
|
|
var cellLayout = React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
style: style,
|
|
className: tableCellClasses,
|
|
numeric: align === 'right'
|
|
},
|
|
allowGroupingByClick && React.createElement(GroupingControl, {
|
|
align: align,
|
|
groupByColumn: groupByColumn
|
|
}),
|
|
allowSorting ? React.createElement(SortingControl, {
|
|
align: align,
|
|
sortingDirection: sortingDirection,
|
|
columnTitle: columnTitle,
|
|
onClick: this.onClick,
|
|
allowGroupingByClick: allowGroupingByClick,
|
|
text: tooltipText
|
|
}) : React.createElement(
|
|
'div',
|
|
{ className: classes.plainTitle },
|
|
columnTitle
|
|
),
|
|
allowResizing && React.createElement(ResizingControl, {
|
|
changeColumnWidth: changeColumnWidth,
|
|
changeDraftColumnWidth: changeDraftColumnWidth
|
|
})
|
|
);
|
|
|
|
return allowDragging ? React.createElement(
|
|
dxReactCore.DragSource,
|
|
{
|
|
ref: function ref(element) {
|
|
_this2.cellRef = element;
|
|
},
|
|
getPayload: function getPayload() {
|
|
return dragPayload;
|
|
},
|
|
onStart: function onStart() {
|
|
return _this2.setState({ dragging: true });
|
|
},
|
|
onEnd: function onEnd() {
|
|
return _this2.cellRef && _this2.setState({ dragging: false });
|
|
}
|
|
},
|
|
cellLayout
|
|
) : cellLayout;
|
|
}
|
|
}]);
|
|
return TableHeaderCellBase;
|
|
}(React.PureComponent);
|
|
|
|
TableHeaderCellBase.propTypes = {
|
|
tableColumn: PropTypes.object,
|
|
column: PropTypes.shape({
|
|
title: PropTypes.string
|
|
}).isRequired,
|
|
style: PropTypes.object,
|
|
allowSorting: PropTypes.bool,
|
|
sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
|
|
changeSortingDirection: PropTypes.func,
|
|
allowGroupingByClick: PropTypes.bool,
|
|
groupByColumn: PropTypes.func,
|
|
allowDragging: PropTypes.bool,
|
|
dragPayload: PropTypes.any,
|
|
allowResizing: PropTypes.bool,
|
|
changeColumnWidth: PropTypes.func,
|
|
changeDraftColumnWidth: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
TableHeaderCellBase.defaultProps = {
|
|
tableColumn: {},
|
|
style: null,
|
|
allowSorting: false,
|
|
sortingDirection: undefined,
|
|
changeSortingDirection: undefined,
|
|
allowGroupingByClick: false,
|
|
groupByColumn: undefined,
|
|
allowDragging: false,
|
|
dragPayload: null,
|
|
allowResizing: false,
|
|
changeColumnWidth: undefined,
|
|
changeDraftColumnWidth: undefined
|
|
};
|
|
|
|
var TableHeaderCell = styles.withStyles(styles$19, { name: 'TableHeaderCell' })(TableHeaderCellBase);
|
|
|
|
var defaultHeaderCellTemplate = function defaultHeaderCellTemplate(props) {
|
|
return React.createElement(TableHeaderCell, props);
|
|
};
|
|
var defaultHeaderRowTemplate = function defaultHeaderRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
var defaultMessages$5 = {
|
|
sortingHint: 'Sort'
|
|
};
|
|
|
|
var TableHeaderRow$1 = function (_React$PureComponent) {
|
|
inherits(TableHeaderRow$$1, _React$PureComponent);
|
|
|
|
function TableHeaderRow$$1() {
|
|
classCallCheck(this, TableHeaderRow$$1);
|
|
return possibleConstructorReturn(this, (TableHeaderRow$$1.__proto__ || Object.getPrototypeOf(TableHeaderRow$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableHeaderRow$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
headerCellTemplate = _props.headerCellTemplate,
|
|
headerRowTemplate = _props.headerRowTemplate,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['headerCellTemplate', 'headerRowTemplate', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableHeaderRow, _extends({
|
|
headerCellTemplate: dxReactCore.combineTemplates(headerCellTemplate, defaultHeaderCellTemplate),
|
|
headerRowTemplate: dxReactCore.combineTemplates(headerRowTemplate, defaultHeaderRowTemplate),
|
|
messages: _extends({}, defaultMessages$5, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableHeaderRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableHeaderRow$1.propTypes = {
|
|
headerCellTemplate: PropTypes.func,
|
|
headerRowTemplate: PropTypes.func,
|
|
messages: PropTypes.shape({
|
|
sortingHint: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableHeaderRow$1.defaultProps = {
|
|
headerCellTemplate: undefined,
|
|
headerRowTemplate: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$23 = function styles$$1(theme) {
|
|
return {
|
|
button: {
|
|
padding: theme.spacing.unit,
|
|
minWidth: 40
|
|
},
|
|
headingCell: {
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
paddingLeft: theme.spacing.unit * 3,
|
|
paddingRight: 0
|
|
},
|
|
cell: {
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
paddingLeft: theme.spacing.unit * 3,
|
|
paddingRight: 0
|
|
}
|
|
};
|
|
};
|
|
|
|
var withEditColumnStyles = styles.withStyles(styles$23, { name: 'EditColumn' });
|
|
|
|
var CommandButtonBase = function CommandButtonBase(_ref) {
|
|
var executeCommand = _ref.executeCommand,
|
|
text = _ref.text,
|
|
classes = _ref.classes;
|
|
return React.createElement(
|
|
materialUi.Button,
|
|
{
|
|
color: 'primary',
|
|
className: classes.button,
|
|
onClick: function onClick(e) {
|
|
executeCommand();
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
text
|
|
);
|
|
};
|
|
CommandButtonBase.propTypes = {
|
|
executeCommand: PropTypes.func.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var CommandButton = withEditColumnStyles(CommandButtonBase);
|
|
|
|
var EditCommandHeadingCellBase = function EditCommandHeadingCellBase(_ref2) {
|
|
var addRow = _ref2.addRow,
|
|
commandTemplate = _ref2.commandTemplate,
|
|
allowAdding = _ref2.allowAdding,
|
|
_ref2$style = _ref2.style,
|
|
style = _ref2$style === undefined ? {} : _ref2$style,
|
|
getMessage = _ref2.getMessage,
|
|
classes = _ref2.classes;
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
className: classes.headingCell,
|
|
style: style
|
|
},
|
|
allowAdding && commandTemplate({
|
|
id: 'add',
|
|
executeCommand: addRow,
|
|
text: getMessage('addCommand')
|
|
})
|
|
);
|
|
};
|
|
EditCommandHeadingCellBase.propTypes = {
|
|
addRow: PropTypes.func,
|
|
allowAdding: PropTypes.bool,
|
|
style: PropTypes.object,
|
|
commandTemplate: PropTypes.func.isRequired,
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
EditCommandHeadingCellBase.defaultProps = {
|
|
addRow: function addRow() {},
|
|
allowAdding: false,
|
|
style: undefined
|
|
};
|
|
|
|
var EditCommandHeadingCell = withEditColumnStyles(EditCommandHeadingCellBase);
|
|
|
|
var EditCommandCellBase = function EditCommandCellBase(_ref3) {
|
|
var startEditing = _ref3.startEditing,
|
|
deleteRow = _ref3.deleteRow,
|
|
cancelEditing = _ref3.cancelEditing,
|
|
commitChanges = _ref3.commitChanges,
|
|
isEditing = _ref3.isEditing,
|
|
commandTemplate = _ref3.commandTemplate,
|
|
allowEditing = _ref3.allowEditing,
|
|
allowDeleting = _ref3.allowDeleting,
|
|
_ref3$style = _ref3.style,
|
|
style = _ref3$style === undefined ? {} : _ref3$style,
|
|
classes = _ref3.classes,
|
|
getMessage = _ref3.getMessage;
|
|
|
|
var commands = [];
|
|
if (!isEditing) {
|
|
if (allowEditing) {
|
|
commands.push({
|
|
id: 'edit',
|
|
executeCommand: startEditing,
|
|
text: getMessage('editCommand')
|
|
});
|
|
}
|
|
if (allowDeleting) {
|
|
commands.push({
|
|
id: 'delete',
|
|
executeCommand: deleteRow,
|
|
text: getMessage('deleteCommand')
|
|
});
|
|
}
|
|
} else {
|
|
commands = [{
|
|
id: 'commit',
|
|
executeCommand: commitChanges,
|
|
text: getMessage('commitCommand')
|
|
}, {
|
|
id: 'cancel',
|
|
executeCommand: cancelEditing,
|
|
text: getMessage('cancelCommand')
|
|
}];
|
|
}
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
className: classes.cell,
|
|
style: style
|
|
},
|
|
commands.map(function (command) {
|
|
return React.createElement(
|
|
'span',
|
|
{ key: command.id },
|
|
commandTemplate(command)
|
|
);
|
|
})
|
|
);
|
|
};
|
|
EditCommandCellBase.propTypes = {
|
|
startEditing: PropTypes.func,
|
|
deleteRow: PropTypes.func,
|
|
cancelEditing: PropTypes.func,
|
|
commitChanges: PropTypes.func,
|
|
isEditing: PropTypes.bool,
|
|
allowEditing: PropTypes.bool,
|
|
allowDeleting: PropTypes.bool,
|
|
commandTemplate: PropTypes.func,
|
|
style: PropTypes.object,
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
EditCommandCellBase.defaultProps = {
|
|
startEditing: function startEditing() {},
|
|
deleteRow: function deleteRow() {},
|
|
cancelEditing: function cancelEditing() {},
|
|
commitChanges: function commitChanges() {},
|
|
isEditing: false,
|
|
allowEditing: false,
|
|
allowDeleting: false,
|
|
commandTemplate: PropTypes.func,
|
|
style: undefined
|
|
};
|
|
|
|
var EditCommandCell = withEditColumnStyles(EditCommandCellBase);
|
|
|
|
var defaultCellTemplate$3 = function defaultCellTemplate(props) {
|
|
return React.createElement(EditCommandCell, props);
|
|
};
|
|
var defaultHeadingCellTemplate = function defaultHeadingCellTemplate(props) {
|
|
return React.createElement(EditCommandHeadingCell, props);
|
|
};
|
|
var defaultCommandTemplate = function defaultCommandTemplate(props) {
|
|
return React.createElement(CommandButton, props);
|
|
};
|
|
|
|
var defaultMessages$6 = {
|
|
addCommand: 'New',
|
|
editCommand: 'Edit',
|
|
deleteCommand: 'Delete',
|
|
commitCommand: 'Save',
|
|
cancelCommand: 'Cancel'
|
|
};
|
|
|
|
var TableEditColumn$1 = function (_React$PureComponent) {
|
|
inherits(TableEditColumn$$1, _React$PureComponent);
|
|
|
|
function TableEditColumn$$1() {
|
|
classCallCheck(this, TableEditColumn$$1);
|
|
return possibleConstructorReturn(this, (TableEditColumn$$1.__proto__ || Object.getPrototypeOf(TableEditColumn$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableEditColumn$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
cellTemplate = _props.cellTemplate,
|
|
headingCellTemplate = _props.headingCellTemplate,
|
|
commandTemplate = _props.commandTemplate,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['cellTemplate', 'headingCellTemplate', 'commandTemplate', 'messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableEditColumn, _extends({
|
|
cellTemplate: dxReactCore.combineTemplates(cellTemplate, defaultCellTemplate$3),
|
|
headingCellTemplate: dxReactCore.combineTemplates(headingCellTemplate, defaultHeadingCellTemplate),
|
|
commandTemplate: dxReactCore.combineTemplates(commandTemplate, defaultCommandTemplate),
|
|
messages: _extends({}, defaultMessages$6, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableEditColumn$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableEditColumn$1.propTypes = {
|
|
cellTemplate: PropTypes.func,
|
|
headingCellTemplate: PropTypes.func,
|
|
commandTemplate: PropTypes.func,
|
|
messages: PropTypes.shape({
|
|
addCommand: PropTypes.string,
|
|
editCommand: PropTypes.string,
|
|
deleteCommand: PropTypes.string,
|
|
commitCommand: PropTypes.string,
|
|
cancelCommand: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableEditColumn$1.defaultProps = {
|
|
cellTemplate: undefined,
|
|
headingCellTemplate: undefined,
|
|
commandTemplate: undefined,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$24 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
verticalAlign: 'top',
|
|
paddingTop: theme.spacing.unit + 2,
|
|
paddingRight: theme.spacing.unit,
|
|
'& ~ $cell': {
|
|
paddingLeft: theme.spacing.unit
|
|
}
|
|
},
|
|
inputRoot: {
|
|
width: '100%'
|
|
},
|
|
inputRight: {
|
|
textAlign: 'right'
|
|
}
|
|
};
|
|
};
|
|
|
|
var EditCellBase = function EditCellBase(_ref) {
|
|
var column = _ref.column,
|
|
value = _ref.value,
|
|
onValueChange = _ref.onValueChange,
|
|
style = _ref.style,
|
|
classes = _ref.classes,
|
|
children = _ref.children;
|
|
|
|
var inputClasses = classNames(defineProperty({}, classes.inputRight, column.align === 'right'));
|
|
|
|
return React.createElement(
|
|
materialUi.TableCell,
|
|
{
|
|
className: classes.cell,
|
|
style: style
|
|
},
|
|
children || React.createElement(materialUi.Input, {
|
|
className: classes.inputRoot,
|
|
classes: { input: inputClasses },
|
|
value: value || '',
|
|
onChange: function onChange(e) {
|
|
return onValueChange(e.target.value);
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
EditCellBase.propTypes = {
|
|
column: PropTypes.object,
|
|
value: PropTypes.any,
|
|
onValueChange: PropTypes.func.isRequired,
|
|
style: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
|
|
};
|
|
|
|
EditCellBase.defaultProps = {
|
|
column: {},
|
|
value: '',
|
|
style: {},
|
|
children: undefined
|
|
};
|
|
|
|
var EditCell = styles.withStyles(styles$24, { name: 'EditCell' })(EditCellBase);
|
|
|
|
var defaultEditCellTemplate = function defaultEditCellTemplate(props) {
|
|
return React.createElement(EditCell, props);
|
|
};
|
|
var defaultEditRowTemplate = function defaultEditRowTemplate(props) {
|
|
return React.createElement(TableRow$1, props);
|
|
};
|
|
|
|
var TableEditRow$1 = function (_React$PureComponent) {
|
|
inherits(TableEditRow$$1, _React$PureComponent);
|
|
|
|
function TableEditRow$$1() {
|
|
classCallCheck(this, TableEditRow$$1);
|
|
return possibleConstructorReturn(this, (TableEditRow$$1.__proto__ || Object.getPrototypeOf(TableEditRow$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableEditRow$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
editCellTemplate = _props.editCellTemplate,
|
|
editRowTemplate = _props.editRowTemplate,
|
|
restProps = objectWithoutProperties(_props, ['editCellTemplate', 'editRowTemplate']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableEditRow, _extends({
|
|
editCellTemplate: dxReactCore.combineTemplates(editCellTemplate, defaultEditCellTemplate),
|
|
editRowTemplate: dxReactCore.combineTemplates(editRowTemplate, defaultEditRowTemplate)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableEditRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableEditRow$1.propTypes = {
|
|
editCellTemplate: PropTypes.func,
|
|
editRowTemplate: PropTypes.func
|
|
};
|
|
|
|
TableEditRow$1.defaultProps = {
|
|
editCellTemplate: undefined,
|
|
editRowTemplate: undefined
|
|
};
|
|
|
|
var EmptyMessage = function EmptyMessage(_ref) {
|
|
var getMessage = _ref.getMessage;
|
|
return React.createElement(
|
|
Toolbar,
|
|
null,
|
|
React.createElement(
|
|
Typography$1,
|
|
null,
|
|
getMessage('noColumns')
|
|
)
|
|
);
|
|
};
|
|
|
|
EmptyMessage.propTypes = {
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var emptyMessageTemplate = function emptyMessageTemplate(props) {
|
|
return React.createElement(EmptyMessage, props);
|
|
};
|
|
|
|
var defaultMessages$7 = {
|
|
noColumns: 'Nothing to show'
|
|
};
|
|
|
|
var TableColumnVisibility$1 = function (_React$PureComponent) {
|
|
inherits(TableColumnVisibility$$1, _React$PureComponent);
|
|
|
|
function TableColumnVisibility$$1() {
|
|
classCallCheck(this, TableColumnVisibility$$1);
|
|
return possibleConstructorReturn(this, (TableColumnVisibility$$1.__proto__ || Object.getPrototypeOf(TableColumnVisibility$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableColumnVisibility$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(dxReactGrid.TableColumnVisibility, _extends({
|
|
emptyMessageTemplate: emptyMessageTemplate,
|
|
messages: _extends({}, defaultMessages$7, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableColumnVisibility$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnVisibility$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
noColumns: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableColumnVisibility$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var TableReorderingCell = function TableReorderingCell(_ref) {
|
|
var style = _ref.style,
|
|
getCellDimensions = _ref.getCellDimensions;
|
|
|
|
var refHandler = function refHandler(node) {
|
|
return node && getCellDimensions(function () {
|
|
var _node$getBoundingClie = node.getBoundingClientRect(),
|
|
left = _node$getBoundingClie.left,
|
|
right = _node$getBoundingClie.right;
|
|
|
|
return { left: left, right: right };
|
|
});
|
|
};
|
|
return React.createElement('td', {
|
|
ref: refHandler,
|
|
style: _extends({}, style, { padding: 0 })
|
|
});
|
|
};
|
|
|
|
TableReorderingCell.propTypes = {
|
|
getCellDimensions: PropTypes.func.isRequired,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
TableReorderingCell.defaultProps = {
|
|
style: {}
|
|
};
|
|
|
|
var tableContainerTemplate = function tableContainerTemplate(_ref) {
|
|
var onOver = _ref.onOver,
|
|
onLeave = _ref.onLeave,
|
|
onDrop = _ref.onDrop,
|
|
children = _ref.children;
|
|
return React.createElement(
|
|
dxReactCore.DropTarget,
|
|
{
|
|
onOver: onOver,
|
|
onLeave: onLeave,
|
|
onDrop: onDrop
|
|
},
|
|
children
|
|
);
|
|
};
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
var reorderingRowTemplate = function reorderingRowTemplate(_ref2) {
|
|
var style = _ref2.style,
|
|
restParams = objectWithoutProperties(_ref2, ['style']);
|
|
return React.createElement(TableRow$1, _extends({
|
|
style: _extends({}, style, {
|
|
visibility: 'hidden'
|
|
})
|
|
}, restParams));
|
|
};
|
|
var reorderingCellTemplate = function reorderingCellTemplate(params) {
|
|
return React.createElement(TableReorderingCell, params);
|
|
};
|
|
|
|
var TableColumnReordering$1 = function TableColumnReordering$$1(props) {
|
|
return React.createElement(dxReactGrid.TableColumnReordering, _extends({
|
|
tableContainerTemplate: tableContainerTemplate,
|
|
reorderingRowTemplate: reorderingRowTemplate,
|
|
reorderingCellTemplate: reorderingCellTemplate
|
|
}, props));
|
|
};
|
|
|
|
var TableColumnResizing$1 = function (_React$PureComponent) {
|
|
inherits(TableColumnResizing$$1, _React$PureComponent);
|
|
|
|
function TableColumnResizing$$1() {
|
|
classCallCheck(this, TableColumnResizing$$1);
|
|
return possibleConstructorReturn(this, (TableColumnResizing$$1.__proto__ || Object.getPrototypeOf(TableColumnResizing$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TableColumnResizing$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(dxReactGrid.TableColumnResizing, this.props);
|
|
}
|
|
}]);
|
|
return TableColumnResizing$$1;
|
|
}(React.PureComponent);
|
|
|
|
exports.Grid = Grid$1;
|
|
exports.ColumnChooser = ColumnChooser$1;
|
|
exports.DragDropContext = DragDropContext$1;
|
|
exports.PagingPanel = PagingPanel$1;
|
|
exports.GroupingPanel = GroupingPanel$1;
|
|
exports.TableRowDetail = TableRowDetail$1;
|
|
exports.TableGroupRow = TableGroupRow$1;
|
|
exports.TableSelection = TableSelection$1;
|
|
exports.TableView = TableView$1;
|
|
exports.VirtualTableView = VirtualTableView;
|
|
exports.TableFilterRow = TableFilterRow$1;
|
|
exports.TableHeaderRow = TableHeaderRow$1;
|
|
exports.TableEditColumn = TableEditColumn$1;
|
|
exports.TableEditRow = TableEditRow$1;
|
|
exports.TableColumnVisibility = TableColumnVisibility$1;
|
|
exports.TableColumnReordering = TableColumnReordering$1;
|
|
exports.TableColumnResizing = TableColumnResizing$1;
|
|
//# sourceMappingURL=dx-react-grid-material-ui.cjs.js.map
|