UNPKG

zent

Version:

一套前端设计语言和基于React的实现

328 lines (277 loc) 9.42 kB
'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'];