dh-c
Version:
The front-end development engineers jimberton gulp react component
287 lines (239 loc) • 9.85 kB
JavaScript
;
exports.__esModule = 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 _update = require('react/lib/update');
var _update2 = _interopRequireDefault(_update);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _checkbox = require('../checkbox');
var _checkbox2 = _interopRequireDefault(_checkbox);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 EXT_WIDTH = 24;
var Table = function (_Component) {
_inherits(Table, _Component);
function Table(props) {
_classCallCheck(this, Table);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleSortChange = function (field) {
var _sorter;
_this.setState({
sorter: (_sorter = {}, _sorter[field] = _this.state.sorter[field] == 'desc' ? 'asc' : 'desc', _sorter)
}, function () {
if (_this.props.onChange) {
_this.props.onChange(null, null, _this.state.sorter);
}
});
};
_this.handleScroll = function () {
var _this$refs$table = _this.refs.table,
scrollLeft = _this$refs$table.scrollLeft,
scrollTop = _this$refs$table.scrollTop,
scrollHeight = _this$refs$table.scrollHeight,
clientHeight = _this$refs$table.clientHeight;
_this.refs.thead.style.transform = 'translateY(' + scrollTop + 'px)';
if (scrollTop + clientHeight >= scrollHeight - 36) {
if (!_this.preventRequest) {
if (_this.props.onLoad) {
_this.props.onLoad(_this.props.dataSource.length);
}
_this.preventRequest = true;
}
}
};
_this.state = {
selectedIdx: [],
fixedHeader: false,
sorter: {},
scrollLeft: 0
};
_this.onClickSelect = _this.onClickSelect.bind(_this);
return _this;
}
Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns !== this.props.columns) {
this.preventRequest = false;
}
};
Table.prototype.onClickSelectAll = function onClickSelectAll(checked) {
var _props = this.props,
dataSource = _props.dataSource,
_props$rowSelection$o = _props.rowSelection.onSelectAll,
onSelectAll = _props$rowSelection$o === undefined ? function () {} : _props$rowSelection$o;
var selectedIdx = [];
if (checked) {
selectedIdx = dataSource.map(function (d, i) {
return i;
});
}
this.setState({
selectedIdx: selectedIdx
});
onSelectAll(checked, checked ? dataSource : []);
};
Table.prototype.onClickSelect = function onClickSelect(checked, idx) {
var _props2 = this.props,
dataSource = _props2.dataSource,
_props2$rowSelection$ = _props2.rowSelection.onSelect,
onSelect = _props2$rowSelection$ === undefined ? function () {} : _props2$rowSelection$;
var selectedIdx = this.state.selectedIdx;
var p = selectedIdx.indexOf(idx);
if (p > -1) {
selectedIdx.splice(p, 1);
} else {
selectedIdx.push(idx);
}
this.setState({
selectedIdx: selectedIdx
});
onSelect(dataSource[idx], checked, dataSource.filter(function (d, i) {
return selectedIdx.indexOf(i) > -1;
}));
};
//默认第一次降序
Table.prototype.render = function render() {
var _this2 = this,
_classNames3;
var _props3 = this.props,
dataSource = _props3.dataSource,
columns = _props3.columns,
size = _props3.size,
bordered = _props3.bordered,
striped = _props3.striped,
rowSelection = _props3.rowSelection,
fixed = _props3.fixed,
upIcon = _props3.upIcon,
downIcon = _props3.downIcon,
props = _objectWithoutProperties(_props3, ['dataSource', 'columns', 'size', 'bordered', 'striped', 'rowSelection', 'fixed', 'upIcon', 'downIcon']);
var _state = this.state,
selectedIdx = _state.selectedIdx,
sorter = _state.sorter;
var thead = _react2.default.createElement(
'thead',
{ ref: 'thead' },
_react2.default.createElement(
'tr',
null,
rowSelection && _react2.default.createElement(
'th',
null,
_react2.default.createElement(_checkbox2.default, { onChange: this.onClickSelectAll.bind(this) })
),
columns.map(function (d) {
var _classNames;
return _react2.default.createElement(
'th',
{
key: d.dataIndex,
className: (0, _classnames2.default)((_classNames = {}, _classNames[d.className] = d.className, _classNames))
},
d.title,
d.sorter && _react2.default.createElement(
'span',
{ className: 'dh-sort-icon', onClick: function onClick() {
return _this2.handleSortChange(d.dataIndex);
} },
_react2.default.createElement(_icon2.default, { type: sorter[d.dataIndex] == 'asc' ? upIcon : downIcon, role: sorter[d.dataIndex] ? 'active' : '' })
),
d.ext && _react2.default.createElement(
'span',
{ style: { paddingLeft: 20 } },
_react2.default.createElement(
'div',
{ className: 'dh-table-ext', style: { width: EXT_WIDTH } },
d.ext
)
)
);
})
)
);
var tbody = _react2.default.createElement(
'tbody',
null,
dataSource.map(function (d, i) {
return _react2.default.createElement(
'tr',
{ key: i },
rowSelection && _react2.default.createElement(
'td',
null,
_react2.default.createElement(_checkbox2.default, {
checked: selectedIdx.indexOf(i) > -1,
onChange: function onChange(checked) {
return _this2.onClickSelect(checked, i);
}
})
),
columns.map(function (c) {
var _classNames2;
return _react2.default.createElement(
'td',
{
className: (0, _classnames2.default)({
'an-table-col-frozen': c.frozen
}, (_classNames2 = {}, _classNames2[c.className] = c.className, _classNames2)),
key: c.dataIndex
},
c.render ? c.render(d[c.dataIndex], d, i) : d[c.dataIndex] || '(空白)'
);
})
);
})
);
return _react2.default.createElement(
'div',
_extends({}, props, {
className: (0, _classnames2.default)('dh-table', (_classNames3 = {}, _classNames3['dh-table-' + size] = size, _classNames3['dh-table-bordered'] = bordered, _classNames3['dh-table-striped'] = striped, _classNames3['dh-table-fixed'] = fixed, _classNames3)),
ref: 'table',
onWheel: this.handleScroll,
onScroll: this.handleScroll
}),
_react2.default.createElement(
'table',
{ cellSpacing: '0' },
tbody,
thead
)
);
};
return Table;
}(_react.Component);
Table.propTypes = {
dataSource: _propTypes2.default.array,
columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
ext: _propTypes2.default.element,
dataIndex: _propTypes2.default.string,
render: _propTypes2.default.func,
sorter: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool])
})),
onChange: _propTypes2.default.func,
onLoad: _propTypes2.default.func,
size: _propTypes2.default.oneOf(['default', 'small', 'large']),
bordered: _propTypes2.default.bool,
striped: _propTypes2.default.bool,
rowSelection: _propTypes2.default.object,
fixed: _propTypes2.default.bool,
upIcon: _propTypes2.default.string,
downIcon: _propTypes2.default.string
};
Table.defaultProps = {
size: 'default',
striped: true,
columns: [],
dataSource: [],
upIcon: 'sort-up',
downIcon: 'sort-down',
fixed: true
};
exports.default = Table;