3199 lines
87 KiB
JavaScript
3199 lines
87 KiB
JavaScript
/**
|
|
* Bundle of @devexpress/dx-react-grid-material-ui
|
|
* Generated: 2018-03-02
|
|
* Version: 1.0.3
|
|
* License: https://js.devexpress.com/Licensing
|
|
*/
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ColumnChooser, DragDropProvider, Grid, GroupPanelLayout, GroupingPanel, PagingPanel, StaticTableLayout, Table, TableColumnReordering, TableColumnResizing, TableColumnVisibility, TableEditColumn, TableEditRow, TableFilterRow, TableGroupRow, TableHeaderRow, TableLayout, TableRowDetail, TableSelection, Toolbar, VirtualTableLayout } from '@devexpress/dx-react-grid';
|
|
import Popover from 'material-ui/Popover';
|
|
import List, { ListItem, ListItemText } from 'material-ui/List';
|
|
import IconButton from 'material-ui/IconButton';
|
|
import Tooltip from 'material-ui/Tooltip';
|
|
import VisibilityOff from 'material-ui-icons/VisibilityOff';
|
|
import Checkbox from 'material-ui/Checkbox';
|
|
import classNames from 'classnames';
|
|
import Paper from 'material-ui/Paper';
|
|
import Typography from 'material-ui/Typography';
|
|
import { withStyles } from 'material-ui/styles';
|
|
import Input from 'material-ui/Input';
|
|
import { MenuItem } from 'material-ui/Menu';
|
|
import Select from 'material-ui/Select';
|
|
import Button from 'material-ui/Button';
|
|
import ChevronLeft from 'material-ui-icons/ChevronLeft';
|
|
import ChevronRight from 'material-ui-icons/ChevronRight';
|
|
import { firstRowOnPage, lastRowOnPage } from '@devexpress/dx-grid-core';
|
|
import { darken, fade, lighten } from 'material-ui/styles/colorManipulator';
|
|
import TableMUI, { TableBody, TableCell, TableHead, TableRow, TableSortLabel } from 'material-ui/Table';
|
|
import Chip from 'material-ui/Chip';
|
|
import ExpandMore from 'material-ui-icons/ExpandMore';
|
|
import { DragSource, Draggable, DropTarget, createRenderComponent } from '@devexpress/dx-react-core';
|
|
import List$1 from 'material-ui-icons/List';
|
|
import Toolbar$1 from 'material-ui/Toolbar';
|
|
|
|
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 Root = function Root(_ref) {
|
|
var children = _ref.children,
|
|
restProps = objectWithoutProperties(_ref, ['children']);
|
|
return React.createElement(
|
|
'div',
|
|
restProps,
|
|
children
|
|
);
|
|
};
|
|
|
|
Root.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
|
|
};
|
|
|
|
Root.defaultProps = {
|
|
children: undefined
|
|
};
|
|
|
|
var Grid$1 = function Grid$$1(_ref) {
|
|
var children = _ref.children,
|
|
props = objectWithoutProperties(_ref, ['children']);
|
|
return React.createElement(
|
|
Grid,
|
|
_extends({
|
|
rootComponent: Root
|
|
}, props),
|
|
children
|
|
);
|
|
};
|
|
|
|
Grid$1.Root = Root;
|
|
|
|
Grid$1.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
|
};
|
|
|
|
var Overlay = function Overlay(_ref) {
|
|
var visible = _ref.visible,
|
|
onHide = _ref.onHide,
|
|
children = _ref.children,
|
|
target = _ref.target,
|
|
restProps = objectWithoutProperties(_ref, ['visible', 'onHide', 'children', 'target']);
|
|
return React.createElement(
|
|
Popover,
|
|
_extends({
|
|
open: visible,
|
|
anchorEl: target,
|
|
onClose: onHide,
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
transformOrigin: { vertical: 'top', horizontal: 'right' }
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
Overlay.propTypes = {
|
|
onHide: PropTypes.func.isRequired,
|
|
children: PropTypes.node.isRequired,
|
|
visible: PropTypes.bool,
|
|
target: PropTypes.object
|
|
};
|
|
|
|
Overlay.defaultProps = {
|
|
visible: false,
|
|
target: null
|
|
};
|
|
|
|
var Container = function Container(_ref) {
|
|
var children = _ref.children,
|
|
restProps = objectWithoutProperties(_ref, ['children']);
|
|
return React.createElement(
|
|
List,
|
|
_extends({
|
|
dense: true
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
Container.propTypes = {
|
|
children: PropTypes.array.isRequired
|
|
};
|
|
|
|
var ToggleButton = function ToggleButton(_ref) {
|
|
var onToggle = _ref.onToggle,
|
|
getMessage = _ref.getMessage,
|
|
buttonRef = _ref.buttonRef,
|
|
restProps = objectWithoutProperties(_ref, ['onToggle', 'getMessage', 'buttonRef']);
|
|
return React.createElement(
|
|
Tooltip,
|
|
_extends({
|
|
title: getMessage('showColumnChooser'),
|
|
placement: 'bottom',
|
|
enterDelay: 300
|
|
}, restProps),
|
|
React.createElement(
|
|
IconButton,
|
|
{
|
|
onClick: onToggle,
|
|
buttonRef: buttonRef
|
|
},
|
|
React.createElement(VisibilityOff, null)
|
|
)
|
|
);
|
|
};
|
|
|
|
ToggleButton.propTypes = {
|
|
onToggle: PropTypes.func.isRequired,
|
|
getMessage: PropTypes.func.isRequired,
|
|
buttonRef: PropTypes.func.isRequired
|
|
};
|
|
|
|
var Item = function Item(_ref) {
|
|
var _ref$item = _ref.item,
|
|
column = _ref$item.column,
|
|
hidden = _ref$item.hidden,
|
|
onToggle = _ref.onToggle,
|
|
restProps = objectWithoutProperties(_ref, ['item', 'onToggle']);
|
|
return React.createElement(
|
|
ListItem,
|
|
_extends({
|
|
key: column.name,
|
|
button: true,
|
|
onClick: onToggle
|
|
}, restProps),
|
|
React.createElement(Checkbox, {
|
|
checked: !hidden,
|
|
tabIndex: -1,
|
|
disableRipple: true,
|
|
style: { width: 'auto', height: 'auto' }
|
|
}),
|
|
React.createElement(ListItemText, { primary: column.title || column.name })
|
|
);
|
|
};
|
|
|
|
Item.propTypes = {
|
|
item: PropTypes.shape({
|
|
column: PropTypes.shape({
|
|
name: PropTypes.string
|
|
}),
|
|
hidden: PropTypes.bool
|
|
}).isRequired,
|
|
onToggle: PropTypes.func
|
|
};
|
|
|
|
Item.defaultProps = {
|
|
onToggle: function onToggle() {}
|
|
};
|
|
|
|
var defaultMessages = {
|
|
showColumnChooser: 'Show Column Chooser'
|
|
};
|
|
var ColumnChooser$1 = function (_React$PureComponent) {
|
|
inherits(ColumnChooser$$1, _React$PureComponent);
|
|
|
|
function ColumnChooser$$1() {
|
|
classCallCheck(this, ColumnChooser$$1);
|
|
return possibleConstructorReturn(this, (ColumnChooser$$1.__proto__ || Object.getPrototypeOf(ColumnChooser$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(ColumnChooser$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
return React.createElement(ColumnChooser, _extends({
|
|
overlayComponent: Overlay,
|
|
containerComponent: Container,
|
|
toggleButtonComponent: ToggleButton,
|
|
itemComponent: Item,
|
|
messages: _extends({}, defaultMessages, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return ColumnChooser$$1;
|
|
}(React.PureComponent);
|
|
|
|
ColumnChooser$1.Container = Container;
|
|
ColumnChooser$1.Button = ToggleButton;
|
|
ColumnChooser$1.Item = Item;
|
|
ColumnChooser$1.Overlay = Overlay;
|
|
|
|
ColumnChooser$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
hiddenColumnNames: PropTypes.string
|
|
})
|
|
};
|
|
|
|
ColumnChooser$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var styles$1 = 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,
|
|
classes = _ref.classes,
|
|
style = _ref.style,
|
|
className = _ref.className,
|
|
children = _ref.children,
|
|
restProps = objectWithoutProperties(_ref, ['clientOffset', 'classes', 'style', 'className', 'children']);
|
|
return React.createElement(
|
|
Paper,
|
|
_extends({
|
|
className: classNames(classes.container, className),
|
|
style: _extends({
|
|
transform: 'translate(calc(' + clientOffset.x + 'px - 50%), calc(' + clientOffset.y + 'px - 50%))'
|
|
}, style)
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
ContainerBase.propTypes = {
|
|
clientOffset: PropTypes.shape({
|
|
x: PropTypes.number.isRequired,
|
|
y: PropTypes.number.isRequired
|
|
}).isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
classes: PropTypes.object.isRequired,
|
|
style: PropTypes.object,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
ContainerBase.defaultProps = {
|
|
style: {},
|
|
className: undefined,
|
|
children: undefined
|
|
};
|
|
|
|
var Container$1 = withStyles(styles$1, { name: 'DragDrop' })(ContainerBase);
|
|
|
|
var ColumnBase = function ColumnBase(_ref2) {
|
|
var column = _ref2.column,
|
|
classes = _ref2.classes,
|
|
className = _ref2.className,
|
|
restProps = objectWithoutProperties(_ref2, ['column', 'classes', 'className']);
|
|
return React.createElement(
|
|
Typography,
|
|
_extends({
|
|
className: classNames(classes.column, className),
|
|
variant: 'body1',
|
|
component: 'p'
|
|
}, restProps),
|
|
column.title
|
|
);
|
|
};
|
|
|
|
ColumnBase.propTypes = {
|
|
column: PropTypes.object.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
ColumnBase.defaultProps = {
|
|
className: undefined
|
|
};
|
|
|
|
var Column = withStyles(styles$1, { name: 'DragDrop' })(ColumnBase);
|
|
|
|
var DragDropProvider$1 = function (_React$PureComponent) {
|
|
inherits(DragDropProvider$$1, _React$PureComponent);
|
|
|
|
function DragDropProvider$$1() {
|
|
classCallCheck(this, DragDropProvider$$1);
|
|
return possibleConstructorReturn(this, (DragDropProvider$$1.__proto__ || Object.getPrototypeOf(DragDropProvider$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(DragDropProvider$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(DragDropProvider, _extends({
|
|
containerComponent: Container$1,
|
|
columnComponent: Column
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return DragDropProvider$$1;
|
|
}(React.PureComponent);
|
|
|
|
DragDropProvider$1.Container = Container$1;
|
|
DragDropProvider$1.Column = Column;
|
|
|
|
var styles$3 = 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'
|
|
},
|
|
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,
|
|
pageSizes = _ref.pageSizes,
|
|
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: {
|
|
icon: classes.selectIcon
|
|
},
|
|
input: React.createElement(Input, {
|
|
disableUnderline: true,
|
|
classes: { root: classes.inputRoot }
|
|
})
|
|
},
|
|
pageSizes.map(function (item) {
|
|
return React.createElement(
|
|
MenuItem,
|
|
{ key: item, value: item },
|
|
item !== 0 ? item : showAll
|
|
);
|
|
})
|
|
)
|
|
);
|
|
};
|
|
|
|
PageSizeSelectorBase.propTypes = {
|
|
pageSize: PropTypes.number.isRequired,
|
|
onPageSizeChange: PropTypes.func.isRequired,
|
|
pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var PageSizeSelector = withStyles(styles$3, { name: 'PageSizeSelector' })(PageSizeSelectorBase);
|
|
|
|
var styles$4 = 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',
|
|
cursor: 'default'
|
|
},
|
|
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(
|
|
Button,
|
|
{
|
|
className: buttonClasses,
|
|
disabled: isDisabled,
|
|
onClick: onClick,
|
|
disableRipple: isActive
|
|
},
|
|
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 = firstRowOnPage(currentPage, pageSize, totalCount);
|
|
var to = 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(
|
|
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(
|
|
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 = withStyles(styles$4, { name: 'Pagination' })(PaginationBase);
|
|
|
|
var getBorderColor = function getBorderColor(theme) {
|
|
return '1px solid ' + (theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.8));
|
|
};
|
|
|
|
var styles$2 = function styles$$1(theme) {
|
|
return {
|
|
pager: {
|
|
overflow: 'hidden',
|
|
padding: theme.spacing.unit * 1.5,
|
|
borderTop: getBorderColor(theme)
|
|
}
|
|
};
|
|
};
|
|
|
|
var PagerBase = function PagerBase(_ref) {
|
|
var currentPage = _ref.currentPage,
|
|
pageSizes = _ref.pageSizes,
|
|
totalPages = _ref.totalPages,
|
|
pageSize = _ref.pageSize,
|
|
classes = _ref.classes,
|
|
_onCurrentPageChange = _ref.onCurrentPageChange,
|
|
onPageSizeChange = _ref.onPageSizeChange,
|
|
totalCount = _ref.totalCount,
|
|
getMessage = _ref.getMessage,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['currentPage', 'pageSizes', 'totalPages', 'pageSize', 'classes', 'onCurrentPageChange', 'onPageSizeChange', 'totalCount', 'getMessage', 'className']);
|
|
return React.createElement(
|
|
'div',
|
|
_extends({
|
|
className: classNames(classes.pager, className)
|
|
}, restProps),
|
|
React.createElement(Pagination, {
|
|
totalPages: totalPages,
|
|
totalCount: totalCount,
|
|
currentPage: currentPage,
|
|
onCurrentPageChange: function onCurrentPageChange(page) {
|
|
return _onCurrentPageChange(page);
|
|
},
|
|
pageSize: pageSize,
|
|
getMessage: getMessage
|
|
}),
|
|
!!pageSizes.length && React.createElement(PageSizeSelector, {
|
|
pageSize: pageSize,
|
|
onPageSizeChange: onPageSizeChange,
|
|
pageSizes: pageSizes,
|
|
getMessage: getMessage
|
|
})
|
|
);
|
|
};
|
|
|
|
PagerBase.propTypes = {
|
|
currentPage: PropTypes.number.isRequired,
|
|
totalPages: PropTypes.number.isRequired,
|
|
pageSizes: 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,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
PagerBase.defaultProps = {
|
|
className: undefined
|
|
};
|
|
|
|
var Pager = withStyles(styles$2, { name: 'Pager' })(PagerBase);
|
|
|
|
var defaultMessages$1 = {
|
|
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(PagingPanel, _extends({
|
|
containerComponent: Pager,
|
|
messages: _extends({}, defaultMessages$1, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return PagingPanel$$1;
|
|
}(React.PureComponent);
|
|
|
|
PagingPanel$1.Container = Pager;
|
|
|
|
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$5 = function styles$$1(theme) {
|
|
return {
|
|
panel: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
width: '100%',
|
|
marginTop: theme.spacing.unit * 1.5
|
|
}
|
|
};
|
|
};
|
|
|
|
var GroupPanelContainerBase = function GroupPanelContainerBase(_ref) {
|
|
var classes = _ref.classes,
|
|
children = _ref.children,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['classes', 'children', 'className']);
|
|
return React.createElement(
|
|
'div',
|
|
_extends({
|
|
className: classNames(classes.panel, className)
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
GroupPanelContainerBase.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
className: PropTypes.string
|
|
};
|
|
|
|
GroupPanelContainerBase.defaultProps = {
|
|
children: null,
|
|
className: undefined
|
|
};
|
|
|
|
var GroupPanelContainer = withStyles(styles$5, { name: 'GroupPanelContainer' })(GroupPanelContainerBase);
|
|
|
|
var ENTER_KEY_CODE = 13;
|
|
var SPACE_KEY_CODE = 32;
|
|
|
|
var styles$6 = function styles$$1(theme) {
|
|
return {
|
|
button: {
|
|
marginRight: theme.spacing.unit,
|
|
marginBottom: theme.spacing.unit * 1.5
|
|
},
|
|
draftCell: {
|
|
opacity: 0.3
|
|
}
|
|
};
|
|
};
|
|
|
|
var label = function label(showSortingControls, sortingDirection, column) {
|
|
var title = column.title || column.name;
|
|
return showSortingControls ? React.createElement(
|
|
TableSortLabel,
|
|
{
|
|
active: !!sortingDirection,
|
|
direction: sortingDirection,
|
|
tabIndex: -1
|
|
},
|
|
title
|
|
) : title;
|
|
};
|
|
|
|
var GroupPanelItemBase = function GroupPanelItemBase(_ref) {
|
|
var _classNames;
|
|
|
|
var _ref$item = _ref.item,
|
|
column = _ref$item.column,
|
|
draft = _ref$item.draft,
|
|
onGroup = _ref.onGroup,
|
|
showGroupingControls = _ref.showGroupingControls,
|
|
showSortingControls = _ref.showSortingControls,
|
|
sortingDirection = _ref.sortingDirection,
|
|
onSort = _ref.onSort,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['item', 'onGroup', 'showGroupingControls', 'showSortingControls', 'sortingDirection', 'onSort', 'classes', 'className']);
|
|
|
|
var chipClassNames = classNames((_classNames = {}, defineProperty(_classNames, classes.button, true), defineProperty(_classNames, classes.draftCell, draft), _classNames), className);
|
|
var onClick = function onClick(e) {
|
|
if (!showSortingControls) 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 direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
|
|
|
|
onSort({
|
|
direction: direction,
|
|
keepOther: cancelSortingRelatedKey
|
|
});
|
|
};
|
|
|
|
return React.createElement(Chip, _extends({
|
|
label: label(showSortingControls, sortingDirection, column),
|
|
className: chipClassNames
|
|
}, showGroupingControls ? { onDelete: onGroup } : null, {
|
|
onClick: onClick
|
|
}, restProps));
|
|
};
|
|
|
|
GroupPanelItemBase.propTypes = {
|
|
item: PropTypes.shape({
|
|
column: PropTypes.shape({
|
|
title: PropTypes.string
|
|
}).isRequired,
|
|
draft: PropTypes.bool
|
|
}).isRequired,
|
|
showSortingControls: PropTypes.bool,
|
|
sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
|
|
onSort: PropTypes.func,
|
|
onGroup: PropTypes.func,
|
|
showGroupingControls: PropTypes.bool,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
GroupPanelItemBase.defaultProps = {
|
|
showSortingControls: false,
|
|
sortingDirection: undefined,
|
|
onSort: undefined,
|
|
onGroup: undefined,
|
|
showGroupingControls: false,
|
|
className: undefined
|
|
};
|
|
|
|
var GroupPanelItem = withStyles(styles$6, { name: 'GroupPanelItem' })(GroupPanelItemBase);
|
|
|
|
var styles$7 = function styles$$1(theme) {
|
|
return {
|
|
groupInfo: {
|
|
color: theme.typography.title.color
|
|
}
|
|
};
|
|
};
|
|
|
|
var GroupPanelEmptyMessageBase = function GroupPanelEmptyMessageBase(_ref) {
|
|
var getMessage = _ref.getMessage,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['getMessage', 'classes', 'className']);
|
|
return React.createElement(
|
|
'div',
|
|
_extends({
|
|
className: classNames(classes.groupInfo, className)
|
|
}, restProps),
|
|
getMessage('groupByColumn')
|
|
);
|
|
};
|
|
|
|
GroupPanelEmptyMessageBase.propTypes = {
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
GroupPanelEmptyMessageBase.defaultProps = {
|
|
className: undefined
|
|
};
|
|
|
|
var GroupPanelEmptyMessage = withStyles(styles$7, { name: 'GroupPanelEmptyMessage' })(GroupPanelEmptyMessageBase);
|
|
|
|
var defaultMessages$2 = {
|
|
groupByColumn: 'Drag a column header here to group by that column'
|
|
};
|
|
|
|
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,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(GroupingPanel, _extends({
|
|
layoutComponent: GroupPanelLayout,
|
|
containerComponent: GroupPanelContainer,
|
|
itemComponent: GroupPanelItem,
|
|
emptyMessageComponent: GroupPanelEmptyMessage,
|
|
messages: _extends({}, defaultMessages$2, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return GroupingPanel$$1;
|
|
}(React.PureComponent);
|
|
|
|
GroupingPanel$1.Container = GroupPanelContainer;
|
|
GroupingPanel$1.Item = GroupPanelItem;
|
|
GroupingPanel$1.EmptyMessage = GroupPanelEmptyMessage;
|
|
|
|
GroupingPanel$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
groupByColumn: PropTypes.string
|
|
})
|
|
};
|
|
|
|
GroupingPanel$1.defaultProps = {
|
|
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,
|
|
onToggle = _ref.onToggle,
|
|
tableColumn = _ref.tableColumn,
|
|
tableRow = _ref.tableRow,
|
|
row = _ref.row,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'expanded', 'classes', 'onToggle', 'tableColumn', 'tableRow', 'row', 'className']);
|
|
|
|
var handleClick = function handleClick(e) {
|
|
e.stopPropagation();
|
|
onToggle();
|
|
};
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames(classes.toggleCell, className),
|
|
style: style
|
|
}, restProps),
|
|
React.createElement(
|
|
IconButton,
|
|
{
|
|
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,
|
|
onToggle: PropTypes.func,
|
|
className: PropTypes.string,
|
|
tableColumn: PropTypes.object,
|
|
tableRow: PropTypes.object,
|
|
row: PropTypes.object
|
|
};
|
|
|
|
TableDetailToggleCellBase.defaultProps = {
|
|
style: null,
|
|
expanded: false,
|
|
onToggle: function onToggle() {},
|
|
className: undefined,
|
|
tableColumn: undefined,
|
|
tableRow: undefined,
|
|
row: undefined
|
|
};
|
|
|
|
var TableDetailToggleCell = withStyles(styles$8, { name: 'TableDetailToggleCell' })(TableDetailToggleCellBase);
|
|
|
|
var styles$9 = function styles$$1(theme) {
|
|
return {
|
|
active: {
|
|
backgroundColor: theme.palette.background.default
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableDetailCellBase = function TableDetailCellBase(_ref) {
|
|
var colSpan = _ref.colSpan,
|
|
style = _ref.style,
|
|
children = _ref.children,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
tableColumn = _ref.tableColumn,
|
|
tableRow = _ref.tableRow,
|
|
row = _ref.row,
|
|
restProps = objectWithoutProperties(_ref, ['colSpan', 'style', 'children', 'classes', 'className', 'tableColumn', 'tableRow', 'row']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
style: style,
|
|
colSpan: colSpan,
|
|
className: classNames(classes.active, className)
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
TableDetailCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
colSpan: PropTypes.number,
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableColumn: PropTypes.object,
|
|
tableRow: PropTypes.object,
|
|
row: PropTypes.object
|
|
};
|
|
|
|
TableDetailCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1,
|
|
className: undefined,
|
|
tableColumn: undefined,
|
|
tableRow: undefined,
|
|
row: undefined,
|
|
children: undefined
|
|
};
|
|
|
|
var TableDetailCell = withStyles(styles$9, { name: 'TableDetailCell' })(TableDetailCellBase);
|
|
|
|
var TableRow$1 = function TableRow$$1(_ref) {
|
|
var children = _ref.children,
|
|
row = _ref.row,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['children', 'row', 'tableRow', 'tableColumn']);
|
|
return React.createElement(
|
|
TableRow,
|
|
restProps,
|
|
children
|
|
);
|
|
};
|
|
|
|
TableRow$1.propTypes = {
|
|
children: PropTypes.node,
|
|
row: PropTypes.object,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
TableRow$1.defaultProps = {
|
|
children: null,
|
|
row: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
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() {
|
|
return React.createElement(TableRowDetail, _extends({
|
|
toggleCellComponent: TableDetailToggleCell,
|
|
cellComponent: TableDetailCell,
|
|
rowComponent: TableRow$1,
|
|
toggleColumnWidth: 48
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return TableRowDetail$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableRowDetail$1.Cell = TableDetailCell;
|
|
TableRowDetail$1.ToggleCell = TableDetailToggleCell;
|
|
TableRowDetail$1.Row = TableRow$1;
|
|
|
|
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',
|
|
height: theme.spacing.unit * 5,
|
|
width: theme.spacing.unit * 5,
|
|
marginRight: theme.spacing.unit
|
|
},
|
|
columnTitle: {
|
|
verticalAlign: 'middle'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableGroupCellBase = function TableGroupCellBase(_ref) {
|
|
var style = _ref.style,
|
|
colSpan = _ref.colSpan,
|
|
row = _ref.row,
|
|
column = _ref.column,
|
|
expanded = _ref.expanded,
|
|
onToggle = _ref.onToggle,
|
|
classes = _ref.classes,
|
|
children = _ref.children,
|
|
className = _ref.className,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'colSpan', 'row', 'column', 'expanded', 'onToggle', 'classes', 'children', 'className', 'tableRow', 'tableColumn']);
|
|
|
|
var handleClick = function handleClick() {
|
|
return onToggle();
|
|
};
|
|
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
colSpan: colSpan,
|
|
style: style,
|
|
className: classNames(classes.cell, className),
|
|
onClick: handleClick
|
|
}, restProps),
|
|
React.createElement(
|
|
IconButton,
|
|
{
|
|
className: classes.groupButton
|
|
},
|
|
expanded ? 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,
|
|
expanded: PropTypes.bool,
|
|
onToggle: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
TableGroupCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1,
|
|
row: {},
|
|
column: {},
|
|
expanded: false,
|
|
onToggle: function onToggle() {},
|
|
children: undefined,
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var TableGroupCell = withStyles(styles$10, { name: 'TableGroupCell' })(TableGroupCellBase);
|
|
|
|
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() {
|
|
return React.createElement(TableGroupRow, _extends({
|
|
cellComponent: TableGroupCell,
|
|
rowComponent: TableRow$1,
|
|
indentColumnWidth: 48
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return TableGroupRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableGroupRow$1.Row = TableRow$1;
|
|
TableGroupRow$1.Cell = TableGroupCell;
|
|
|
|
var styles$11 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
overflow: 'visible',
|
|
paddingRight: 0,
|
|
paddingLeft: theme.spacing.unit,
|
|
textAlign: 'center'
|
|
},
|
|
pointer: {
|
|
cursor: 'pointer'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableSelectAllCellBase = function TableSelectAllCellBase(_ref) {
|
|
var _classNames;
|
|
|
|
var style = _ref.style,
|
|
allSelected = _ref.allSelected,
|
|
someSelected = _ref.someSelected,
|
|
disabled = _ref.disabled,
|
|
onToggle = _ref.onToggle,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'allSelected', 'someSelected', 'disabled', 'onToggle', 'classes', 'className', 'tableRow', 'tableColumn']);
|
|
|
|
var cellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.pointer, !disabled), _classNames), className);
|
|
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
padding: 'checkbox',
|
|
style: style,
|
|
className: cellClasses
|
|
}, restProps),
|
|
React.createElement(Checkbox, {
|
|
checked: allSelected,
|
|
indeterminate: someSelected,
|
|
disabled: disabled,
|
|
onClick: function onClick(e) {
|
|
if (disabled) return;
|
|
|
|
e.stopPropagation();
|
|
onToggle();
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
TableSelectAllCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
allSelected: PropTypes.bool,
|
|
someSelected: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
onToggle: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
TableSelectAllCellBase.defaultProps = {
|
|
style: null,
|
|
allSelected: false,
|
|
someSelected: false,
|
|
disabled: false,
|
|
onToggle: function onToggle() {},
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var TableSelectAllCell = withStyles(styles$11, { name: 'TableSelectAllCell' })(TableSelectAllCellBase);
|
|
|
|
var styles$12 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
overflow: 'visible',
|
|
paddingRight: 0,
|
|
paddingLeft: theme.spacing.unit,
|
|
textAlign: 'center'
|
|
},
|
|
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,
|
|
onToggle = _ref.onToggle,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
row = _ref.row,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'selected', 'onToggle', 'classes', 'className', 'row', 'tableRow', 'tableColumn']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
padding: 'checkbox',
|
|
style: style,
|
|
className: classNames(classes.cell, className)
|
|
}, restProps),
|
|
React.createElement(Checkbox, {
|
|
className: classes.checkbox,
|
|
checked: selected,
|
|
onClick: function onClick(e) {
|
|
e.stopPropagation();
|
|
onToggle();
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
TableSelectCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
selected: PropTypes.bool,
|
|
onToggle: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
row: PropTypes.object,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
TableSelectCellBase.defaultProps = {
|
|
style: null,
|
|
selected: false,
|
|
onToggle: function onToggle() {},
|
|
row: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined,
|
|
className: undefined
|
|
};
|
|
|
|
var TableSelectCell = withStyles(styles$12, { name: 'TableSelectCell' })(TableSelectCellBase);
|
|
|
|
var TableSelectRow = function TableSelectRow(_ref) {
|
|
var selected = _ref.selected,
|
|
children = _ref.children,
|
|
style = _ref.style,
|
|
onToggle = _ref.onToggle,
|
|
selectByRowClick = _ref.selectByRowClick;
|
|
return React.createElement(
|
|
TableRow,
|
|
{
|
|
style: style,
|
|
selected: selected,
|
|
onClick: function onClick(e) {
|
|
if (!selectByRowClick) return;
|
|
e.stopPropagation();
|
|
onToggle();
|
|
}
|
|
},
|
|
children
|
|
);
|
|
};
|
|
|
|
TableSelectRow.propTypes = {
|
|
children: PropTypes.node,
|
|
onToggle: PropTypes.func,
|
|
selected: PropTypes.bool,
|
|
selectByRowClick: PropTypes.bool,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
TableSelectRow.defaultProps = {
|
|
children: null,
|
|
onToggle: function onToggle() {},
|
|
selected: false,
|
|
selectByRowClick: false,
|
|
style: null
|
|
};
|
|
|
|
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(TableSelection, _extends({
|
|
rowComponent: TableSelectRow,
|
|
cellComponent: TableSelectCell,
|
|
headerCellComponent: TableSelectAllCell,
|
|
selectionColumnWidth: 58
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return TableSelection$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableSelection$1.Cell = TableSelectCell;
|
|
TableSelection$1.HeaderCell = TableSelectAllCell;
|
|
|
|
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 = withStyles(styles$13, { name: 'TableContainer' })(TableContainerBase);
|
|
|
|
var styles$14 = function styles$$1(theme) {
|
|
return {
|
|
table: {
|
|
tableLayout: 'fixed'
|
|
},
|
|
headTable: {
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1,
|
|
overflow: 'visible',
|
|
background: theme.palette.background.paper,
|
|
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(
|
|
TableMUI,
|
|
_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 = withStyles(styles$14, { name: 'Table' })(TableBase);
|
|
|
|
var MINIMAL_COLUMN_WIDTH = 120;
|
|
|
|
var TableLayout$1 = function TableLayout$$1(_ref) {
|
|
var headerRows = _ref.headerRows,
|
|
bodyRows = _ref.bodyRows,
|
|
columns = _ref.columns,
|
|
cellComponent = _ref.cellComponent,
|
|
rowComponent = _ref.rowComponent;
|
|
return React.createElement(TableLayout, {
|
|
layoutComponent: StaticTableLayout,
|
|
headerRows: headerRows,
|
|
rows: bodyRows,
|
|
columns: columns,
|
|
minColumnWidth: MINIMAL_COLUMN_WIDTH,
|
|
containerComponent: TableContainer,
|
|
tableComponent: Table$2,
|
|
headComponent: TableHead,
|
|
bodyComponent: TableBody,
|
|
rowComponent: rowComponent,
|
|
cellComponent: cellComponent
|
|
});
|
|
};
|
|
|
|
TableLayout$1.propTypes = {
|
|
headerRows: PropTypes.array.isRequired,
|
|
bodyRows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired
|
|
};
|
|
|
|
var styles$15 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
paddingRight: theme.spacing.unit,
|
|
paddingLeft: theme.spacing.unit,
|
|
'&:first-child': {
|
|
paddingLeft: theme.spacing.unit * 3
|
|
},
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap'
|
|
},
|
|
cellRightAlign: {
|
|
textAlign: 'right'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableCellBase = function TableCellBase(_ref) {
|
|
var _classNames;
|
|
|
|
var column = _ref.column,
|
|
value = _ref.value,
|
|
children = _ref.children,
|
|
classes = _ref.classes,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
row = _ref.row,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['column', 'value', 'children', 'classes', 'tableRow', 'tableColumn', 'row', 'className']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRightAlign, tableColumn && tableColumn.align === 'right'), _classNames), className)
|
|
}, restProps),
|
|
children || value
|
|
);
|
|
};
|
|
|
|
TableCellBase.propTypes = {
|
|
value: PropTypes.any,
|
|
column: PropTypes.object,
|
|
row: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
TableCellBase.defaultProps = {
|
|
value: undefined,
|
|
column: undefined,
|
|
row: undefined,
|
|
children: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined,
|
|
className: undefined
|
|
};
|
|
|
|
var TableCell$1 = withStyles(styles$15, { name: 'TableCell' })(TableCellBase);
|
|
|
|
var styles$16 = {
|
|
cell: {
|
|
padding: 0
|
|
}
|
|
};
|
|
|
|
var TableStubCellBase = function TableStubCellBase(_ref) {
|
|
var style = _ref.style,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'classes', 'className', 'tableRow', 'tableColumn']);
|
|
return React.createElement(TableCell, _extends({
|
|
style: style,
|
|
className: classNames(classes.cell, className)
|
|
}, restProps));
|
|
};
|
|
|
|
TableStubCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
TableStubCellBase.defaultProps = {
|
|
style: {},
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var TableStubCell = 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,
|
|
className = _ref.className,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'colSpan', 'getMessage', 'classes', 'className', 'tableRow', 'tableColumn']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
style: style,
|
|
className: classNames(classes.cell, className),
|
|
colSpan: colSpan
|
|
}, restProps),
|
|
React.createElement(
|
|
'big',
|
|
{ className: 'text-muted' },
|
|
getMessage('noData')
|
|
)
|
|
);
|
|
};
|
|
|
|
TableNoDataCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
colSpan: PropTypes.number,
|
|
getMessage: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
TableNoDataCellBase.defaultProps = {
|
|
style: null,
|
|
colSpan: 1,
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var TableNoDataCell = withStyles(styles$17, { name: 'TableNoDataCell' })(TableNoDataCellBase);
|
|
|
|
var defaultMessages$3 = {
|
|
noData: 'No data'
|
|
};
|
|
|
|
var Table$1 = function (_React$PureComponent) {
|
|
inherits(Table$$1, _React$PureComponent);
|
|
|
|
function Table$$1() {
|
|
classCallCheck(this, Table$$1);
|
|
return possibleConstructorReturn(this, (Table$$1.__proto__ || Object.getPrototypeOf(Table$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Table$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(Table, _extends({
|
|
layoutComponent: TableLayout$1,
|
|
rowComponent: TableRow$1,
|
|
cellComponent: TableCell$1,
|
|
noDataRowComponent: TableRow$1,
|
|
noDataCellComponent: TableNoDataCell,
|
|
stubCellComponent: TableStubCell,
|
|
stubHeaderCellComponent: TableStubCell,
|
|
messages: _extends({}, defaultMessages$3, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return Table$$1;
|
|
}(React.PureComponent);
|
|
|
|
Table$1.Cell = TableCell$1;
|
|
Table$1.Row = TableRow$1;
|
|
Table$1.NoDataCell = TableNoDataCell;
|
|
Table$1.NoDataRow = TableRow$1;
|
|
Table$1.StubCell = TableStubCell;
|
|
Table$1.StubHeaderCell = TableStubCell;
|
|
|
|
Table$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
noData: PropTypes.string
|
|
})
|
|
};
|
|
|
|
Table$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var MINIMAL_COLUMN_WIDTH$1 = 120;
|
|
|
|
var HeadTable = function HeadTable(props) {
|
|
return React.createElement(Table$2, _extends({ use: 'head' }, props));
|
|
};
|
|
|
|
var VirtualTableLayout$1 = function VirtualTableLayout$$1(_ref) {
|
|
var headerRows = _ref.headerRows,
|
|
bodyRows = _ref.bodyRows,
|
|
columns = _ref.columns,
|
|
cellComponent = _ref.cellComponent,
|
|
rowComponent = _ref.rowComponent,
|
|
height = _ref.height,
|
|
estimatedRowHeight = _ref.estimatedRowHeight;
|
|
return React.createElement(TableLayout, {
|
|
layoutComponent: VirtualTableLayout,
|
|
headerRows: headerRows,
|
|
rows: bodyRows,
|
|
columns: columns,
|
|
cellComponent: cellComponent,
|
|
rowComponent: rowComponent,
|
|
bodyComponent: TableBody,
|
|
headComponent: TableHead,
|
|
tableComponent: Table$2,
|
|
headTableComponent: HeadTable,
|
|
containerComponent: TableContainer,
|
|
estimatedRowHeight: estimatedRowHeight,
|
|
minColumnWidth: MINIMAL_COLUMN_WIDTH$1,
|
|
height: height
|
|
});
|
|
};
|
|
|
|
VirtualTableLayout$1.propTypes = {
|
|
headerRows: PropTypes.array.isRequired,
|
|
bodyRows: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
cellComponent: PropTypes.func.isRequired,
|
|
rowComponent: PropTypes.func.isRequired,
|
|
height: PropTypes.number.isRequired,
|
|
estimatedRowHeight: PropTypes.number.isRequired
|
|
};
|
|
|
|
var defaultMessages$4 = {
|
|
noData: 'No data'
|
|
};
|
|
|
|
var VirtualTable = function (_React$PureComponent) {
|
|
inherits(VirtualTable, _React$PureComponent);
|
|
|
|
function VirtualTable(props) {
|
|
classCallCheck(this, VirtualTable);
|
|
|
|
var _this = possibleConstructorReturn(this, (VirtualTable.__proto__ || Object.getPrototypeOf(VirtualTable)).call(this, props));
|
|
|
|
var height = props.height,
|
|
estimatedRowHeight = props.estimatedRowHeight;
|
|
|
|
_this.layoutRenderComponent = createRenderComponent(VirtualTableLayout$1, { height: height, estimatedRowHeight: estimatedRowHeight });
|
|
return _this;
|
|
}
|
|
|
|
createClass(VirtualTable, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(_ref) {
|
|
var height = _ref.height,
|
|
estimatedRowHeight = _ref.estimatedRowHeight;
|
|
|
|
this.layoutRenderComponent.update({ height: height, estimatedRowHeight: estimatedRowHeight });
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
height = _props.height,
|
|
estimatedRowHeight = _props.estimatedRowHeight,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['height', 'estimatedRowHeight', 'messages']);
|
|
|
|
|
|
return React.createElement(Table, _extends({
|
|
layoutComponent: this.layoutRenderComponent.component,
|
|
rowComponent: TableRow$1,
|
|
cellComponent: TableCell$1,
|
|
noDataRowComponent: TableRow$1,
|
|
noDataCellComponent: TableNoDataCell,
|
|
stubCellComponent: TableStubCell,
|
|
stubHeaderCellComponent: TableStubCell,
|
|
messages: _extends({}, defaultMessages$4, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return VirtualTable;
|
|
}(React.PureComponent);
|
|
|
|
VirtualTable.Cell = TableCell$1;
|
|
VirtualTable.Row = TableRow$1;
|
|
VirtualTable.NoDataCell = TableNoDataCell;
|
|
VirtualTable.NoDataRow = TableRow$1;
|
|
VirtualTable.StubCell = TableStubCell;
|
|
VirtualTable.StubHeaderCell = TableStubCell;
|
|
|
|
VirtualTable.propTypes = {
|
|
estimatedRowHeight: PropTypes.number,
|
|
height: PropTypes.number,
|
|
messages: PropTypes.shape({
|
|
noData: PropTypes.string
|
|
})
|
|
};
|
|
|
|
VirtualTable.defaultProps = {
|
|
estimatedRowHeight: 48,
|
|
height: 530,
|
|
messages: {}
|
|
};
|
|
|
|
var styles$18 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
paddingRight: theme.spacing.unit,
|
|
paddingLeft: theme.spacing.unit,
|
|
'&:first-child': {
|
|
paddingLeft: theme.spacing.unit * 3
|
|
}
|
|
},
|
|
input: {
|
|
width: '100%'
|
|
}
|
|
};
|
|
};
|
|
|
|
var TableFilterCellBase = function TableFilterCellBase(_ref) {
|
|
var style = _ref.style,
|
|
filter = _ref.filter,
|
|
getMessage = _ref.getMessage,
|
|
onFilter = _ref.onFilter,
|
|
classes = _ref.classes,
|
|
children = _ref.children,
|
|
className = _ref.className,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
column = _ref.column,
|
|
restProps = objectWithoutProperties(_ref, ['style', 'filter', 'getMessage', 'onFilter', 'classes', 'children', 'className', 'tableRow', 'tableColumn', 'column']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames(classes.cell, className),
|
|
style: style
|
|
}, restProps),
|
|
children || React.createElement(Input, {
|
|
className: classes.input,
|
|
value: filter ? filter.value : '',
|
|
placeholder: getMessage('filterPlaceholder'),
|
|
onChange: function onChange(e) {
|
|
return onFilter(e.target.value ? { value: e.target.value } : null);
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
TableFilterCellBase.propTypes = {
|
|
style: PropTypes.object,
|
|
filter: PropTypes.object,
|
|
onFilter: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
getMessage: PropTypes.func.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object,
|
|
column: PropTypes.object
|
|
};
|
|
|
|
TableFilterCellBase.defaultProps = {
|
|
style: null,
|
|
filter: null,
|
|
onFilter: function onFilter() {},
|
|
children: undefined,
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined,
|
|
column: undefined
|
|
};
|
|
|
|
var TableFilterCell = withStyles(styles$18, { name: 'TableFilterCell' })(TableFilterCellBase);
|
|
|
|
var defaultMessages$5 = {
|
|
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,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(TableFilterRow, _extends({
|
|
cellComponent: TableFilterCell,
|
|
rowComponent: TableRow$1,
|
|
messages: _extends({}, defaultMessages$5, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableFilterRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableFilterRow$1.Cell = TableFilterCell;
|
|
TableFilterRow$1.Row = TableRow$1;
|
|
|
|
TableFilterRow$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
filterPlaceholder: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableFilterRow$1.defaultProps = {
|
|
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,
|
|
onGroup = _ref.onGroup,
|
|
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();
|
|
onGroup(e);
|
|
},
|
|
className: groupingControlClasses
|
|
},
|
|
React.createElement(List$1, null)
|
|
);
|
|
};
|
|
|
|
GroupingControlBase.propTypes = {
|
|
align: PropTypes.string.isRequired,
|
|
onGroup: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var GroupingControl = 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 onWidthDraft = _this.props.onWidthDraft;
|
|
|
|
onWidthDraft({ shift: x - _this.resizeStartingX });
|
|
};
|
|
_this.onResizeEnd = function (_ref3) {
|
|
var x = _ref3.x;
|
|
var _this$props = _this.props,
|
|
onWidthChange = _this$props.onWidthChange,
|
|
onWidthDraftCancel = _this$props.onWidthDraftCancel;
|
|
|
|
onWidthDraftCancel();
|
|
onWidthChange({ 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(
|
|
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 = {
|
|
onWidthChange: PropTypes.func.isRequired,
|
|
onWidthDraft: PropTypes.func.isRequired,
|
|
onWidthDraftCancel: PropTypes.func.isRequired,
|
|
classes: PropTypes.object.isRequired
|
|
};
|
|
|
|
var ResizingControl = 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,
|
|
getMessage = _ref.getMessage;
|
|
return React.createElement(
|
|
Tooltip,
|
|
{
|
|
title: getMessage('sortingHint'),
|
|
placement: align === 'right' ? 'bottom-end' : 'bottom-start',
|
|
enterDelay: 300,
|
|
classes: {
|
|
root: classes.tooltipRoot
|
|
}
|
|
},
|
|
React.createElement(
|
|
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,
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
SortingControlBase.defaultProps = {
|
|
sortingDirection: null
|
|
};
|
|
|
|
var SortingControl = 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,
|
|
paddingLeft: theme.spacing.unit,
|
|
'&:first-child': {
|
|
paddingLeft: theme.spacing.unit * 3
|
|
}
|
|
},
|
|
cellNoUserSelect: {
|
|
userSelect: 'none',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none'
|
|
},
|
|
cellDraggable: {
|
|
cursor: 'pointer'
|
|
},
|
|
cellDimmed: {
|
|
opacity: 0.3
|
|
},
|
|
cellRight: {
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit
|
|
}
|
|
};
|
|
};
|
|
|
|
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 onSort = _this.props.onSort;
|
|
|
|
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 direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
|
|
|
|
e.preventDefault();
|
|
onSort({
|
|
direction: direction,
|
|
keepOther: e.shiftKey || cancelSortingRelatedKey
|
|
});
|
|
};
|
|
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,
|
|
showSortingControls = _props.showSortingControls,
|
|
sortingDirection = _props.sortingDirection,
|
|
showGroupingControls = _props.showGroupingControls,
|
|
onGroup = _props.onGroup,
|
|
draggingEnabled = _props.draggingEnabled,
|
|
resizingEnabled = _props.resizingEnabled,
|
|
onWidthChange = _props.onWidthChange,
|
|
onWidthDraft = _props.onWidthDraft,
|
|
onWidthDraftCancel = _props.onWidthDraftCancel,
|
|
classes = _props.classes,
|
|
getMessage = _props.getMessage,
|
|
tableRow = _props.tableRow,
|
|
className = _props.className,
|
|
onSort = _props.onSort,
|
|
restProps = objectWithoutProperties(_props, ['style', 'column', 'tableColumn', 'showSortingControls', 'sortingDirection', 'showGroupingControls', 'onGroup', 'draggingEnabled', 'resizingEnabled', 'onWidthChange', 'onWidthDraft', 'onWidthDraftCancel', 'classes', 'getMessage', 'tableRow', 'className', 'onSort']);
|
|
var dragging = this.state.dragging;
|
|
|
|
var align = tableColumn && tableColumn.align || 'left';
|
|
var columnTitle = column && (column.title || column.name);
|
|
|
|
var tableCellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRight, align === 'right'), defineProperty(_classNames, classes.cellNoUserSelect, draggingEnabled || showSortingControls), defineProperty(_classNames, classes.cellDraggable, draggingEnabled), defineProperty(_classNames, classes.cellDimmed, dragging || tableColumn && tableColumn.draft), _classNames), className);
|
|
var cellLayout = React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
style: style,
|
|
className: tableCellClasses,
|
|
numeric: align === 'right'
|
|
}, restProps),
|
|
showGroupingControls && React.createElement(GroupingControl, {
|
|
align: align,
|
|
onGroup: onGroup
|
|
}),
|
|
showSortingControls ? React.createElement(SortingControl, {
|
|
align: align,
|
|
sortingDirection: sortingDirection,
|
|
columnTitle: columnTitle,
|
|
onClick: this.onClick,
|
|
getMessage: getMessage
|
|
}) : React.createElement(
|
|
'div',
|
|
{ className: classes.plainTitle },
|
|
columnTitle
|
|
),
|
|
resizingEnabled && React.createElement(ResizingControl, {
|
|
onWidthChange: onWidthChange,
|
|
onWidthDraft: onWidthDraft,
|
|
onWidthDraftCancel: onWidthDraftCancel
|
|
})
|
|
);
|
|
|
|
return draggingEnabled ? React.createElement(
|
|
DragSource,
|
|
{
|
|
ref: function ref(element) {
|
|
_this2.cellRef = element;
|
|
},
|
|
payload: [{ type: 'column', columnName: column.name }],
|
|
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,
|
|
tableRow: PropTypes.object,
|
|
column: PropTypes.object,
|
|
style: PropTypes.object,
|
|
showSortingControls: PropTypes.bool,
|
|
sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
|
|
onSort: PropTypes.func,
|
|
showGroupingControls: PropTypes.bool,
|
|
onGroup: PropTypes.func,
|
|
draggingEnabled: PropTypes.bool,
|
|
resizingEnabled: PropTypes.bool,
|
|
onWidthChange: PropTypes.func,
|
|
onWidthDraft: PropTypes.func,
|
|
onWidthDraftCancel: PropTypes.func,
|
|
classes: PropTypes.object.isRequired,
|
|
getMessage: PropTypes.func.isRequired,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
TableHeaderCellBase.defaultProps = {
|
|
column: undefined,
|
|
tableColumn: undefined,
|
|
tableRow: undefined,
|
|
style: null,
|
|
showSortingControls: false,
|
|
sortingDirection: undefined,
|
|
onSort: undefined,
|
|
showGroupingControls: false,
|
|
onGroup: undefined,
|
|
draggingEnabled: false,
|
|
resizingEnabled: false,
|
|
onWidthChange: undefined,
|
|
onWidthDraft: undefined,
|
|
onWidthDraftCancel: undefined,
|
|
className: undefined
|
|
};
|
|
|
|
var TableHeaderCell = withStyles(styles$19, { name: 'TableHeaderCell' })(TableHeaderCellBase);
|
|
|
|
var defaultMessages$6 = {
|
|
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,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(TableHeaderRow, _extends({
|
|
cellComponent: TableHeaderCell,
|
|
rowComponent: TableRow$1,
|
|
messages: _extends({}, defaultMessages$6, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableHeaderRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableHeaderRow$1.Cell = TableHeaderCell;
|
|
TableHeaderRow$1.Row = TableRow$1;
|
|
|
|
TableHeaderRow$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
sortingHint: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableHeaderRow$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var styles$23 = function styles$$1(theme) {
|
|
return {
|
|
button: {
|
|
padding: theme.spacing.unit,
|
|
minWidth: 40
|
|
},
|
|
headingCell: {
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
padding: '0 ' + theme.spacing.unit * 2 + 'px 0 ' + theme.spacing.unit * 3 + 'px'
|
|
},
|
|
cell: {
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
padding: '0 ' + theme.spacing.unit * 2 + 'px 0 ' + theme.spacing.unit * 3 + 'px'
|
|
}
|
|
};
|
|
};
|
|
|
|
var withEditColumnStyles = withStyles(styles$23, { name: 'EditColumn' });
|
|
|
|
var CommandButtonBase = function CommandButtonBase(_ref) {
|
|
var onExecute = _ref.onExecute,
|
|
text = _ref.text,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['onExecute', 'text', 'classes', 'className']);
|
|
return React.createElement(
|
|
Button,
|
|
_extends({
|
|
color: 'primary',
|
|
className: classNames(classes.button, className),
|
|
onClick: function onClick(e) {
|
|
e.stopPropagation();
|
|
onExecute();
|
|
}
|
|
}, restProps),
|
|
text
|
|
);
|
|
};
|
|
CommandButtonBase.propTypes = {
|
|
onExecute: PropTypes.func.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string
|
|
};
|
|
|
|
CommandButtonBase.defaultProps = {
|
|
className: undefined
|
|
};
|
|
|
|
var CommandButton = withEditColumnStyles(CommandButtonBase);
|
|
|
|
var EditCommandHeadingCellBase = function EditCommandHeadingCellBase(_ref2) {
|
|
var children = _ref2.children,
|
|
style = _ref2.style,
|
|
classes = _ref2.classes,
|
|
className = _ref2.className,
|
|
tableRow = _ref2.tableRow,
|
|
tableColumn = _ref2.tableColumn,
|
|
restProps = objectWithoutProperties(_ref2, ['children', 'style', 'classes', 'className', 'tableRow', 'tableColumn']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames(classes.headingCell, className),
|
|
style: style
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
EditCommandHeadingCellBase.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
style: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
EditCommandHeadingCellBase.defaultProps = {
|
|
children: undefined,
|
|
style: {},
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var EditCommandHeadingCell = withEditColumnStyles(EditCommandHeadingCellBase);
|
|
|
|
var EditCommandCellBase = function EditCommandCellBase(_ref3) {
|
|
var children = _ref3.children,
|
|
style = _ref3.style,
|
|
classes = _ref3.classes,
|
|
className = _ref3.className,
|
|
tableRow = _ref3.tableRow,
|
|
tableColumn = _ref3.tableColumn,
|
|
restProps = objectWithoutProperties(_ref3, ['children', 'style', 'classes', 'className', 'tableRow', 'tableColumn']);
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames(classes.cell, className),
|
|
style: style
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
EditCommandCellBase.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
style: PropTypes.object,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: PropTypes.object
|
|
};
|
|
|
|
EditCommandCellBase.defaultProps = {
|
|
children: undefined,
|
|
style: {},
|
|
className: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined
|
|
};
|
|
|
|
var EditCommandCell = withEditColumnStyles(EditCommandCellBase);
|
|
|
|
var defaultMessages$7 = {
|
|
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,
|
|
messages = _props.messages,
|
|
restProps = objectWithoutProperties(_props, ['messages']);
|
|
|
|
|
|
return React.createElement(TableEditColumn, _extends({
|
|
cellComponent: EditCommandCell,
|
|
headerCellComponent: EditCommandHeadingCell,
|
|
commandComponent: CommandButton,
|
|
messages: _extends({}, defaultMessages$7, messages),
|
|
width: 150
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableEditColumn$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableEditColumn$1.Command = CommandButton;
|
|
TableEditColumn$1.Cell = EditCommandCell;
|
|
TableEditColumn$1.HeaderCell = EditCommandHeadingCell;
|
|
|
|
TableEditColumn$1.propTypes = {
|
|
messages: PropTypes.shape({
|
|
addCommand: PropTypes.string,
|
|
editCommand: PropTypes.string,
|
|
deleteCommand: PropTypes.string,
|
|
commitCommand: PropTypes.string,
|
|
cancelCommand: PropTypes.string
|
|
})
|
|
};
|
|
|
|
TableEditColumn$1.defaultProps = {
|
|
messages: {}
|
|
};
|
|
|
|
var styles$24 = function styles$$1(theme) {
|
|
return {
|
|
cell: {
|
|
paddingRight: theme.spacing.unit,
|
|
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,
|
|
row = _ref.row,
|
|
tableRow = _ref.tableRow,
|
|
tableColumn = _ref.tableColumn,
|
|
className = _ref.className,
|
|
restProps = objectWithoutProperties(_ref, ['column', 'value', 'onValueChange', 'style', 'classes', 'children', 'row', 'tableRow', 'tableColumn', 'className']);
|
|
|
|
var inputClasses = classNames(defineProperty({}, classes.inputRight, tableColumn && tableColumn.align === 'right'));
|
|
|
|
return React.createElement(
|
|
TableCell,
|
|
_extends({
|
|
className: classNames(classes.cell, className),
|
|
style: style
|
|
}, restProps),
|
|
children || React.createElement(Input, {
|
|
className: classes.inputRoot,
|
|
classes: { input: inputClasses },
|
|
value: value || '',
|
|
onChange: function onChange(e) {
|
|
return onValueChange(e.target.value);
|
|
}
|
|
})
|
|
);
|
|
};
|
|
|
|
EditCellBase.propTypes = {
|
|
column: PropTypes.object,
|
|
row: PropTypes.object,
|
|
tableRow: PropTypes.object,
|
|
tableColumn: 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)]),
|
|
className: PropTypes.string
|
|
};
|
|
|
|
EditCellBase.defaultProps = {
|
|
column: undefined,
|
|
row: undefined,
|
|
tableRow: undefined,
|
|
tableColumn: undefined,
|
|
value: '',
|
|
style: {},
|
|
children: undefined,
|
|
className: undefined
|
|
};
|
|
|
|
var EditCell = withStyles(styles$24, { name: 'EditCell' })(EditCellBase);
|
|
|
|
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() {
|
|
return React.createElement(TableEditRow, _extends({
|
|
cellComponent: EditCell,
|
|
rowComponent: TableRow$1
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return TableEditRow$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableEditRow$1.Cell = EditCell;
|
|
TableEditRow$1.Row = TableRow$1;
|
|
|
|
var EmptyMessage = function EmptyMessage(_ref) {
|
|
var getMessage = _ref.getMessage,
|
|
restProps = objectWithoutProperties(_ref, ['getMessage']);
|
|
return React.createElement(
|
|
Toolbar$1,
|
|
restProps,
|
|
React.createElement(
|
|
Typography,
|
|
null,
|
|
getMessage('noColumns')
|
|
)
|
|
);
|
|
};
|
|
|
|
EmptyMessage.propTypes = {
|
|
getMessage: PropTypes.func.isRequired
|
|
};
|
|
|
|
var defaultMessages$8 = {
|
|
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(TableColumnVisibility, _extends({
|
|
emptyMessageComponent: EmptyMessage,
|
|
messages: _extends({}, defaultMessages$8, messages)
|
|
}, restProps));
|
|
}
|
|
}]);
|
|
return TableColumnVisibility$$1;
|
|
}(React.PureComponent);
|
|
|
|
TableColumnVisibility$1.EmptyMessage = EmptyMessage;
|
|
|
|
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 TableContainer$1 = function TableContainer(_ref) {
|
|
var onOver = _ref.onOver,
|
|
onLeave = _ref.onLeave,
|
|
onDrop = _ref.onDrop,
|
|
children = _ref.children;
|
|
return React.createElement(
|
|
DropTarget,
|
|
{
|
|
onOver: onOver,
|
|
onLeave: onLeave,
|
|
onDrop: onDrop
|
|
},
|
|
children
|
|
);
|
|
};
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
var ReorderingRow = function ReorderingRow(_ref2) {
|
|
var style = _ref2.style,
|
|
restParams = objectWithoutProperties(_ref2, ['style']);
|
|
return React.createElement(TableRow$1, _extends({
|
|
style: _extends({}, style, {
|
|
visibility: 'hidden'
|
|
})
|
|
}, restParams));
|
|
};
|
|
|
|
var TableColumnReordering$1 = function TableColumnReordering$$1(props) {
|
|
return React.createElement(TableColumnReordering, _extends({
|
|
tableContainerComponent: TableContainer$1,
|
|
rowComponent: ReorderingRow,
|
|
cellComponent: TableReorderingCell
|
|
}, 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(TableColumnResizing, this.props);
|
|
}
|
|
}]);
|
|
return TableColumnResizing$$1;
|
|
}(React.PureComponent);
|
|
|
|
var styles$25 = function styles$$1(theme) {
|
|
return {
|
|
toolbar: {
|
|
borderBottom: getBorderColor(theme)
|
|
}
|
|
};
|
|
};
|
|
|
|
var ToolbarBase = function ToolbarBase(_ref) {
|
|
var children = _ref.children,
|
|
classes = _ref.classes,
|
|
className = _ref.className,
|
|
style = _ref.style,
|
|
restProps = objectWithoutProperties(_ref, ['children', 'classes', 'className', 'style']);
|
|
return React.createElement(
|
|
Toolbar$1,
|
|
_extends({
|
|
style: style,
|
|
className: classNames(classes.toolbar, className)
|
|
}, restProps),
|
|
children
|
|
);
|
|
};
|
|
|
|
ToolbarBase.propTypes = {
|
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
classes: PropTypes.object.isRequired,
|
|
className: PropTypes.string,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
ToolbarBase.defaultProps = {
|
|
className: undefined,
|
|
style: null
|
|
};
|
|
|
|
var Toolbar$3 = withStyles(styles$25, { name: 'Toolbar' })(ToolbarBase);
|
|
|
|
var FlexibleSpace = function FlexibleSpace() {
|
|
return React.createElement('div', { style: { flex: '0 0 0', marginLeft: 'auto' } });
|
|
};
|
|
|
|
var Toolbar$2 = function (_React$PureComponent) {
|
|
inherits(Toolbar$$1, _React$PureComponent);
|
|
|
|
function Toolbar$$1() {
|
|
classCallCheck(this, Toolbar$$1);
|
|
return possibleConstructorReturn(this, (Toolbar$$1.__proto__ || Object.getPrototypeOf(Toolbar$$1)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Toolbar$$1, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(Toolbar, _extends({
|
|
rootComponent: Toolbar$3,
|
|
flexibleSpaceComponent: FlexibleSpace
|
|
}, this.props));
|
|
}
|
|
}]);
|
|
return Toolbar$$1;
|
|
}(React.PureComponent);
|
|
|
|
Toolbar$2.Root = Toolbar$3;
|
|
|
|
export { Grid$1 as Grid, ColumnChooser$1 as ColumnChooser, DragDropProvider$1 as DragDropProvider, PagingPanel$1 as PagingPanel, GroupingPanel$1 as GroupingPanel, TableRowDetail$1 as TableRowDetail, TableGroupRow$1 as TableGroupRow, TableSelection$1 as TableSelection, Table$1 as Table, VirtualTable, TableFilterRow$1 as TableFilterRow, TableHeaderRow$1 as TableHeaderRow, TableEditColumn$1 as TableEditColumn, TableEditRow$1 as TableEditRow, TableColumnVisibility$1 as TableColumnVisibility, TableColumnReordering$1 as TableColumnReordering, TableColumnResizing$1 as TableColumnResizing, Toolbar$2 as Toolbar };
|
|
//# sourceMappingURL=dx-react-grid-material-ui.es.js.map
|