react-bootstrap-table-2
Version:
It's a react table for bootstrap
466 lines (405 loc) • 19 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 _util = require('./util');
var _util2 = _interopRequireDefault(_util);
var _Const = require('./Const');
var _Const2 = _interopRequireDefault(_Const);
var _TableRow = require('./TableRow');
var _TableRow2 = _interopRequireDefault(_TableRow);
var _TableColumn = require('./TableColumn');
var _TableColumn2 = _interopRequireDefault(_TableColumn);
var _TableEditColumn = require('./TableEditColumn');
var _TableEditColumn2 = _interopRequireDefault(_TableEditColumn);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _ExpandComponent = require('./ExpandComponent');
var _ExpandComponent2 = _interopRequireDefault(_ExpandComponent);
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 isFun = function isFun(obj) {
return obj && typeof obj === 'function';
};
var TableBody = function (_Component) {
_inherits(TableBody, _Component);
function TableBody(props) {
_classCallCheck(this, TableBody);
var _this = _possibleConstructorReturn(this, (TableBody.__proto__ || Object.getPrototypeOf(TableBody)).call(this, props));
_this.handleRowMouseOut = function () {
return _this.__handleRowMouseOut__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleRowMouseOver = function () {
return _this.__handleRowMouseOver__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleRowMouseDown = function () {
return _this.__handleRowMouseDown__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleRowContextMenu = function () {
return _this.__handleRowContextMenu__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleRowClick = function () {
return _this.__handleRowClick__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleRowDoubleClick = function () {
return _this.__handleRowDoubleClick__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleSelectRow = function () {
return _this.__handleSelectRow__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleSelectRowColumChange = function () {
return _this.__handleSelectRowColumChange__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleClickCell = function () {
return _this.__handleClickCell__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleEditCell = function () {
return _this.__handleEditCell__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.handleCompleteEditCell = function () {
return _this.__handleCompleteEditCell__REACT_HOT_LOADER__.apply(_this, arguments);
};
_this.state = {
currEditCell: null
};
return _this;
}
_createClass(TableBody, [{
key: 'render',
value: function render() {
var _props = this.props,
cellEdit = _props.cellEdit,
beforeShowError = _props.beforeShowError;
var tableClasses = (0, _classnames2.default)('table', {
'table-striped': this.props.striped,
'table-bordered': this.props.bordered,
'table-hover': this.props.hover,
'table-condensed': this.props.condensed
}, this.props.tableBodyClass);
var noneditableRows = cellEdit.nonEditableRows && cellEdit.nonEditableRows() || [];
var unselectable = this.props.selectRow.unselectable || [];
var isSelectRowDefined = this._isSelectRowDefined();
var tableHeader = _util2.default.renderColGroup(this.props.columns, this.props.selectRow, 'header');
var inputType = this.props.selectRow.mode === _Const2.default.ROW_SELECT_SINGLE ? 'radio' : 'checkbox';
var CustomComponent = this.props.selectRow.customComponent;
var expandColSpan = this.props.columns.filter(function (col) {
return !col.hidden;
}).length;
if (isSelectRowDefined && !this.props.selectRow.hideSelectColumn) {
expandColSpan += 1;
}
var tableRows = this.props.data.map(function (data, r) {
var tableColumns = this.props.columns.map(function (column, i) {
var fieldValue = data[column.name];
if (column.name !== this.props.keyField && // Key field can't be edit
column.editable && // column is editable? default is true, user can set it false
this.state.currEditCell !== null && this.state.currEditCell.rid === r && this.state.currEditCell.cid === i && noneditableRows.indexOf(data[this.props.keyField]) === -1) {
var editable = column.editable;
var format = column.format ? function (value) {
return column.format(value, data, column.formatExtraData, r).replace(/<.*?>/g, '');
} : false;
if (isFun(column.editable)) {
editable = column.editable(fieldValue, data, r, i);
}
return _react2.default.createElement(_TableEditColumn2.default, {
completeEdit: this.handleCompleteEditCell
// add by bluespring for column editor customize
, editable: editable,
customEditor: column.customEditor,
format: column.format ? format : false,
key: i,
blurToSave: cellEdit.blurToSave,
rowIndex: r,
colIndex: i,
row: data,
fieldValue: fieldValue,
className: column.editClassName,
invalidColumnClassName: column.invalidEditColumnClassName,
beforeShowError: beforeShowError });
} else {
// add by bluespring for className customize
var columnChild = fieldValue && fieldValue.toString();
var columnTitle = null;
var tdClassName = column.className;
if (isFun(column.className)) {
tdClassName = column.className(fieldValue, data, r, i);
}
if (typeof column.format !== 'undefined') {
var formattedValue = column.format(fieldValue, data, column.formatExtraData, r);
if (!_react2.default.isValidElement(formattedValue)) {
columnChild = _react2.default.createElement('div', { dangerouslySetInnerHTML: { __html: formattedValue } });
} else {
columnChild = formattedValue;
columnTitle = column.columnTitle && formattedValue ? formattedValue.toString() : null;
}
} else {
columnTitle = column.columnTitle && fieldValue ? fieldValue.toString() : null;
}
return _react2.default.createElement(
_TableColumn2.default,
{ key: i,
rIndex: r,
dataAlign: column.align,
className: tdClassName,
columnTitle: columnTitle,
cellEdit: cellEdit,
hidden: column.hidden,
onEdit: this.handleEditCell,
width: column.width,
onClick: this.handleClickCell,
attrs: column.attrs },
columnChild
);
}
}, this);
var key = data[this.props.keyField];
var disable = unselectable.indexOf(key) !== -1;
var selected = this.props.selectedRowKeys.indexOf(key) !== -1;
var selectRowColumn = isSelectRowDefined && !this.props.selectRow.hideSelectColumn ? this.renderSelectRowColumn(selected, inputType, disable, CustomComponent, r) : null;
// add by bluespring for className customize
var trClassName = this.props.trClassName;
if (isFun(this.props.trClassName)) {
trClassName = this.props.trClassName(data, r);
}
var result = [_react2.default.createElement(
_TableRow2.default,
{ isSelected: selected, key: key, className: trClassName,
index: r,
selectRow: isSelectRowDefined ? this.props.selectRow : undefined,
enableCellEdit: cellEdit.mode !== _Const2.default.CELL_EDIT_NONE,
onRowClick: this.handleRowClick,
onRowDoubleClick: this.handleRowDoubleClick,
onRowMouseOver: this.handleRowMouseOver,
onRowMouseOut: this.handleRowMouseOut,
onRowMouseDown: this.handleRowMouseDown,
onRowContextMenu: this.handleRowContextMenu,
onSelectRow: this.handleSelectRow,
unselectableRow: disable },
selectRowColumn,
tableColumns
)];
if (this.props.expandableRow && this.props.expandableRow(data)) {
result.push(_react2.default.createElement(
_ExpandComponent2.default,
{
className: trClassName,
bgColor: this.props.expandRowBgColor || this.props.selectRow.bgColor || undefined,
hidden: !(this.props.expanding.indexOf(key) > -1),
colSpan: expandColSpan,
width: "100%" },
this.props.expandComponent(data)
));
}
return result;
}, this);
if (tableRows.length === 0 && !this.props.withoutNoDataText) {
tableRows.push(_react2.default.createElement(
_TableRow2.default,
{ key: '##table-empty##' },
_react2.default.createElement(
'td',
{ 'data-toggle': 'collapse',
colSpan: this.props.columns.length + (isSelectRowDefined ? 1 : 0),
className: 'react-bs-table-no-data' },
this.props.noDataText || _Const2.default.NO_DATA_TEXT
)
));
}
return _react2.default.createElement(
'div',
{ ref: 'container',
className: (0, _classnames2.default)('react-bs-container-body', this.props.bodyContainerClass),
style: this.props.style },
_react2.default.createElement(
'table',
{ className: tableClasses },
_react2.default.cloneElement(tableHeader, { ref: 'header' }),
_react2.default.createElement(
'tbody',
{ ref: 'tbody' },
tableRows
)
)
);
}
}, {
key: '__handleRowMouseOut__REACT_HOT_LOADER__',
value: function __handleRowMouseOut__REACT_HOT_LOADER__(rowIndex, event) {
var targetRow = this.props.data[rowIndex];
this.props.onRowMouseOut(targetRow, event);
}
}, {
key: '__handleRowMouseOver__REACT_HOT_LOADER__',
value: function __handleRowMouseOver__REACT_HOT_LOADER__(rowIndex, event) {
var targetRow = this.props.data[rowIndex];
this.props.onRowMouseOver(targetRow, event);
}
}, {
key: '__handleRowMouseDown__REACT_HOT_LOADER__',
value: function __handleRowMouseDown__REACT_HOT_LOADER__(rowIndex, event) {
var targetRow = this.props.data[rowIndex];
this.props.onRowMouseDown(targetRow, event);
}
}, {
key: '__handleRowContextMenu__REACT_HOT_LOADER__',
value: function __handleRowContextMenu__REACT_HOT_LOADER__(rowIndex, event) {
var targetRow = this.props.data[rowIndex];
this.props.onRowContextMenu(targetRow, event);
}
}, {
key: '__handleRowClick__REACT_HOT_LOADER__',
value: function __handleRowClick__REACT_HOT_LOADER__(rowIndex) {
this.props.onRowClick(this.props.data[rowIndex - 1]);
}
}, {
key: '__handleRowDoubleClick__REACT_HOT_LOADER__',
value: function __handleRowDoubleClick__REACT_HOT_LOADER__(rowIndex) {
var onRowDoubleClick = this.props.onRowDoubleClick;
var targetRow = this.props.data[rowIndex];
onRowDoubleClick(targetRow);
}
}, {
key: '__handleSelectRow__REACT_HOT_LOADER__',
value: function __handleSelectRow__REACT_HOT_LOADER__(rowIndex, isSelected, e) {
var selectedRow = void 0;
var _props2 = this.props,
data = _props2.data,
onSelectRow = _props2.onSelectRow;
data.forEach(function (row, i) {
if (i === rowIndex - 1) {
selectedRow = row;
return false;
}
});
onSelectRow(selectedRow, isSelected, e);
}
}, {
key: '__handleSelectRowColumChange__REACT_HOT_LOADER__',
value: function __handleSelectRowColumChange__REACT_HOT_LOADER__(e, rowIndex) {
if (!this.props.selectRow.clickToSelect || !this.props.selectRow.clickToSelectAndEditCell) {
this.handleSelectRow(rowIndex + 1, e.currentTarget.checked, e);
}
}
}, {
key: '__handleClickCell__REACT_HOT_LOADER__',
value: function __handleClickCell__REACT_HOT_LOADER__(rowIndex, columnIndex) {
var _this2 = this;
var _props3 = this.props,
columns = _props3.columns,
keyField = _props3.keyField,
expandBy = _props3.expandBy,
expandableRow = _props3.expandableRow,
clickToExpand = _props3.selectRow.clickToExpand;
var selectRowAndExpand = this._isSelectRowDefined() && !clickToExpand ? false : true;
if (expandableRow && selectRowAndExpand && (expandBy === _Const2.default.EXPAND_BY_ROW || expandBy === _Const2.default.EXPAND_BY_COL && columns[columnIndex].expandable)) {
(function () {
var rowKey = _this2.props.data[rowIndex - 1][keyField];
var expanding = _this2.props.expanding;
if (expanding.indexOf(rowKey) > -1) {
expanding = expanding.filter(function (k) {
return k !== rowKey;
});
} else {
expanding.push(rowKey);
}
_this2.props.onExpand(expanding);
})();
}
}
}, {
key: '__handleEditCell__REACT_HOT_LOADER__',
value: function __handleEditCell__REACT_HOT_LOADER__(rowIndex, columnIndex, e) {
if (this._isSelectRowDefined()) {
columnIndex--;
if (this.props.selectRow.hideSelectColumn) columnIndex++;
}
rowIndex--;
var stateObj = {
currEditCell: {
rid: rowIndex,
cid: columnIndex
}
};
if (this.props.selectRow.clickToSelectAndEditCell && this.props.cellEdit.mode !== _Const2.default.CELL_EDIT_DBCLICK) {
var selected = this.props.selectedRowKeys.indexOf(this.props.data[rowIndex][this.props.keyField]) !== -1;
this.handleSelectRow(rowIndex + 1, !selected, e);
}
this.setState(stateObj);
}
}, {
key: '__handleCompleteEditCell__REACT_HOT_LOADER__',
value: function __handleCompleteEditCell__REACT_HOT_LOADER__(newVal, rowIndex, columnIndex) {
this.setState({ currEditCell: null });
if (newVal !== null) {
this.props.cellEdit.__onCompleteEdit__(newVal, rowIndex, columnIndex);
}
}
}, {
key: 'renderSelectRowColumn',
value: function renderSelectRowColumn(selected, inputType, disabled) {
var _this3 = this;
var CustomComponent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var rowIndex = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
return _react2.default.createElement(
_TableColumn2.default,
{ dataAlign: 'center' },
CustomComponent ? _react2.default.createElement(CustomComponent, { type: inputType, checked: selected, disabled: disabled,
rowIndex: rowIndex,
onChange: function onChange(e) {
return _this3.handleSelectRowColumChange(e, rowIndex);
} }) : _react2.default.createElement('input', { type: inputType, checked: selected, disabled: disabled,
onChange: function onChange(e) {
return _this3.handleSelectRowColumChange(e, rowIndex);
} })
);
}
}, {
key: '_isSelectRowDefined',
value: function _isSelectRowDefined() {
return this.props.selectRow.mode === _Const2.default.ROW_SELECT_SINGLE || this.props.selectRow.mode === _Const2.default.ROW_SELECT_MULTI;
}
}]);
return TableBody;
}(_react.Component);
TableBody.propTypes = {
data: _react.PropTypes.array,
columns: _react.PropTypes.array,
striped: _react.PropTypes.bool,
bordered: _react.PropTypes.bool,
hover: _react.PropTypes.bool,
condensed: _react.PropTypes.bool,
keyField: _react.PropTypes.string,
selectedRowKeys: _react.PropTypes.array,
onRowClick: _react.PropTypes.func,
onRowDoubleClick: _react.PropTypes.func,
onSelectRow: _react.PropTypes.func,
noDataText: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]),
withoutNoDataText: _react.PropTypes.bool,
style: _react.PropTypes.object,
tableBodyClass: _react.PropTypes.string,
bodyContainerClass: _react.PropTypes.string,
expandableRow: _react.PropTypes.func,
expandComponent: _react.PropTypes.func,
expandRowBgColor: _react.PropTypes.string,
expandBy: _react.PropTypes.string,
expanding: _react.PropTypes.array,
onExpand: _react.PropTypes.func,
beforeShowError: _react.PropTypes.func
};
var _default = TableBody;
exports.default = _default;
;
var _temp = function () {
if (typeof __REACT_HOT_LOADER__ === 'undefined') {
return;
}
__REACT_HOT_LOADER__.register(isFun, 'isFun', '/Users/kkomarov/work/react-bootstrap-table/src/TableBody.js');
__REACT_HOT_LOADER__.register(TableBody, 'TableBody', '/Users/kkomarov/work/react-bootstrap-table/src/TableBody.js');
__REACT_HOT_LOADER__.register(_default, 'default', '/Users/kkomarov/work/react-bootstrap-table/src/TableBody.js');
}();
;