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