es6-react-admin-lte
Version:
An AdminLTE Template made to use for React and ES2015-and-so-on
430 lines (398 loc) • 15.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
var _loadStatus = require('../../utilities/load-status.js');
var _loadStatus2 = _interopRequireDefault(_loadStatus);
var _reactBootstrapTable = require('react-bootstrap-table');
var _dataTableButton = require('./data-table-button.js');
var _dataTableButton2 = _interopRequireDefault(_dataTableButton);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var DataTable = function (_React$Component) {
_inherits(DataTable, _React$Component);
function DataTable(props) {
_classCallCheck(this, DataTable);
var _this = _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).call(this, props));
_this.state = {
tableData: _this.props.data,
sortName: undefined,
sortOrder: _this.props.defaultSortOrder,
page: _this.props.page,
pageCount: _this.props.pageCount,
sizePerPage: _this.props.sizePerPage,
tableColumns: []
};
_this.controlsFormatter = _this.controlsFormatter.bind(_this);
_this.chooseDataFormatter = _this.chooseDataFormatter.bind(_this);
_this.onSortChange = _this.onSortChange.bind(_this);
_this.onSearchChange = _this.onSearchChange.bind(_this);
_this.getTableOptions = _this.getTableOptions.bind(_this);
_this.onPageChange = _this.onPageChange.bind(_this);
_this.onSizePerPageList = _this.onSizePerPageList.bind(_this);
_this.loadData = _this.loadData.bind(_this);
_this.columnGenerator = _this.columnGenerator.bind(_this);
return _this;
}
_createClass(DataTable, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.loadData();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
tableData: nextProps.data,
page: nextProps.page,
pageCount: nextProps.pageCount,
sizePerPage: nextProps.sizePerPage
}, this.loadData);
}
}, {
key: 'onSortChange',
value: function onSortChange(sortName, sortOrder) {
if (this.props.onSortChange) {
this.props.onSortChange(sortName, sortOrder);
} else {
this.setState({
sortName: sortName,
sortOrder: sortOrder
});
if (sortOrder === 'asc') {
this.state.tableData.sort(function (a, b) {
if (a[sortName] > b[sortName] || b[sortName] === undefined || b[sortName] === null) {
return 1;
} else if (b[sortName] > a[sortName] || a[sortName] === undefined || a[sortName] === null) {
return -1;
}
return 0;
});
} else {
this.state.tableData.sort(function (a, b) {
if (a[sortName] > b[sortName] || b[sortName] === undefined && a[sortName] !== undefined) {
return -1;
} else if (b[sortName] > a[sortName] || a[sortName] === undefined && b[sortName] !== undefined) {
return 1;
} else {
return 0;
}
});
}
this.setState({
tableData: this.state.tableData
});
}
}
}, {
key: 'onPageChange',
value: function onPageChange(page, sizePerPage) {
this.setState({
page: page,
sizePerPage: sizePerPage
});
}
}, {
key: 'onSizePerPageList',
value: function onSizePerPageList(sizePerPage) {
this.setState({
sizePerPage: sizePerPage
});
}
}, {
key: 'onSearchChange',
value: function onSearchChange(searchText, colInfos, multiColumnSearch) {
var text = searchText.trim();
if (text === '') {
this.setState({
tableData: this.state.tableData
});
return;
}
var searchTextArray = [];
if (multiColumnSearch) {
searchTextArray = text.split(' ');
} else {
searchTextArray.push(text);
}
this.state.tableData.filter(function (data) {
var keys = Object.keys(data);
var valid = false;
for (var i = 0, keysLength = keys.length; i < keysLength; i++) {
var key = keys[i];
if (colInfos[key] && data[key]) {
var _colInfos$key = colInfos[key],
format = _colInfos$key.format,
filterFormatted = _colInfos$key.filterFormatted,
formatExtraData = _colInfos$key.formatExtraData,
searchable = _colInfos$key.searchable,
hidden = _colInfos$key.hidden;
var targetVal = data[key];
if (!hidden && searchable) {
if (filterFormatted && format) {
targetVal = format(targetVal, data, formatExtraData);
}
for (var j = 0, textLength = searchTextArray.length; j < textLength; j++) {
var filterVal = searchTextArray[j].toLowerCase();
if (targetVal.toString().toLowerCase().indexOf(filterVal) !== -1) {
valid = true;
break;
}
}
}
}
}
return valid;
});
this.setState({
tableData: this.state.tableData
});
}
}, {
key: 'columnGenerator',
value: function columnGenerator() {
var _this2 = this;
if (this.state.tableColumns.length === 0) {
var columns = [];
this.state.tableData.forEach(function (data) {
var labels = Object.keys(data);
labels.forEach(function (label) {
if (columns.indexOf(label) === -1) {
if (_this2.props.serialize && label === _this2.props.keyName) {
columns.unshift(label);
} else if (_this2.props.ignoreData.indexOf(label) < 0) {
columns.push(label);
}
}
});
});
this.setState({
tableColumns: columns
});
}
}
}, {
key: 'controlsFormatter',
value: function controlsFormatter(cell, row, formatXtraData, rowId) {
var _this3 = this;
var tableId = this.props.id ? '-' + this.props.id : '';
var betterChildren = _react2.default.Children.map(this.props.children, function (child, i) {
if (child.type === _dataTableButton2.default) {
var newProps = {};
newProps.id = 'data-table-child-button' + tableId + '-' + rowId + '-' + i;
newProps.key = '' + i;
newProps.dataLink = row;
newProps.ignoreData = _this3.props.ignoreData;
return _react2.default.cloneElement(child, newProps);
}
return child;
});
return _react2.default.createElement(
'div',
{ style: { width: '100%', whiteSpace: 'normal', overflowX: 'auto', overflowY: 'hidden' } },
betterChildren
);
}
}, {
key: 'chooseDataFormatter',
value: function chooseDataFormatter(dataName) {
var theFormat = function theFormat(cell) {
return cell;
};
var header = dataName;
var width = 2.75 + dataName.length + 'em';
if (this.props.formats.length > 0) {
this.props.formats.forEach(function (format) {
if (dataName === format.item) {
if (format.toType instanceof Function) {
theFormat = format.toType;
}
if (format.rename) {
header = format.rename;
}
if (format.width) {
width = format.width;
}
}
});
}
return { header: header, width: width, method: theFormat };
}
}, {
key: 'loadData',
value: function loadData() {
var _this4 = this;
var data = this.state.tableData;
if (this.props.serialize) {
data.forEach(function (item, i) {
item[_this4.props.keyName] = i + 1;
});
this.setState({
tableData: data
}, this.columnGenerator);
} else {
this.columnGenerator();
}
}
}, {
key: 'getTableOptions',
value: function getTableOptions() {
var options = {};
options.onSortChange = this.onSortChange;
options.sizePerPage = this.props.sizePerPage;
options.sizePerPageList = this.props.sizePerPageList;
options.totalSize = this.props.totalSize > 0 ? this.props.totalSize : this.state.tableData.length;
options.page = this.state.page;
options.onPageChange = this.props.onPageChange || this.onPageChange;
options.onSearchChange = this.props.onSearchChange || this.onSearchChange;
options.onSizePerPageList = this.props.onSizePerPageList || this.onSizePerPageList;
if (this.props.noDataText) {
options.noDataText = this.props.noDataText;
}
if (this.props.defaultSortOrder) {
options.defaultSortOrder = this.props.defaultSortOrder;
}
if (this.props.hideSizePerPage) {
options.hideSizePerPage = this.props.hideSizePerPage;
}
return options;
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
var tableOptions = this.getTableOptions();
var columns = this.state.tableColumns.map(function (column, i) {
var formatter = _this5.chooseDataFormatter(column);
return _react2.default.createElement(
_reactBootstrapTable.TableHeaderColumn,
{
key: 'column' + i,
dataField: column,
width: formatter.width !== undefined && formatter.width !== null ? formatter.width : '100px',
dataFormat: formatter.method,
dataSort: true
},
formatter.header
);
});
if (this.props.children) {
columns.push(_react2.default.createElement(
_reactBootstrapTable.TableHeaderColumn,
{
key: 'column' + columns.length,
dataField: 'actions',
width: this.props.controlsFormatterWidth || this.props.children.length * 4 + 'em',
dataFormat: this.controlsFormatter
},
'Controls'
));
}
var insertionBtn = Boolean(this.props.insertByPage) && Object.keys(this.props.insertByPage).length > 0 && !this.props.loading ? _react2.default.createElement(_dataTableButton2.default, { readApi: this.props.insertByPage.readApi, theme: 'btn-success btn-table-insertion', icon: 'fa-plus', heading: 'New', action: this.props.insertByPage.action }) : '';
return _react2.default.createElement(
'div',
{ style: { position: 'relative' }, id: this.props.id },
_react2.default.createElement(
_reactBootstrapTable.BootstrapTable,
{
ref: 'table',
remote: this.props.remote,
data: this.state.tableData,
fetchInfo: this.props.remote ? { dataTotalSize: tableOptions.totalSize } : null,
width: '100%',
striped: true,
hover: true,
pagination: this.props.pageCount > 0 || this.props.pagination && this.props.data.length > this.props.sizePerPage,
search: this.props.search || this.props.multiColumnSearch,
searchPlaceholder: 'Search for something',
multiColumnSearch: this.props.multiColumnSearch,
options: tableOptions,
keyField: this.props.keyName
},
columns
),
insertionBtn,
this.props.addMoreButton,
!this.props.loading ? '' : _react2.default.createElement(
'div',
{
id: 'load-status-container',
className: 'text-center align-middle',
style: {
backgroundColor: 'rgba(51, 51, 51, 0.05)',
position: 'absolute',
borderRadius: '5px',
top: 0, right: '10px', bottom: 0, left: '10px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}
},
_react2.default.createElement(_loadStatus2.default, { size: '5em', color: 'rgba(51, 51, 51, 0.5)', spins: true })
)
);
}
}]);
return DataTable;
}(_react2.default.Component);
DataTable.propTypes = {
id: _propTypes2.default.string,
data: _propTypes2.default.array,
keyName: _propTypes2.default.string,
formats: _propTypes2.default.array,
loading: _propTypes2.default.bool,
remote: _propTypes2.default.bool,
pagination: _propTypes2.default.bool,
serialize: _propTypes2.default.bool,
search: _propTypes2.default.bool,
multiColumnSearch: _propTypes2.default.bool,
ignoreData: _propTypes2.default.array,
insertByPage: _propTypes2.default.object,
sizePerPage: _propTypes2.default.number,
totalSize: _propTypes2.default.number,
page: _propTypes2.default.number,
pageCount: _propTypes2.default.number,
onPageChange: _propTypes2.default.func,
onSortChange: _propTypes2.default.func,
onSearchChange: _propTypes2.default.func,
sizePerPageList: _propTypes2.default.array,
onSizePerPageList: _propTypes2.default.func,
defaultSortOrder: _propTypes2.default.string,
hideSizePerPage: _propTypes2.default.bool,
addMoreButton: _propTypes2.default.element,
readApi: _propTypes2.default.string,
noDataText: _propTypes2.default.string,
controlsFormatterWidth: _propTypes2.default.string
};
DataTable.defaultProps = {
data: [],
keyName: 'id',
formats: [],
ignoreData: [],
loading: false,
serialize: false,
search: false,
pagination: false,
remote: false,
multiColumnSearch: false,
sizePerPageList: [5, 10, 20, 50, 100],
page: 1,
pageCount: 0,
sizePerPage: 20,
totalSize: 0,
defaultSortOrder: 'asc',
hideSizePerPage: true,
noDataText: '- No Data Loaded -'
};
exports.default = DataTable;
module.exports = exports['default'];
//# sourceMappingURL=data-table.js.map