UNPKG

zent

Version:

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

207 lines (173 loc) 5.57 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 _throttle = require('zent-utils/lodash/throttle'); var _throttle2 = _interopRequireDefault(_throttle); var _helper = require('../helper'); var _helper2 = _interopRequireDefault(_helper); var _assign = require('zent-utils/lodash/assign'); var _assign2 = _interopRequireDefault(_assign); var _zentCheckbox = require('zent-checkbox'); var _zentCheckbox2 = _interopRequireDefault(_zentCheckbox); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var rect = void 0; var relativeTop = void 0; var stickRowClass = 'stickrow'; var fixRowClass = 'fixrow'; var Head = _react2['default'].createClass({ displayName: 'Head', getInitialState: function getInitialState() { return { isShowFixRow: false }; }, componentDidMount: function componentDidMount() { if (this.props.autoStick) { this.throttleSetHeadStyle = (0, _throttle2['default'])(this.setHeadStyle, 100, { leading: true }); window.addEventListener('scroll', this.throttleSetHeadStyle, true); window.addEventListener('resize', this.throttleSetHeadStyle, true); } }, componentWillUnmount: function componentWillUnmount() { if (this.props.autoStick) { window.removeEventListener('scroll', this.throttleSetHeadStyle, true); window.removeEventListener('resize', this.throttleSetHeadStyle, true); } }, getRect: function getRect() { // clientrect can't be clone var tmpRect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect(); rect = { top: tmpRect.top, height: tmpRect.height - 1, width: tmpRect.width }; relativeTop = rect.top - document.body.getBoundingClientRect().top; }, setHeadStyle: function setHeadStyle() { this.getRect(); if (window.scrollY > relativeTop) { this.setState({ isShowFixRow: true, fixStyle: { position: 'fixed', top: 0, left: rect.left + 'px', height: rect.height + 'px', width: rect.width + 'px', zIndex: 1000 } }); } else { this.setState({ isShowFixRow: false, fixStyle: {} }); } }, getChild: function getChild(item) { if (item.needSort) { return _react2['default'].createElement( 'a', { onClick: this.sort.bind(this, item) }, item.title, item.name === this.props.sortBy && _react2['default'].createElement('span', { className: this.props.sortType }) ); } return item.title; }, sort: function sort(item) { var sortType = void 0; var name = item.name; if (name === this.props.sortBy) { sortType = this.props.sortType === 'desc' ? 'asc' : 'desc'; // toggble current sortType } else { sortType = 'desc'; // desc sort by default } this.props.onSort({ sortBy: name, sortType: sortType }); }, onSelect: function onSelect(e) { var isChecked = false; if (e.target.checked) { isChecked = true; } this.props.selection.onSelectAll(isChecked); }, renderTr: function renderTr(isFixTr) { var _this = this; var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var selection = this.props.selection; var needSelect = selection.needSelect; var className = isFixTr ? fixRowClass : stickRowClass; return _react2['default'].createElement( 'div', { className: className + ' tr', style: style, ref: function ref(c) { _this[className] = c; } }, this.props.columns.map(function (item, index) { var cellClass = 'cell'; var isMoney = item.isMoney, textAlign = item.textAlign, width = item.width; if (index === 0 && needSelect) { cellClass += ' cell--selection'; } if (isMoney) { cellClass += ' cell--money'; } width = _helper2['default'].getCalculatedWidth(width); var styleObj = {}; if (width) { styleObj = { width: width, flex: '0 1 auto' }; } if (textAlign) { if (['left', 'center', 'right'].indexOf(textAlign)) { styleObj = (0, _assign2['default'])(styleObj, { textAlign: textAlign }); } } return _react2['default'].createElement( 'div', { key: index, className: cellClass, style: styleObj }, index === 0 && needSelect && _react2['default'].createElement(_zentCheckbox2['default'], { className: 'select-check', onChange: _this.onSelect, checked: selection.isSelectAll, indeterminate: selection.isSelectPart }), _this.getChild(item) ); }) ); }, render: function render() { var style = this.props.style; var _state = this.state, isShowFixRow = _state.isShowFixRow, fixStyle = _state.fixStyle; return _react2['default'].createElement( 'div', { className: 'thead', style: style }, this.renderTr(false), isShowFixRow && this.renderTr(true, fixStyle) ); } }); exports['default'] = Head; module.exports = exports['default'];