zent
Version:
一套前端设计语言和基于React的实现
328 lines (277 loc) • 9.42 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _Head = require('./modules/Head');
var _Head2 = _interopRequireDefault(_Head);
var _Body = require('./modules/Body');
var _Body2 = _interopRequireDefault(_Body);
var _zentPagination = require('zent-pagination');
var _zentPagination2 = _interopRequireDefault(_zentPagination);
var _zentLoading = require('zent-loading');
var _zentLoading2 = _interopRequireDefault(_zentLoading);
var _isBrowser = require('zent-utils/isBrowser');
var _isBrowser2 = _interopRequireDefault(_isBrowser);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _React$PropTypes = _react2['default'].PropTypes,
func = _React$PropTypes.func,
bool = _React$PropTypes.bool,
string = _React$PropTypes.string,
array = _React$PropTypes.array,
oneOf = _React$PropTypes.oneOf,
object = _React$PropTypes.object;
var relativeTop = void 0;
var Table = _react2['default'].createClass({
displayName: 'Table',
propTypes: {
className: string,
prefix: string,
columns: array,
datasets: array,
onChange: func,
sortBy: string,
sortType: oneOf(['desc', 'asc']),
pageInfo: object,
rowKey: string,
loading: bool,
autoScroll: bool,
autoStick: bool,
selection: object
},
getDefaultProps: function getDefaultProps() {
return {
prefix: 'zent',
pageSize: 10,
className: '',
datasets: [],
columns: [],
emptyLabel: '没有更多数据了',
rowKey: 'id',
sortType: 'desc',
loading: false,
autoScroll: false,
autoStick: false,
selection: null
};
},
getInitialState: function getInitialState() {
return {
current: this.props.pageInfo ? this.props.pageInfo.current : 1,
placeHolderHeight: false,
fixStyle: {}
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({
current: nextProps.pageInfo ? nextProps.pageInfo.current : 1
});
},
componentDidMount: function componentDidMount() {
var tableRectTop = _reactDom2['default'].findDOMNode(this).getBoundingClientRect().top;
relativeTop = tableRectTop - document.body.getBoundingClientRect().top;
},
// 对外部传进来的onChange进行封装
wrapPropsOnChange: function wrapPropsOnChange(conf) {
if (typeof this.props.onChange !== 'function') {
throw new Error('请传入一个onChange方法');
}
this.props.onChange(conf);
},
onChange: function onChange(conf) {
this.setState(conf);
this.wrapPropsOnChange(conf);
},
onSort: function onSort(conf) {
// 排序的时候也要触发
this.wrapPropsOnChange(conf);
},
onPageChange: function onPageChange(current) {
this.wrapPropsOnChange({
current: current
});
if (this.props.autoScroll) {
this.scrollToTop(400);
}
},
/*
* Head上的选中会全选所有的行
* @param isSelect {Boolean} 表示是否全选
*/
onSelectAllRows: function onSelectAllRows(isSelect) {
var allRowKeys = [];
var allRows = [];
var _props = this.props,
rowKey = _props.rowKey,
datasets = _props.datasets,
selection = _props.selection,
_props$getRowConf = _props.getRowConf,
getRowConf = _props$getRowConf === undefined ? function () {
return { canSelect: true };
} : _props$getRowConf;
if (isSelect) {
// 找出所有canSelect为true的row,才能选中
for (var i = 0, len = datasets.length; i < len; i++) {
var _getRowConf = getRowConf(datasets[i], i),
_getRowConf$canSelect = _getRowConf.canSelect,
canSelect = _getRowConf$canSelect === undefined ? true : _getRowConf$canSelect;
if (canSelect) {
allRowKeys.push(datasets[i][rowKey]);
allRows.push(datasets[i]);
}
}
}
selection.onSelect(allRowKeys, allRows);
},
/**
* 选了一行
* @param rowKey {String} 某一行的key
* @param isSelect {Boolean} 是否被选中
*/
onSelectOneRow: function onSelectOneRow(rowKey, isSelect) {
var selectedRowKeys = this.props.selection.selectedRowKeys.slice(0); // copy 一份数组
var index = selectedRowKeys.indexOf(rowKey);
if (isSelect) {
if (index === -1) {
selectedRowKeys.push(rowKey);
}
} else {
if (index !== -1) {
selectedRowKeys.splice(index, 1);
}
}
var selectedRows = this.getSelectedRowsByKeys(selectedRowKeys);
this.props.selection.onSelect(selectedRowKeys, selectedRows);
},
/**
* 根据选择的keys拼装一个选好的列
* @param rowKeys Array 一个keys的数组
* @return rows Array 一个每行的数据的数组
*/
getSelectedRowsByKeys: function getSelectedRowsByKeys(rowKeys) {
var rows = [];
var self = this;
this.props.datasets.forEach(function (item) {
if (rowKeys.indexOf(item[self.props.rowKey]) >= 0) {
rows.push(item);
}
});
return rows;
},
scrollToTop: function scrollToTop(scrollDuration) {
if (!_isBrowser2['default']) return;
var scrollHeight = window.scrollY;
var scrollStep = Math.PI / (scrollDuration / 15);
var cosParameter = scrollHeight / 2;
var scrollCount = 0;
var scrollMargin = void 0;
var scrollInterval = setInterval(function () {
if (window.scrollY > relativeTop) {
scrollCount = scrollCount + 1;
scrollMargin = cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
window.scrollTo(0, scrollHeight - scrollMargin);
} else {
clearInterval(scrollInterval);
}
}, 15);
},
render: function render() {
var _this = this;
var _props2 = this.props,
selection = _props2.selection,
prefix = _props2.prefix,
columns = _props2.columns,
className = _props2.className,
sortBy = _props2.sortBy,
autoStick = _props2.autoStick,
sortType = _props2.sortType,
datasets = _props2.datasets,
rowKey = _props2.rowKey,
pageInfo = _props2.pageInfo,
emptyLabel = _props2.emptyLabel,
_props2$getRowConf = _props2.getRowConf,
getRowConf = _props2$getRowConf === undefined ? function () {
return { canSelect: true, rowClass: '' };
} : _props2$getRowConf;
var needSelect = selection !== null;
var selectedRowKeys = [];
var isSelectAll = false;
var isSelectPart = false;
if (needSelect) {
var canSelectRowsCount = 0;
datasets.forEach(function (item, index) {
var _getRowConf2 = getRowConf(item, index),
_getRowConf2$canSelec = _getRowConf2.canSelect,
canSelect = _getRowConf2$canSelec === undefined ? true : _getRowConf2$canSelec;
if (canSelect) {
canSelectRowsCount += 1;
}
});
isSelectAll = canSelectRowsCount > 0 && selection.selectedRowKeys.length === canSelectRowsCount;
isSelectPart = canSelectRowsCount > 0 && selection.selectedRowKeys.length > 0 && !isSelectAll;
selectedRowKeys = selection.selectedRowKeys;
}
return _react2['default'].createElement(
'div',
{ className: prefix + '-table-container' },
_react2['default'].createElement(
_zentLoading2['default'],
{ show: this.props.loading, 'static': true },
columns && _react2['default'].createElement(
'div',
{ className: prefix + '-table ' + className },
this.state.placeHolderHeight && _react2['default'].createElement(
'div',
{ className: 'thead place-holder' },
_react2['default'].createElement(
'div',
{ className: 'tr' },
this.cloneHeaderContent()
)
),
_react2['default'].createElement(_Head2['default'], {
ref: function ref(c) {
return _this.head = c;
},
columns: columns,
sortBy: sortBy,
sortType: sortType,
onSort: this.onSort,
selection: {
needSelect: needSelect,
onSelectAll: this.onSelectAllRows,
isSelectAll: isSelectAll,
isSelectPart: isSelectPart
},
autoStick: autoStick,
style: this.state.fixStyle
}),
_react2['default'].createElement(_Body2['default'], {
datasets: datasets,
columns: columns,
emptyLabel: emptyLabel,
rowKey: rowKey,
getRowConf: getRowConf,
selection: {
needSelect: needSelect,
selectedRowKeys: selectedRowKeys,
onSelect: this.onSelectOneRow
}
})
)
),
pageInfo && _react2['default'].createElement(_zentPagination2['default'], {
current: this.state.current,
totalItem: pageInfo.total,
pageSize: pageInfo.limit,
maxPageToShow: pageInfo.maxPageToShow,
onChange: this.onPageChange
})
);
}
});
exports['default'] = Table;
module.exports = exports['default'];