zent
Version:
一套前端设计语言和基于React的实现
182 lines (156 loc) • 4.41 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import throttle from 'zent-utils/lodash/throttle';
import helper from '../helper';
import assign from 'zent-utils/lodash/assign';
import Checkbox from 'zent-checkbox';
let rect;
let relativeTop;
const stickRowClass = 'stickrow';
const fixRowClass = 'fixrow';
const Head = React.createClass({
getInitialState() {
return {
isShowFixRow: false
};
},
componentDidMount() {
if (this.props.autoStick) {
this.throttleSetHeadStyle = throttle(this.setHeadStyle, 100, { leading: true });
window.addEventListener('scroll', this.throttleSetHeadStyle, true);
window.addEventListener('resize', this.throttleSetHeadStyle, true);
}
},
componentWillUnmount() {
if (this.props.autoStick) {
window.removeEventListener('scroll', this.throttleSetHeadStyle, true);
window.removeEventListener('resize', this.throttleSetHeadStyle, true);
}
},
getRect() {
// clientrect can't be clone
let tmpRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
rect = {
top: tmpRect.top,
height: tmpRect.height - 1,
width: tmpRect.width
};
relativeTop = rect.top - document.body.getBoundingClientRect().top;
},
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(item) {
if (item.needSort) {
return (
<a onClick={this.sort.bind(this, item)}>
{item.title}
{item.name === this.props.sortBy && <span className={this.props.sortType} />}
</a>
);
}
return item.title;
},
sort(item) {
let sortType;
let 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
});
},
onSelect(e) {
let isChecked = false;
if (e.target.checked) {
isChecked = true;
}
this.props.selection.onSelectAll(isChecked);
},
renderTr(isFixTr, style = {}) {
let { selection } = this.props;
let needSelect = selection.needSelect;
let className = isFixTr ? fixRowClass : stickRowClass;
return (
<div className={`${className} tr`} style={style} ref={(c) => { this[className] = c }}>
{this.props.columns.map((item, index) => {
let cellClass = 'cell';
let { isMoney, textAlign, width } = item;
if (index === 0 && needSelect) {
cellClass += ' cell--selection';
}
if (isMoney) {
cellClass += ' cell--money';
}
width = helper.getCalculatedWidth(width);
let styleObj = {};
if (width) {
styleObj = {
width,
flex: '0 1 auto'
};
}
if (textAlign) {
if (['left', 'center', 'right'].indexOf(textAlign)) {
styleObj = assign(styleObj, {
textAlign
});
}
}
return (
<div
key={index}
className={cellClass}
style={styleObj}
>
{
index === 0 && needSelect && (
<Checkbox
className="select-check"
onChange={this.onSelect}
checked={selection.isSelectAll}
indeterminate={selection.isSelectPart}
/>
)
}
{this.getChild(item)}
</div>
);
})}
</div>
);
},
render() {
let { style } = this.props;
let { isShowFixRow, fixStyle } = this.state;
return (
<div className="thead" style={style}>
{this.renderTr(false)}
{isShowFixRow && this.renderTr(true, fixStyle)}
</div>
);
}
});
export default Head;