zent
Version:
一套前端设计语言和基于React的实现
207 lines (173 loc) • 5.57 kB
JavaScript
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'];
;