d2-ui
Version:
157 lines (136 loc) • 7.25 kB
JavaScript
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(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; }
function _inherits(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; }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import isArrayOfStrings from 'd2-utilizr/lib/isArrayOfStrings';
import isIterable from 'd2-utilizr/lib/isIterable';
import DataTableHeader from './DataTableHeader.component';
import DataTableRow from './DataTableRow.component';
import DataTableContextMenu from './DataTableContextMenu.component';
var DataTable = function (_Component) {
_inherits(DataTable, _Component);
function DataTable() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, DataTable);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DataTable.__proto__ || Object.getPrototypeOf(DataTable)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.getStateFromProps(_this.props), _this.handleRowClick = function (event, rowSource) {
var cmt = event.currentTarget;
_this.setState(function (state) {
return {
contextMenuTarget: cmt,
showContextMenu: true,
activeRow: rowSource !== state.activeRow ? rowSource : undefined
};
});
}, _this.hideContextMenu = function () {
_this.setState({
activeRow: undefined,
showContextMenu: false
});
}, _this.hasContextMenu = function () {
return Object.keys(_this.props.contextMenuActions || {}).length > 1;
}, _this.hasSingleAction = function () {
return Object.keys(_this.props.contextMenuActions || {}).length === 1;
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(DataTable, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
this.setState(this.getStateFromProps(newProps));
}
}, {
key: 'getStateFromProps',
value: function getStateFromProps(props) {
var dataRows = [];
if (isIterable(props.rows)) {
dataRows = props.rows instanceof Map ? Array.from(props.rows.values()) : props.rows;
}
return {
columns: isArrayOfStrings(props.columns) ? props.columns : ['name', 'lastUpdated'],
dataRows: dataRows,
activeRow: undefined
};
}
}, {
key: 'renderRows',
value: function renderRows() {
var _this2 = this;
return this.state.dataRows.map(function (dataRowsSource, dataRowsId) {
return React.createElement(DataTableRow, {
key: dataRowsId,
dataSource: dataRowsSource,
columns: _this2.state.columns,
isActive: _this2.state.activeRow === dataRowsId,
itemClicked: _this2.handleRowClick,
primaryClick: _this2.props.primaryAction || function () {},
contextMenuActions: _this2.props.contextMenuActions,
contextMenuIcons: _this2.props.contextMenuIcons
});
});
}
}, {
key: 'renderHeaders',
value: function renderHeaders() {
return this.state.columns.map(function (headerName, index) {
return React.createElement(DataTableHeader, { key: headerName, isOdd: Boolean(index % 2), name: headerName });
});
}
}, {
key: 'renderContextMenu',
value: function renderContextMenu() {
var _this3 = this;
var actionAccessChecker = this.props.isContextActionAllowed && this.props.isContextActionAllowed.bind(null, this.state.activeRow) || function () {
return true;
};
var actionsToShow = Object.keys(this.props.contextMenuActions || {}).filter(actionAccessChecker).reduce(function (availableActions, actionKey) {
availableActions[actionKey] = _this3.props.contextMenuActions[actionKey]; // eslint-disable-line
return availableActions;
}, {});
return React.createElement(DataTableContextMenu, {
target: this.state.contextMenuTarget,
onRequestClose: this.hideContextMenu,
actions: actionsToShow,
activeItem: this.state.activeRow,
icons: this.props.contextMenuIcons
});
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: 'data-table' },
React.createElement(
'div',
{ className: 'data-table__headers' },
this.renderHeaders(),
(this.hasContextMenu() || this.hasSingleAction()) && React.createElement(
DataTableHeader,
null,
this.props.contextMenuHeader
)
),
React.createElement(
'div',
{ className: 'data-table__rows' },
this.renderRows()
),
this.hasContextMenu() && this.renderContextMenu()
);
}
}]);
return DataTable;
}(Component);
DataTable.propTypes = {
contextMenuActions: PropTypes.object,
contextMenuIcons: PropTypes.object,
primaryAction: PropTypes.func,
isContextActionAllowed: PropTypes.func,
contextMenuHeader: PropTypes.node
};
export default DataTable;