fix demo
This commit is contained in:
Boyuzhou
parent
c41fd2efe6
commit
31075b65f7
29
README.md
29
README.md
|
|
@ -22,6 +22,35 @@ some description...
|
|||
## 使用方法
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||
{
|
||||
title: '操作', dataIndex: '', key: 'd', render() {
|
||||
return <a href="#">一些操作</a>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||
];
|
||||
|
||||
class Demo extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
className: _react.PropTypes.string,
|
||||
colSpan: _react.PropTypes.number,
|
||||
title: _react.PropTypes.node,
|
||||
dataIndex: _react.PropTypes.string,
|
||||
width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
|
||||
fixed: _react.PropTypes.oneOf([true, 'left', 'right']),
|
||||
render: _react.PropTypes.func,
|
||||
onCellClick: _react.PropTypes.func
|
||||
};
|
||||
|
||||
var Column = function (_Component) {
|
||||
_inherits(Column, _Component);
|
||||
|
||||
function Column() {
|
||||
_classCallCheck(this, Column);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
||||
}
|
||||
|
||||
return Column;
|
||||
}(_react.Component);
|
||||
|
||||
Column.propTypes = propTypes;
|
||||
|
||||
exports["default"] = Column;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var ColumnGroup = function (_Component) {
|
||||
_inherits(ColumnGroup, _Component);
|
||||
|
||||
function ColumnGroup() {
|
||||
_classCallCheck(this, ColumnGroup);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
||||
}
|
||||
|
||||
return ColumnGroup;
|
||||
}(_react.Component);
|
||||
|
||||
ColumnGroup.propTypes = {
|
||||
title: _react.PropTypes.node
|
||||
};
|
||||
exports["default"] = ColumnGroup;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
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 _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _Column = require('./Column');
|
||||
|
||||
var _Column2 = _interopRequireDefault(_Column);
|
||||
|
||||
var _ColumnGroup = require('./ColumnGroup');
|
||||
|
||||
var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
//行控制管理
|
||||
|
||||
var ColumnManager = function () {
|
||||
function ColumnManager(columns, elements) {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
this._cached = {};
|
||||
|
||||
this.columns = columns || this.normalize(elements);
|
||||
}
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
|
||||
var _this = this;
|
||||
|
||||
return this._cache('isAnyColumnsFixed', function () {
|
||||
return _this.columns.some(function (column) {
|
||||
return !!column.fixed;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsLeftFixed = function isAnyColumnsLeftFixed() {
|
||||
var _this2 = this;
|
||||
|
||||
return this._cache('isAnyColumnsLeftFixed', function () {
|
||||
return _this2.columns.some(function (column) {
|
||||
return column.fixed === 'left' || column.fixed === true;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsRightFixed = function isAnyColumnsRightFixed() {
|
||||
var _this3 = this;
|
||||
|
||||
return this._cache('isAnyColumnsRightFixed', function () {
|
||||
return _this3.columns.some(function (column) {
|
||||
return column.fixed === 'right';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leftColumns = function leftColumns() {
|
||||
var _this4 = this;
|
||||
|
||||
return this._cache('leftColumns', function () {
|
||||
return _this4.groupedColumns().filter(function (column) {
|
||||
return column.fixed === 'left' || column.fixed === true;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.rightColumns = function rightColumns() {
|
||||
var _this5 = this;
|
||||
|
||||
return this._cache('rightColumns', function () {
|
||||
return _this5.groupedColumns().filter(function (column) {
|
||||
return column.fixed === 'right';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
var _this6 = this;
|
||||
|
||||
return this._cache('leafColumns', function () {
|
||||
return _this6._leafColumns(_this6.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() {
|
||||
var _this7 = this;
|
||||
|
||||
return this._cache('leftLeafColumns', function () {
|
||||
return _this7._leafColumns(_this7.leftColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() {
|
||||
var _this8 = this;
|
||||
|
||||
return this._cache('rightLeafColumns', function () {
|
||||
return _this8._leafColumns(_this8.rightColumns());
|
||||
});
|
||||
};
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
|
||||
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns() {
|
||||
var _this9 = this;
|
||||
|
||||
return this._cache('groupedColumns', function () {
|
||||
var _groupColumns = function _groupColumns(columns) {
|
||||
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var parentColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
var rows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
||||
|
||||
// track how many rows we got
|
||||
rows[currentRow] = rows[currentRow] || [];
|
||||
var grouped = [];
|
||||
var setRowSpan = function setRowSpan(column) {
|
||||
var rowSpan = rows.length - currentRow;
|
||||
if (column && !column.children && // parent columns are supposed to be one row
|
||||
rowSpan > 1 && (!column.rowSpan || column.rowSpan < rowSpan)) {
|
||||
column.rowSpan = rowSpan;
|
||||
}
|
||||
};
|
||||
columns.forEach(function (column, index) {
|
||||
var newColumn = _extends({}, column);
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows);
|
||||
parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan;
|
||||
} else {
|
||||
parentColumn.colSpan++;
|
||||
}
|
||||
// update rowspan to all same row columns
|
||||
for (var i = 0; i < rows[currentRow].length - 1; ++i) {
|
||||
setRowSpan(rows[currentRow][i]);
|
||||
}
|
||||
// last column, update rowspan immediately
|
||||
if (index + 1 === columns.length) {
|
||||
setRowSpan(newColumn);
|
||||
}
|
||||
grouped.push(newColumn);
|
||||
});
|
||||
return grouped;
|
||||
};
|
||||
return _groupColumns(_this9.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.normalize = function normalize(elements) {
|
||||
var _this10 = this;
|
||||
|
||||
var columns = [];
|
||||
_react2["default"].Children.forEach(elements, function (element) {
|
||||
if (!_this10.isColumnElement(element)) return;
|
||||
var column = _extends({}, element.props);
|
||||
if (element.key) {
|
||||
column.key = element.key;
|
||||
}
|
||||
if (element.type === _ColumnGroup2["default"]) {
|
||||
column.children = _this10.normalize(column.children);
|
||||
}
|
||||
columns.push(column);
|
||||
});
|
||||
return columns;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.isColumnElement = function isColumnElement(element) {
|
||||
return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
|
||||
};
|
||||
|
||||
ColumnManager.prototype.reset = function reset(columns, elements) {
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this._cached = {};
|
||||
};
|
||||
|
||||
ColumnManager.prototype._cache = function _cache(name, fn) {
|
||||
if (name in this._cached) {
|
||||
return this._cached[name];
|
||||
}
|
||||
this._cached[name] = fn();
|
||||
return this._cached[name];
|
||||
};
|
||||
|
||||
ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
|
||||
var _this11 = this;
|
||||
|
||||
var leafColumns = [];
|
||||
columns.forEach(function (column) {
|
||||
if (!column.children) {
|
||||
leafColumns.push(column);
|
||||
} else {
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this11._leafColumns(column.children)));
|
||||
}
|
||||
});
|
||||
return leafColumns;
|
||||
};
|
||||
|
||||
return ColumnManager;
|
||||
}();
|
||||
|
||||
exports["default"] = ColumnManager;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _shallowequal = require('shallowequal');
|
||||
|
||||
var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
record: _react.PropTypes.object,
|
||||
clsPrefix: _react.PropTypes.string,
|
||||
expandable: _react.PropTypes.any,
|
||||
expanded: _react.PropTypes.bool,
|
||||
needIndentSpaced: _react.PropTypes.bool,
|
||||
onExpand: _react.PropTypes.func
|
||||
};
|
||||
|
||||
var ExpandIcon = function (_Component) {
|
||||
_inherits(ExpandIcon, _Component);
|
||||
|
||||
function ExpandIcon(props) {
|
||||
_classCallCheck(this, ExpandIcon);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
}
|
||||
|
||||
ExpandIcon.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
|
||||
return !(0, _shallowequal2["default"])(nextProps, this.props);
|
||||
};
|
||||
|
||||
ExpandIcon.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
expandable = _props.expandable,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
onExpand = _props.onExpand,
|
||||
needIndentSpaced = _props.needIndentSpaced,
|
||||
expanded = _props.expanded,
|
||||
record = _props.record;
|
||||
|
||||
if (expandable) {
|
||||
var expandClassName = expanded ? 'expanded' : 'collapsed';
|
||||
return _react2["default"].createElement('span', {
|
||||
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
|
||||
onClick: function onClick(e) {
|
||||
return onExpand(!expanded, record, e);
|
||||
}
|
||||
});
|
||||
} else if (needIndentSpaced) {
|
||||
return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return ExpandIcon;
|
||||
}(_react.Component);
|
||||
|
||||
;
|
||||
|
||||
ExpandIcon.propTypes = propTypes;
|
||||
|
||||
exports["default"] = ExpandIcon;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,842 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
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 _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _TableRow = require('./TableRow');
|
||||
|
||||
var _TableRow2 = _interopRequireDefault(_TableRow);
|
||||
|
||||
var _TableHeader = require('./TableHeader');
|
||||
|
||||
var _TableHeader2 = _interopRequireDefault(_TableHeader);
|
||||
|
||||
var _utils = require('./utils');
|
||||
|
||||
var _shallowequal = require('shallowequal');
|
||||
|
||||
var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
||||
|
||||
var _addEventListener = require('rc-util/lib/Dom/addEventListener');
|
||||
|
||||
var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
||||
|
||||
var _ColumnManager = require('./ColumnManager');
|
||||
|
||||
var _ColumnManager2 = _interopRequireDefault(_ColumnManager);
|
||||
|
||||
var _createStore = require('./createStore');
|
||||
|
||||
var _createStore2 = _interopRequireDefault(_createStore);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
data: _react.PropTypes.array,
|
||||
expandIconAsCell: _react.PropTypes.bool,
|
||||
defaultExpandAllRows: _react.PropTypes.bool,
|
||||
expandedRowKeys: _react.PropTypes.array,
|
||||
defaultExpandedRowKeys: _react.PropTypes.array,
|
||||
useFixedHeader: _react.PropTypes.bool,
|
||||
columns: _react.PropTypes.array,
|
||||
clsPrefix: _react.PropTypes.string,
|
||||
bodyStyle: _react.PropTypes.object,
|
||||
style: _react.PropTypes.object,
|
||||
//特殊的渲染规则的key值
|
||||
rowKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]),
|
||||
rowClassName: _react.PropTypes.func,
|
||||
expandedRowClassName: _react.PropTypes.func,
|
||||
childrenColumnName: _react.PropTypes.string,
|
||||
onExpand: _react.PropTypes.func,
|
||||
onExpandedRowsChange: _react.PropTypes.func,
|
||||
indentSize: _react.PropTypes.number,
|
||||
onRowClick: _react.PropTypes.func,
|
||||
onRowDoubleClick: _react.PropTypes.func,
|
||||
expandIconColumnIndex: _react.PropTypes.number,
|
||||
//是否显示表头
|
||||
showHeader: _react.PropTypes.bool,
|
||||
title: _react.PropTypes.func,
|
||||
footer: _react.PropTypes.func,
|
||||
emptyText: _react.PropTypes.func,
|
||||
scroll: _react.PropTypes.object,
|
||||
rowRef: _react.PropTypes.func,
|
||||
getBodyWrapper: _react.PropTypes.func,
|
||||
children: _react.PropTypes.node
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
data: [],
|
||||
useFixedHeader: false,
|
||||
expandIconAsCell: false,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
rowKey: 'key',
|
||||
rowClassName: function rowClassName() {
|
||||
return '';
|
||||
},
|
||||
expandedRowClassName: function expandedRowClassName() {
|
||||
return '';
|
||||
},
|
||||
onExpand: function onExpand() {},
|
||||
onExpandedRowsChange: function onExpandedRowsChange() {},
|
||||
onRowClick: function onRowClick() {},
|
||||
onRowDoubleClick: function onRowDoubleClick() {},
|
||||
|
||||
clsPrefix: 'u-table',
|
||||
bodyStyle: {},
|
||||
style: {},
|
||||
childrenColumnName: 'children',
|
||||
indentSize: 15,
|
||||
expandIconColumnIndex: 0,
|
||||
showHeader: true,
|
||||
scroll: {},
|
||||
rowRef: function rowRef() {
|
||||
return null;
|
||||
},
|
||||
getBodyWrapper: function getBodyWrapper(body) {
|
||||
return body;
|
||||
},
|
||||
emptyText: function emptyText() {
|
||||
return 'No Data';
|
||||
}
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
_inherits(Table, _Component);
|
||||
|
||||
function Table(props) {
|
||||
_classCallCheck(this, Table);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children);
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
|
||||
if (props.defaultExpandAllRows) {
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
expandedRowKeys.push(_this.getRowKey(row, i));
|
||||
rows = rows.concat(row[props.childrenColumnName] || []);
|
||||
}
|
||||
} else {
|
||||
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
|
||||
}
|
||||
_this.state = {
|
||||
expandedRowKeys: expandedRowKeys,
|
||||
data: props.data,
|
||||
currentHoverKey: null,
|
||||
scrollPosition: 'left',
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: []
|
||||
};
|
||||
|
||||
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
|
||||
_this.onExpanded = _this.onExpanded.bind(_this);
|
||||
_this.onRowDestroy = _this.onRowDestroy.bind(_this);
|
||||
_this.getRowKey = _this.getRowKey.bind(_this);
|
||||
_this.getExpandedRows = _this.getExpandedRows.bind(_this);
|
||||
_this.getHeader = _this.getHeader.bind(_this);
|
||||
_this.getHeaderRows = _this.getHeaderRows.bind(_this);
|
||||
_this.getExpandedRow = _this.getExpandedRow.bind(_this);
|
||||
_this.getRowsByData = _this.getRowsByData.bind(_this);
|
||||
_this.getRows = _this.getRows.bind(_this);
|
||||
_this.getColGroup = _this.getColGroup.bind(_this);
|
||||
_this.getLeftFixedTable = _this.getLeftFixedTable.bind(_this);
|
||||
_this.getRightFixedTable = _this.getRightFixedTable.bind(_this);
|
||||
_this.getTable = _this.getTable.bind(_this);
|
||||
_this.getTitle = _this.getTitle.bind(_this);
|
||||
_this.getFooter = _this.getFooter.bind(_this);
|
||||
_this.getEmptyText = _this.getEmptyText.bind(_this);
|
||||
_this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
|
||||
_this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
|
||||
_this.resetScrollY = _this.resetScrollY.bind(_this);
|
||||
_this.findExpandedRow = _this.findExpandedRow.bind(_this);
|
||||
_this.isRowExpanded = _this.isRowExpanded.bind(_this);
|
||||
_this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
|
||||
_this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
|
||||
_this.handleRowHover = _this.handleRowHover.bind(_this);
|
||||
|
||||
return _this;
|
||||
}
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
this.resetScrollY();
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
this.setState({
|
||||
data: nextProps.data
|
||||
});
|
||||
if (!nextProps.data || nextProps.data.length === 0) {
|
||||
this.resetScrollY();
|
||||
}
|
||||
}
|
||||
if ('expandedRowKeys' in nextProps) {
|
||||
this.setState({
|
||||
expandedRowKeys: nextProps.expandedRowKeys
|
||||
});
|
||||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns);
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
this.syncFixedTableRowHeight();
|
||||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
|
||||
if (!this.props.expandedRowKeys) {
|
||||
this.setState({ expandedRowKeys: expandedRowKeys });
|
||||
}
|
||||
this.props.onExpandedRowsChange(expandedRowKeys);
|
||||
};
|
||||
|
||||
Table.prototype.onExpanded = function onExpanded(expanded, record, e, index) {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
var info = this.findExpandedRow(record);
|
||||
if (typeof info !== 'undefined' && !expanded) {
|
||||
this.onRowDestroy(record, index);
|
||||
} else if (!info && expanded) {
|
||||
var expandedRows = this.getExpandedRows().concat();
|
||||
expandedRows.push(this.getRowKey(record, index));
|
||||
this.onExpandedRowsChange(expandedRows);
|
||||
}
|
||||
this.props.onExpand(expanded, record);
|
||||
};
|
||||
|
||||
Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex) {
|
||||
var expandedRows = this.getExpandedRows().concat();
|
||||
var rowKey = this.getRowKey(record, rowIndex);
|
||||
var index = -1;
|
||||
expandedRows.forEach(function (r, i) {
|
||||
if (r === rowKey) {
|
||||
index = i;
|
||||
}
|
||||
});
|
||||
if (index !== -1) {
|
||||
expandedRows.splice(index, 1);
|
||||
}
|
||||
this.onExpandedRowsChange(expandedRows);
|
||||
};
|
||||
|
||||
Table.prototype.getRowKey = function getRowKey(record, index) {
|
||||
var rowKey = this.props.rowKey;
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
(0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
|
||||
return key;
|
||||
};
|
||||
|
||||
Table.prototype.getExpandedRows = function getExpandedRows() {
|
||||
return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
||||
};
|
||||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed) {
|
||||
var _props = this.props,
|
||||
showHeader = _props.showHeader,
|
||||
expandIconAsCell = _props.expandIconAsCell,
|
||||
clsPrefix = _props.clsPrefix;
|
||||
|
||||
var rows = this.getHeaderRows(columns);
|
||||
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
rows[0].unshift({
|
||||
key: 'rc-table-expandIconAsCell',
|
||||
className: clsPrefix + '-expand-icon-th',
|
||||
title: '',
|
||||
rowSpan: rows.length
|
||||
});
|
||||
}
|
||||
|
||||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
|
||||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
rows: rows,
|
||||
rowStyle: trStyle
|
||||
}) : null;
|
||||
};
|
||||
|
||||
Table.prototype.getHeaderRows = function getHeaderRows(columns) {
|
||||
var _this2 = this;
|
||||
|
||||
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var rows = arguments[2];
|
||||
|
||||
rows = rows || [];
|
||||
rows[currentRow] = rows[currentRow] || [];
|
||||
|
||||
columns.forEach(function (column) {
|
||||
if (column.rowSpan && rows.length < column.rowSpan) {
|
||||
while (rows.length < column.rowSpan) {
|
||||
rows.push([]);
|
||||
}
|
||||
}
|
||||
var cell = {
|
||||
key: column.key,
|
||||
className: column.className || '',
|
||||
children: column.title
|
||||
};
|
||||
if (column.children) {
|
||||
_this2.getHeaderRows(column.children, currentRow + 1, rows);
|
||||
}
|
||||
if ('colSpan' in column) {
|
||||
cell.colSpan = column.colSpan;
|
||||
}
|
||||
if ('rowSpan' in column) {
|
||||
cell.rowSpan = column.rowSpan;
|
||||
}
|
||||
if (cell.colSpan !== 0) {
|
||||
rows[currentRow].push(cell);
|
||||
}
|
||||
});
|
||||
return rows.filter(function (row) {
|
||||
return row.length > 0;
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
expandIconAsCell = _props2.expandIconAsCell;
|
||||
|
||||
var colCount = void 0;
|
||||
if (fixed === 'left') {
|
||||
colCount = this.columnManager.leftLeafColumns().length;
|
||||
} else if (fixed === 'right') {
|
||||
colCount = this.columnManager.rightLeafColumns().length;
|
||||
} else {
|
||||
colCount = this.columnManager.leafColumns().length;
|
||||
}
|
||||
var columns = [{
|
||||
key: 'extra-row',
|
||||
render: function render() {
|
||||
return {
|
||||
props: {
|
||||
colSpan: colCount
|
||||
},
|
||||
children: fixed !== 'right' ? content : ' '
|
||||
};
|
||||
}
|
||||
}];
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
columns.unshift({
|
||||
key: 'expand-icon-placeholder',
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
}
|
||||
return _react2["default"].createElement(_TableRow2["default"], {
|
||||
columns: columns,
|
||||
visible: visible,
|
||||
className: className,
|
||||
key: key + '-extra-row',
|
||||
clsPrefix: clsPrefix + '-expanded-row',
|
||||
indent: 1,
|
||||
expandable: false,
|
||||
store: this.store
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||
var props = this.props;
|
||||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
var expandRowByClick = props.expandRowByClick;
|
||||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||||
|
||||
var rst = [];
|
||||
var rowClassName = props.rowClassName;
|
||||
var rowRef = props.rowRef;
|
||||
var expandedRowClassName = props.expandedRowClassName;
|
||||
var needIndentSpaced = props.data.some(function (record) {
|
||||
return record[childrenColumnName];
|
||||
});
|
||||
var onRowClick = props.onRowClick;
|
||||
var onRowDoubleClick = props.onRowDoubleClick;
|
||||
|
||||
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var record = data[i];
|
||||
var key = this.getRowKey(record, i);
|
||||
var childrenColumn = record[childrenColumnName];
|
||||
var isRowExpanded = this.isRowExpanded(record, i);
|
||||
var expandedRowContent = void 0;
|
||||
if (expandedRowRender && isRowExpanded) {
|
||||
expandedRowContent = expandedRowRender(record, i, indent);
|
||||
}
|
||||
var className = rowClassName(record, i, indent);
|
||||
|
||||
var onHoverProps = {};
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
}
|
||||
|
||||
var height = fixed && fixedColumnsBodyRowsHeight[i] ? fixedColumnsBodyRowsHeight[i] : null;
|
||||
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
leafColumns = this.columnManager.leftLeafColumns();
|
||||
} else if (fixed === 'right') {
|
||||
leafColumns = this.columnManager.rightLeafColumns();
|
||||
} else {
|
||||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
needIndentSpaced: needIndentSpaced,
|
||||
className: className,
|
||||
record: record,
|
||||
expandIconAsCell: expandIconAsCell,
|
||||
onDestroy: this.onRowDestroy,
|
||||
index: i,
|
||||
visible: visible,
|
||||
expandRowByClick: expandRowByClick,
|
||||
onExpand: this.onExpanded,
|
||||
expandable: childrenColumn || expandedRowRender,
|
||||
expanded: isRowExpanded,
|
||||
clsPrefix: props.clsPrefix + '-row',
|
||||
childrenColumnName: childrenColumnName,
|
||||
columns: leafColumns,
|
||||
expandIconColumnIndex: expandIconColumnIndex,
|
||||
onRowClick: onRowClick,
|
||||
onRowDoubleClick: onRowDoubleClick,
|
||||
height: height
|
||||
}, onHoverProps, {
|
||||
key: key,
|
||||
hoverKey: key,
|
||||
ref: rowRef(record, i, indent),
|
||||
store: this.store
|
||||
})));
|
||||
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
||||
if (expandedRowContent && isRowExpanded) {
|
||||
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
|
||||
}
|
||||
if (childrenColumn) {
|
||||
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
|
||||
}
|
||||
}
|
||||
return rst;
|
||||
};
|
||||
|
||||
Table.prototype.getRows = function getRows(columns, fixed) {
|
||||
return this.getRowsByData(this.state.data, true, 0, columns, fixed);
|
||||
};
|
||||
|
||||
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
||||
var cols = [];
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(_react2["default"].createElement('col', {
|
||||
className: this.props.clsPrefix + '-expand-icon-col',
|
||||
key: 'rc-table-expand-icon-col'
|
||||
}));
|
||||
}
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
leafColumns = this.columnManager.leftLeafColumns();
|
||||
} else if (fixed === 'right') {
|
||||
leafColumns = this.columnManager.rightLeafColumns();
|
||||
} else {
|
||||
leafColumns = this.columnManager.leafColumns();
|
||||
}
|
||||
cols = cols.concat(leafColumns.map(function (c) {
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: c.width, minWidth: c.width } });
|
||||
}));
|
||||
return _react2["default"].createElement(
|
||||
'colgroup',
|
||||
null,
|
||||
cols
|
||||
);
|
||||
};
|
||||
|
||||
Table.prototype.getLeftFixedTable = function getLeftFixedTable() {
|
||||
return this.getTable({
|
||||
columns: this.columnManager.leftColumns(),
|
||||
fixed: 'left'
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.getRightFixedTable = function getRightFixedTable() {
|
||||
return this.getTable({
|
||||
columns: this.columnManager.rightColumns(),
|
||||
fixed: 'right'
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.getTable = function getTable() {
|
||||
var _this3 = this;
|
||||
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var columns = options.columns,
|
||||
fixed = options.fixed;
|
||||
var _props3 = this.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
_props3$scroll = _props3.scroll,
|
||||
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
|
||||
getBodyWrapper = _props3.getBodyWrapper;
|
||||
var useFixedHeader = this.props.useFixedHeader;
|
||||
|
||||
var bodyStyle = _extends({}, this.props.bodyStyle);
|
||||
var headStyle = {};
|
||||
|
||||
var tableClassName = '';
|
||||
if (scroll.x || fixed) {
|
||||
tableClassName = clsPrefix + '-fixed';
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
}
|
||||
|
||||
if (scroll.y) {
|
||||
// maxHeight will make fixed-Table scrolling not working
|
||||
// so we only set maxHeight to body-Table here
|
||||
if (fixed) {
|
||||
bodyStyle.height = bodyStyle.height || scroll.y;
|
||||
} else {
|
||||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
}
|
||||
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
useFixedHeader = true;
|
||||
|
||||
// Add negative margin bottom for scroll bar overflow bug
|
||||
var scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||
if (scrollbarWidth > 0) {
|
||||
(fixed ? bodyStyle : headStyle).marginBottom = '-' + scrollbarWidth + 'px';
|
||||
(fixed ? bodyStyle : headStyle).paddingBottom = '0px';
|
||||
}
|
||||
}
|
||||
|
||||
var renderTable = function renderTable() {
|
||||
var hasHead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||||
var hasBody = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
|
||||
var tableStyle = {};
|
||||
if (!fixed && scroll.x) {
|
||||
// not set width, then use content fixed width
|
||||
if (scroll.x === true) {
|
||||
tableStyle.tableLayout = 'fixed';
|
||||
} else {
|
||||
tableStyle.width = scroll.x;
|
||||
}
|
||||
}
|
||||
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
|
||||
'tbody',
|
||||
{ className: clsPrefix + '-tbody' },
|
||||
_this3.getRows(columns, fixed)
|
||||
)) : null;
|
||||
return _react2["default"].createElement(
|
||||
'table',
|
||||
{ className: tableClassName, style: tableStyle },
|
||||
_this3.getColGroup(columns, fixed),
|
||||
hasHead ? _this3.getHeader(columns, fixed) : null,
|
||||
tableBody
|
||||
);
|
||||
};
|
||||
|
||||
var headTable = void 0;
|
||||
|
||||
if (useFixedHeader) {
|
||||
headTable = _react2["default"].createElement(
|
||||
'div',
|
||||
{
|
||||
className: clsPrefix + '-header',
|
||||
ref: fixed ? null : 'headTable',
|
||||
style: headStyle,
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll
|
||||
},
|
||||
renderTable(true, false)
|
||||
);
|
||||
}
|
||||
|
||||
var BodyTable = _react2["default"].createElement(
|
||||
'div',
|
||||
{
|
||||
className: clsPrefix + '-body',
|
||||
style: bodyStyle,
|
||||
ref: 'bodyTable',
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll
|
||||
},
|
||||
renderTable(!useFixedHeader)
|
||||
);
|
||||
|
||||
if (fixed && columns.length) {
|
||||
var refName = void 0;
|
||||
if (columns[0].fixed === 'left' || columns[0].fixed === true) {
|
||||
refName = 'fixedColumnsBodyLeft';
|
||||
} else if (columns[0].fixed === 'right') {
|
||||
refName = 'fixedColumnsBodyRight';
|
||||
}
|
||||
delete bodyStyle.overflowX;
|
||||
delete bodyStyle.overflowY;
|
||||
BodyTable = _react2["default"].createElement(
|
||||
'div',
|
||||
{
|
||||
className: clsPrefix + '-body-outer',
|
||||
style: _extends({}, bodyStyle)
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{
|
||||
className: clsPrefix + '-body-inner',
|
||||
ref: refName,
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll
|
||||
},
|
||||
renderTable(!useFixedHeader)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
headTable,
|
||||
BodyTable
|
||||
);
|
||||
};
|
||||
|
||||
Table.prototype.getTitle = function getTitle() {
|
||||
var _props4 = this.props,
|
||||
title = _props4.title,
|
||||
clsPrefix = _props4.clsPrefix;
|
||||
|
||||
return title ? _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-title' },
|
||||
title(this.state.data)
|
||||
) : null;
|
||||
};
|
||||
|
||||
Table.prototype.getFooter = function getFooter() {
|
||||
var _props5 = this.props,
|
||||
footer = _props5.footer,
|
||||
clsPrefix = _props5.clsPrefix;
|
||||
|
||||
return footer ? _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-footer' },
|
||||
footer(this.state.data)
|
||||
) : null;
|
||||
};
|
||||
|
||||
Table.prototype.getEmptyText = function getEmptyText() {
|
||||
var _props6 = this.props,
|
||||
emptyText = _props6.emptyText,
|
||||
clsPrefix = _props6.clsPrefix,
|
||||
data = _props6.data;
|
||||
|
||||
return !data.length ? _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-placeholder' },
|
||||
emptyText()
|
||||
) : null;
|
||||
};
|
||||
|
||||
Table.prototype.getHeaderRowStyle = function getHeaderRowStyle(columns, rows) {
|
||||
var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight;
|
||||
|
||||
var headerHeight = fixedColumnsHeadRowsHeight[0];
|
||||
if (headerHeight && columns) {
|
||||
if (headerHeight === 'auto') {
|
||||
return { height: 'auto' };
|
||||
}
|
||||
return { height: headerHeight / rows.length };
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var clsPrefix = this.props.clsPrefix;
|
||||
|
||||
var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
|
||||
var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
||||
return row.getBoundingClientRect().height || 'auto';
|
||||
});
|
||||
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
|
||||
return row.getBoundingClientRect().height || 'auto';
|
||||
});
|
||||
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
|
||||
fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.resetScrollY = function resetScrollY() {
|
||||
if (this.refs.headTable) {
|
||||
this.refs.headTable.scrollLeft = 0;
|
||||
}
|
||||
if (this.refs.bodyTable) {
|
||||
this.refs.bodyTable.scrollLeft = 0;
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||||
var _this4 = this;
|
||||
|
||||
var rows = this.getExpandedRows().filter(function (i) {
|
||||
return i === _this4.getRowKey(record, index);
|
||||
});
|
||||
return rows[0];
|
||||
};
|
||||
|
||||
Table.prototype.isRowExpanded = function isRowExpanded(record, index) {
|
||||
return typeof this.findExpandedRow(record, index) !== 'undefined';
|
||||
};
|
||||
|
||||
Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
|
||||
if (this.scrollTarget !== e.currentTarget) {
|
||||
this.scrollTarget = e.currentTarget;
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
|
||||
// Prevent scrollTop setter trigger onScroll event
|
||||
// http://stackoverflow.com/q/1386696
|
||||
if (e.target !== this.scrollTarget) {
|
||||
return;
|
||||
}
|
||||
var _props$scroll = this.props.scroll,
|
||||
scroll = _props$scroll === undefined ? {} : _props$scroll;
|
||||
var _refs = this.refs,
|
||||
headTable = _refs.headTable,
|
||||
bodyTable = _refs.bodyTable,
|
||||
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
|
||||
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
|
||||
|
||||
if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) {
|
||||
if (e.target === bodyTable && headTable) {
|
||||
headTable.scrollLeft = e.target.scrollLeft;
|
||||
} else if (e.target === headTable && bodyTable) {
|
||||
bodyTable.scrollLeft = e.target.scrollLeft;
|
||||
}
|
||||
if (e.target.scrollLeft === 0) {
|
||||
this.setState({ scrollPosition: 'left' });
|
||||
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
|
||||
this.setState({ scrollPosition: 'right' });
|
||||
} else if (this.state.scrollPosition !== 'middle') {
|
||||
this.setState({ scrollPosition: 'middle' });
|
||||
}
|
||||
}
|
||||
if (scroll.y) {
|
||||
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
|
||||
fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
|
||||
fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if (bodyTable && e.target !== bodyTable) {
|
||||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
}
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
this.lastScrollLeft = e.target.scrollLeft;
|
||||
};
|
||||
|
||||
Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null
|
||||
});
|
||||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
||||
var className = props.clsPrefix;
|
||||
if (props.className) {
|
||||
className += ' ' + props.className;
|
||||
}
|
||||
if (props.useFixedHeader || props.scroll && props.scroll.y) {
|
||||
className += ' ' + clsPrefix + '-fixed-header';
|
||||
}
|
||||
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
||||
|
||||
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style },
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-content' },
|
||||
this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-fixed-left' },
|
||||
this.getLeftFixedTable()
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: isTableScroll ? clsPrefix + '-scroll' : '' },
|
||||
this.getTable({ columns: this.columnManager.groupedColumns() }),
|
||||
this.getEmptyText(),
|
||||
this.getFooter()
|
||||
),
|
||||
this.columnManager.isAnyColumnsRightFixed() && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-fixed-right' },
|
||||
this.getRightFixedTable()
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return Table;
|
||||
}(_react.Component);
|
||||
|
||||
;
|
||||
|
||||
Table.propTypes = propTypes;
|
||||
Table.defaultProps = defaultProps;
|
||||
|
||||
exports["default"] = Table;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _objectPath = require('object-path');
|
||||
|
||||
var _objectPath2 = _interopRequireDefault(_objectPath);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
record: _react.PropTypes.object,
|
||||
clsPrefix: _react.PropTypes.string,
|
||||
index: _react.PropTypes.number,
|
||||
indent: _react.PropTypes.number,
|
||||
indentSize: _react.PropTypes.number,
|
||||
column: _react.PropTypes.object,
|
||||
expandIcon: _react.PropTypes.node
|
||||
};
|
||||
|
||||
var TableCell = function (_Component) {
|
||||
_inherits(TableCell, _Component);
|
||||
|
||||
function TableCell(props) {
|
||||
_classCallCheck(this, TableCell);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
|
||||
_this.handleClick = _this.handleClick.bind(_this);
|
||||
return _this;
|
||||
}
|
||||
|
||||
TableCell.prototype.isInvalidRenderCellText = function isInvalidRenderCellText(text) {
|
||||
return text && !_react2["default"].isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]';
|
||||
};
|
||||
|
||||
TableCell.prototype.handleClick = function handleClick(e) {
|
||||
var _props = this.props,
|
||||
record = _props.record,
|
||||
onCellClick = _props.column.onCellClick;
|
||||
|
||||
if (onCellClick) {
|
||||
onCellClick(record, e);
|
||||
}
|
||||
};
|
||||
|
||||
TableCell.prototype.render = function render() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
indentSize = _props2.indentSize,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
indent = _props2.indent,
|
||||
index = _props2.index,
|
||||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render,
|
||||
_column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
||||
var text = _objectPath2["default"].get(record, dataIndex);
|
||||
var tdProps = void 0;
|
||||
var colSpan = void 0;
|
||||
var rowSpan = void 0;
|
||||
|
||||
if (render) {
|
||||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
}
|
||||
|
||||
var indentText = expandIcon ? _react2["default"].createElement('span', {
|
||||
style: { paddingLeft: indentSize * indent + 'px' },
|
||||
className: clsPrefix + '-indent indent-level-' + indent
|
||||
}) : null;
|
||||
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
colSpan: colSpan,
|
||||
rowSpan: rowSpan,
|
||||
className: className,
|
||||
onClick: this.handleClick
|
||||
},
|
||||
indentText,
|
||||
expandIcon,
|
||||
text
|
||||
);
|
||||
};
|
||||
|
||||
return TableCell;
|
||||
}(_react.Component);
|
||||
|
||||
;
|
||||
|
||||
TableCell.propTypes = propTypes;
|
||||
|
||||
exports["default"] = TableCell;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
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 _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _shallowequal = require('shallowequal');
|
||||
|
||||
var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
clsPrefix: _react.PropTypes.string,
|
||||
rowStyle: _react.PropTypes.object,
|
||||
rows: _react.PropTypes.array
|
||||
};
|
||||
|
||||
var TableHeader = function (_Component) {
|
||||
_inherits(TableHeader, _Component);
|
||||
|
||||
function TableHeader(props) {
|
||||
_classCallCheck(this, TableHeader);
|
||||
|
||||
return _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
}
|
||||
|
||||
TableHeader.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
|
||||
return !(0, _shallowequal2["default"])(nextProps, this.props);
|
||||
};
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
rowStyle = _props.rowStyle,
|
||||
rows = _props.rows;
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'thead',
|
||||
{ className: clsPrefix + '-thead' },
|
||||
rows.map(function (row, index) {
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{ key: index, style: rowStyle },
|
||||
row.map(function (cellProps, i) {
|
||||
return _react2["default"].createElement('th', _extends({}, cellProps, { key: i }));
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return TableHeader;
|
||||
}(_react.Component);
|
||||
|
||||
;
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
||||
exports["default"] = TableHeader;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _TableCell = require('./TableCell');
|
||||
|
||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||
|
||||
var _ExpandIcon = require('./ExpandIcon');
|
||||
|
||||
var _ExpandIcon2 = _interopRequireDefault(_ExpandIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }
|
||||
|
||||
var propTypes = {
|
||||
onDestroy: _react.PropTypes.func,
|
||||
onRowClick: _react.PropTypes.func,
|
||||
onRowDoubleClick: _react.PropTypes.func,
|
||||
record: _react.PropTypes.object,
|
||||
clsPrefix: _react.PropTypes.string,
|
||||
expandIconColumnIndex: _react.PropTypes.number,
|
||||
onHover: _react.PropTypes.func,
|
||||
columns: _react.PropTypes.array,
|
||||
height: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
|
||||
visible: _react.PropTypes.bool,
|
||||
index: _react.PropTypes.number,
|
||||
hoverKey: _react.PropTypes.any,
|
||||
expanded: _react.PropTypes.bool,
|
||||
expandable: _react.PropTypes.any,
|
||||
onExpand: _react.PropTypes.func,
|
||||
needIndentSpaced: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
indent: _react.PropTypes.number,
|
||||
indentSize: _react.PropTypes.number,
|
||||
expandIconAsCell: _react.PropTypes.bool,
|
||||
expandRowByClick: _react.PropTypes.bool,
|
||||
store: _react.PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
onRowClick: function onRowClick() {},
|
||||
onRowDoubleClick: function onRowDoubleClick() {},
|
||||
onDestroy: function onDestroy() {},
|
||||
|
||||
expandIconColumnIndex: 0,
|
||||
expandRowByClick: false,
|
||||
onHover: function onHover() {}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
_inherits(TableRow, _Component);
|
||||
|
||||
function TableRow(props) {
|
||||
_classCallCheck(this, TableRow);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.state = {
|
||||
hovered: false
|
||||
};
|
||||
_this.onRowClick = _this.onRowClick.bind(_this);
|
||||
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
|
||||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||
|
||||
return _this;
|
||||
}
|
||||
|
||||
TableRow.prototype.componentDidMount = function componentDidMount() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
_this2.setState({ hovered: true });
|
||||
} else if (_this2.state.hovered === true) {
|
||||
_this2.setState({ hovered: false });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.onRowClick = function onRowClick(event) {
|
||||
var _props3 = this.props,
|
||||
record = _props3.record,
|
||||
index = _props3.index,
|
||||
onRowClick = _props3.onRowClick,
|
||||
expandable = _props3.expandable,
|
||||
expandRowByClick = _props3.expandRowByClick,
|
||||
expanded = _props3.expanded,
|
||||
onExpand = _props3.onExpand;
|
||||
|
||||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, index);
|
||||
}
|
||||
onRowClick(record, index, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
|
||||
var _props4 = this.props,
|
||||
record = _props4.record,
|
||||
index = _props4.index,
|
||||
onRowDoubleClick = _props4.onRowDoubleClick;
|
||||
|
||||
onRowDoubleClick(record, index, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter() {
|
||||
var _props5 = this.props,
|
||||
onHover = _props5.onHover,
|
||||
hoverKey = _props5.hoverKey;
|
||||
|
||||
onHover(true, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave() {
|
||||
var _props6 = this.props,
|
||||
onHover = _props6.onHover,
|
||||
hoverKey = _props6.hoverKey;
|
||||
|
||||
onHover(false, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var _props7 = this.props,
|
||||
clsPrefix = _props7.clsPrefix,
|
||||
columns = _props7.columns,
|
||||
record = _props7.record,
|
||||
height = _props7.height,
|
||||
visible = _props7.visible,
|
||||
index = _props7.index,
|
||||
expandIconColumnIndex = _props7.expandIconColumnIndex,
|
||||
expandIconAsCell = _props7.expandIconAsCell,
|
||||
expanded = _props7.expanded,
|
||||
expandRowByClick = _props7.expandRowByClick,
|
||||
expandable = _props7.expandable,
|
||||
onExpand = _props7.onExpand,
|
||||
needIndentSpaced = _props7.needIndentSpaced,
|
||||
indent = _props7.indent,
|
||||
indentSize = _props7.indentSize;
|
||||
var className = this.props.className;
|
||||
|
||||
|
||||
if (this.state.hovered) {
|
||||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
|
||||
var cells = [];
|
||||
|
||||
var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], {
|
||||
expandable: expandable,
|
||||
clsPrefix: clsPrefix,
|
||||
onExpand: onExpand,
|
||||
needIndentSpaced: needIndentSpaced,
|
||||
expanded: expanded,
|
||||
record: record
|
||||
});
|
||||
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0) {
|
||||
cells.push(_react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
className: clsPrefix + '-expand-icon-cell',
|
||||
key: 'rc-table-expand-icon-cell'
|
||||
},
|
||||
expandIcon
|
||||
));
|
||||
}
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick ? false : i === expandIconColumnIndex;
|
||||
cells.push(_react2["default"].createElement(_TableCell2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
record: record,
|
||||
indentSize: indentSize,
|
||||
indent: indent,
|
||||
index: index,
|
||||
column: columns[i],
|
||||
key: columns[i].key,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
var style = { height: height };
|
||||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style
|
||||
},
|
||||
cells
|
||||
);
|
||||
};
|
||||
|
||||
return TableRow;
|
||||
}(_react.Component);
|
||||
|
||||
;
|
||||
|
||||
TableRow.propTypes = propTypes;
|
||||
TableRow.defaultProps = defaultProps;
|
||||
|
||||
exports["default"] = TableRow;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
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; };
|
||||
|
||||
exports["default"] = createStore;
|
||||
function createStore(initialState) {
|
||||
var state = initialState;
|
||||
var listeners = [];
|
||||
|
||||
function setState(partial) {
|
||||
state = _extends({}, state, partial);
|
||||
for (var i = 0; i < listeners.length; i++) {
|
||||
listeners[i]();
|
||||
}
|
||||
}
|
||||
|
||||
function getState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
function subscribe(listener) {
|
||||
listeners.push(listener);
|
||||
|
||||
return function unsubscribe() {
|
||||
var index = listeners.indexOf(listener);
|
||||
listeners.splice(index, 1);
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
setState: setState,
|
||||
getState: getState,
|
||||
subscribe: subscribe
|
||||
};
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
transition: opacity 0.3s ease;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
background: #f7f7f7;
|
||||
font-weight: bold;
|
||||
transition: background .3s ease; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table tr {
|
||||
transition: all .3s ease; }
|
||||
.u-table tr:hover {
|
||||
background: rgb(227,242,253); }
|
||||
.u-table tr.tr-row-hover {
|
||||
background: rgb(227,242,253); }
|
||||
.u-table th, .u-table td {
|
||||
padding: 16px 8px; }
|
||||
.u-table-scroll {
|
||||
overflow: auto; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: #f7f7f7; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
.u-table-fixed-header .u-table-body-inner {
|
||||
height: 100%;
|
||||
overflow: scroll; }
|
||||
.u-table-fixed-header .u-table-scroll .u-table-header {
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -20px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box; }
|
||||
.u-table-title {
|
||||
padding: 16px 8px;
|
||||
border-top: 1px solid #e9e9e9; }
|
||||
.u-table-content {
|
||||
position: relative; }
|
||||
.u-table-footer {
|
||||
padding: 16px 8px;
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table-placeholder {
|
||||
padding: 16px 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
.u-table-expand-icon-col {
|
||||
width: 10px; }
|
||||
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
border: 1px solid #e9e9e9;
|
||||
user-select: none;
|
||||
background: #fff; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
content: '.'; }
|
||||
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
|
||||
content: '-'; }
|
||||
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
|
||||
content: '+'; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
.u-table-column-hidden {
|
||||
display: none; }
|
||||
.u-table-prev-columns-page, .u-table-next-columns-page {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
z-index: 1; }
|
||||
.u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {
|
||||
color: #2db7f5; }
|
||||
.u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {
|
||||
cursor: not-allowed;
|
||||
color: #999; }
|
||||
.u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {
|
||||
color: #999; }
|
||||
.u-table-prev-columns-page {
|
||||
margin-right: 8px; }
|
||||
.u-table-prev-columns-page:before {
|
||||
content: '<'; }
|
||||
.u-table-next-columns-page {
|
||||
float: right; }
|
||||
.u-table-next-columns-page:before {
|
||||
content: '>'; }
|
||||
.u-table-fixed-left, .u-table-fixed-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1; }
|
||||
.u-table-fixed-left table, .u-table-fixed-right table {
|
||||
width: auto;
|
||||
background: #fff; }
|
||||
.u-table-fixed-left {
|
||||
left: 0;
|
||||
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
|
||||
.u-table-fixed-left .u-table-fixed-left-body-inner {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px; }
|
||||
.u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
|
||||
padding-right: 0; }
|
||||
.u-table-fixed-right {
|
||||
right: 0;
|
||||
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }
|
||||
.u-table-fixed-right-expanded-row {
|
||||
color: transparent;
|
||||
pointer-events: none; }
|
||||
.u-table .u-table-scroll-position-left .u-table-fixed-left {
|
||||
box-shadow: none; }
|
||||
.u-table .u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
.u-table.bordered th, .u-table.bordered td {
|
||||
border: 1px solid #e9e9e9; }
|
||||
|
||||
.move-enter, .move-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-duration: 2.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused; }
|
||||
|
||||
.move-leave {
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused; }
|
||||
|
||||
.move-enter.move-enter-active, .move-appear.move-enter-active {
|
||||
animation-name: moveLeftIn;
|
||||
animation-play-state: running; }
|
||||
|
||||
.move-leave.move-leave-active {
|
||||
animation-name: moveRightOut;
|
||||
animation-play-state: running; }
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
background: rgb(238,238,238); }
|
||||
20% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
background: rgb(238,238,238); }
|
||||
100% {
|
||||
background: transparent;
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes moveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1; }
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-30px);
|
||||
opacity: 0; } }
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
var Table = require('./Table');
|
||||
var Column = require('./Column');
|
||||
var ColumnGroup = require('./ColumnGroup');
|
||||
|
||||
Table.Column = Column;
|
||||
Table.ColumnGroup = ColumnGroup;
|
||||
|
||||
module.exports = Table;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.measureScrollbar = measureScrollbar;
|
||||
exports.debounce = debounce;
|
||||
exports.warningOnce = warningOnce;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
var scrollbarWidth = void 0;
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
var scrollbarMeasure = {
|
||||
position: 'absolute',
|
||||
top: '-9999px',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
overflow: 'scroll'
|
||||
};
|
||||
|
||||
function measureScrollbar() {
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
if (scrollbarWidth) {
|
||||
return scrollbarWidth;
|
||||
}
|
||||
var scrollDiv = document.createElement('div');
|
||||
for (var scrollProp in scrollbarMeasure) {
|
||||
if (scrollbarMeasure.hasOwnProperty(scrollProp)) {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
}
|
||||
}
|
||||
document.body.appendChild(scrollDiv);
|
||||
var width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
scrollbarWidth = width;
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var warned = {};
|
||||
function warningOnce(condition, format, args) {
|
||||
if (!warned[format]) {
|
||||
(0, _warning2["default"])(condition, format, args);
|
||||
warned[format] = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@
|
|||
@import "../node_modules/bee-button/src/Button.scss";
|
||||
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||
@import "../src/index.scss";
|
||||
@import "../node_modules/bee-dropdown/src/Dropdown.scss";
|
||||
@import "../node_modules/bee-menus/src/Menus.scss";
|
||||
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ class Demo1 extends Component {
|
|||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: {currentData.length} 个元素</div>}
|
||||
footer={currentData => <div>表尾: {currentData.length} 个元素</div>}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 这是标题
|
||||
* @description 这是描述
|
||||
* @title 增删改表格
|
||||
* @description 这是带有增删改功能的表格
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ class EditableCell extends React.Component {
|
|||
this.setState({ editable: true });
|
||||
}
|
||||
handleKeydown = (event) => {
|
||||
console.log(event);
|
||||
console.log(event.keyCode);
|
||||
if(event.keyCode == 13){
|
||||
this.check();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import React, { Component } from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import Table from '../src';
|
||||
import Animate from 'bee-animate';
|
||||
import Menu, { Item, Divider } from 'bee-menus';
|
||||
import DropDown from 'bee-dropdown';
|
||||
import Icon from "bee-icon";
|
||||
import Input from 'bee-form-control';
|
||||
import Popconfirm from 'bee-popconfirm';
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "0.0.1",
|
||||
"version": "0.1.1",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
"bee-icon": "0.0.5",
|
||||
"bee-layout": "latest",
|
||||
"bee-panel": "latest",
|
||||
"bee-popconfirm": "^0.2.1",
|
||||
"bee-popconfirm": "^0.2.2",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"enzyme": "^2.4.1",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
||||
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
||||
|
||||
|
||||
$text-color : #666;
|
||||
$font-size-base : 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue