fix: hoverContent综合修改
This commit is contained in:
parent
584104651f
commit
954266184b
|
@ -351,6 +351,7 @@ var Table = function (_Component) {
|
|||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum); // 加入props.showRowNum参数
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
_this.firstDid = true;
|
||||
_this.scrollYChanged = false;
|
||||
if (props.defaultExpandAllRows) {
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
|
@ -515,6 +516,7 @@ var Table = function (_Component) {
|
|||
this.bodyTable.scrollTop = 0;
|
||||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
|
||||
if (prevScrollY !== currentScrollY) {
|
||||
this.scrollYChanged = true;
|
||||
var bodyScrollTop = this.bodyTable.scrollTop;
|
||||
if (bodyScrollTop === 0) {
|
||||
// 在顶部的时候,滚动条不用动
|
||||
|
@ -537,8 +539,9 @@ var Table = function (_Component) {
|
|||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
} else if (this.scrollYChanged) {
|
||||
this.bodyTable.scrollTop += 1;
|
||||
this.scrollYChanged = false;
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
|
@ -1731,12 +1734,15 @@ var Table = function (_Component) {
|
|||
var _props11 = this.props,
|
||||
syncHover = _props11.syncHover,
|
||||
onRowHover = _props11.onRowHover,
|
||||
data = _props11.data;
|
||||
data = _props11.data,
|
||||
lazyLoad = _props11.lazyLoad;
|
||||
//fix:树形表,onRowHover返回参数异常
|
||||
|
||||
var isTreeType = this.isTreeType;
|
||||
|
||||
var record = isTreeType ? propsRecord : data[currentIndex];
|
||||
var record = isTreeType ? propsRecord : lazyLoad ? data.find(function (item) {
|
||||
return item.originIndex === currentIndex;
|
||||
}) : data[currentIndex];
|
||||
// 固定列、或者含有hoverdom时情况下同步hover状态
|
||||
if (this.columnManager.isAnyColumnsFixed() && syncHover) {
|
||||
this.hoverKey = key;
|
||||
|
@ -1820,7 +1826,6 @@ var Table = function (_Component) {
|
|||
if (hasFixedLeft) {
|
||||
className += ' has-fixed-left';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
|
@ -1858,7 +1863,7 @@ var Table = function (_Component) {
|
|||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||||
return _this7.hoverDom = el;
|
||||
} },
|
||||
props.hoverContent(currentHoverRecord, currentHoverIndex)
|
||||
currentHoverRecord ? props.hoverContent(currentHoverRecord, currentHoverIndex) : null
|
||||
)
|
||||
);
|
||||
};
|
||||
|
|
|
@ -77,9 +77,9 @@ function bigData(Table) {
|
|||
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var props = this.props;
|
||||
var currentIndex = nextProps.currentIndex,
|
||||
newData = nextProps.data,
|
||||
newExpandedKeys = nextProps.expandedRowKeys;
|
||||
|
||||
var newData = this.modifyNewData(nextProps.data);
|
||||
var _this = this,
|
||||
dataLen = newData.length;
|
||||
if (nextProps.scroll.y !== props.scroll.y) {
|
||||
|
@ -387,6 +387,14 @@ function bigData(Table) {
|
|||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this5 = this;
|
||||
|
||||
this.modifyNewData = function (data) {
|
||||
if (!data && !data.length) return data;
|
||||
return data.map(function (item, index) {
|
||||
item.originIndex = index;
|
||||
return item;
|
||||
});
|
||||
};
|
||||
|
||||
this.getTreeData = function (expandedKeys, newData) {
|
||||
var startIndex = _this5.startIndex,
|
||||
endIndex = _this5.endIndex;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.3.15-beta.25",
|
||||
"version": "2.3.15-beta.26",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
12
src/Table.js
12
src/Table.js
|
@ -128,6 +128,7 @@ class Table extends Component {
|
|||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum); // 加入props.showRowNum参数
|
||||
this.store = createStore({ currentHoverKey: null });
|
||||
this.firstDid = true;
|
||||
this.scrollYChanged = false;
|
||||
if (props.defaultExpandAllRows) {
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = rows[i];
|
||||
|
@ -286,6 +287,7 @@ class Table extends Component {
|
|||
this.bodyTable.scrollTop = 0
|
||||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
|
||||
if (prevScrollY !== currentScrollY) {
|
||||
this.scrollYChanged = true
|
||||
const bodyScrollTop = this.bodyTable.scrollTop
|
||||
if (bodyScrollTop === 0) { // 在顶部的时候,滚动条不用动
|
||||
this.bodyTable.scrollTop = 0;
|
||||
|
@ -303,8 +305,9 @@ class Table extends Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
} else if (this.scrollYChanged) {
|
||||
this.bodyTable.scrollTop += 1
|
||||
this.scrollYChanged = false
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
|
@ -1490,10 +1493,10 @@ class Table extends Component {
|
|||
|
||||
handleRowHover(isHover, key,event,currentIndex, propsRecord) {
|
||||
//增加新的API,设置是否同步Hover状态,提高性能,避免无关的渲染
|
||||
let { syncHover,onRowHover,data } = this.props;
|
||||
let { syncHover,onRowHover,data, lazyLoad } = this.props;
|
||||
//fix:树形表,onRowHover返回参数异常
|
||||
let { isTreeType } = this;
|
||||
const record = isTreeType ? propsRecord : data[currentIndex];
|
||||
const record = isTreeType ? propsRecord : lazyLoad ? data.find(item => item.originIndex === currentIndex) : data[currentIndex];
|
||||
// 固定列、或者含有hoverdom时情况下同步hover状态
|
||||
if(this.columnManager.isAnyColumnsFixed() && syncHover ){
|
||||
this.hoverKey = key;
|
||||
|
@ -1604,7 +1607,6 @@ class Table extends Component {
|
|||
if(hasFixedLeft){
|
||||
className += ` has-fixed-left`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
|
||||
|
@ -1630,7 +1632,7 @@ class Table extends Component {
|
|||
container={this}
|
||||
{...loading} />
|
||||
{ props.hoverContent && <div className="u-row-hover"
|
||||
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent(currentHoverRecord, currentHoverIndex)}</div>}
|
||||
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{currentHoverRecord ? props.hoverContent(currentHoverRecord, currentHoverIndex) : null}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -50,7 +50,8 @@ export default function bigData(Table) {
|
|||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const props = this.props;
|
||||
const {currentIndex ,data:newData, expandedRowKeys:newExpandedKeys} = nextProps;
|
||||
const {currentIndex, expandedRowKeys:newExpandedKeys} = nextProps;
|
||||
const newData = this.modifyNewData(nextProps.data)
|
||||
const _this = this,dataLen = newData.length;
|
||||
if (nextProps.scroll.y !== props.scroll.y) {
|
||||
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||
|
@ -107,6 +108,14 @@ export default function bigData(Table) {
|
|||
}
|
||||
}
|
||||
|
||||
modifyNewData = data => {
|
||||
if (!data && !data.length) return data
|
||||
return data.map((item, index) => {
|
||||
item.originIndex = index
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 如果是树形表,需要对传入的 data 进行处理
|
||||
* @param expandedKeys: nextProps 中传入的新 expandedRowKeys 属性值
|
||||
|
|
Loading…
Reference in New Issue