fix: hoverContent综合修改

This commit is contained in:
gx 2021-04-28 10:44:43 +08:00
parent 584104651f
commit 954266184b
5 changed files with 37 additions and 13 deletions

View File

@ -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
)
);
};

View File

@ -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;

View File

@ -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",

View File

@ -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>
);
}

View File

@ -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 属性值