innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

fix: update

This commit is contained in:
gx 2021-03-28 19:23:41 +08:00
parent 4215c4ec1e
commit 3ccd8210a2
7 changed files with 109 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/Table.js
View File

@ -534,8 +534,6 @@ var Table = function (_Component) {
// 此处应该对比一下实际的
if (this.computeWidth > this.contentDomWidth) {
this.bodyTable.style.overflowX = 'scroll';
} else {
this.bodyTable.style.overflowX = 'hidden';
}
}
}
@ -1247,7 +1245,7 @@ var Table = function (_Component) {
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
if (this.computeWidth > this.contentDomWidth) {
innerBodyStyle.overflowX = 'scroll';
} else {
} else if (this.contentWidth === this.contentDomWidth) {
innerBodyStyle.overflowX = 'hidden';
}
} else {
@ -1321,6 +1319,9 @@ var Table = function (_Component) {
if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
}
if (_this4.bodyTable && !fixed && _this4.contentDomWidth === _this4.contentWidth) {
tableStyle.width = _this4.bodyTable.clientWidth;
}
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
'tbody',
{ className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave },
@ -1512,7 +1513,8 @@ var Table = function (_Component) {
headerHeight = _props9.headerHeight,
columns = _props9.columns,
heightConsistent = _props9.heightConsistent,
bodyDisplayInRow = _props9.bodyDisplayInRow;
bodyDisplayInRow = _props9.bodyDisplayInRow,
lazyLoad = _props9.lazyLoad;
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];

29
build/TableHeader.js
View File

@ -782,14 +782,15 @@ var _initialiseProps = function _initialiseProps() {
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
}
} else {
var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
if (showScroll < 0) {
_this7.table.tableBody.style.overflowX = 'auto';
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null;
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_this7.table.tableBody.style.overflowX = 'hidden';
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null;
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
@ -820,6 +821,22 @@ var _initialiseProps = function _initialiseProps() {
} else {
contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
}
var containerWidth = contentTablePar.getBoundingClientRect().width;
var tableWidth = _this7.table.innerTableBody.getBoundingClientRect().width;
var _scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
if (tableWidth > containerWidth) {
_scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'auto' : null;
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'hidden' : null;
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
}
}
} else {
_this7.drag.newWidth = _this7.minWidth;
@ -863,7 +880,13 @@ var _initialiseProps = function _initialiseProps() {
var innerTable = table.querySelector('.u-table-body-inner');
if (innerTable) {
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
overflow.x && (innerTable.style.overflowX = overflow.x);
if (overflow.x) {
var fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container');
if (fixedScrollContainers && fixedScrollContainers.length) {
fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
}
}
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}

25
build/lib/utils.js
View File

@ -8,6 +8,7 @@ exports.Event = exports.EventUtil = exports.tryParseInt = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.measureScrollbar = measureScrollbar;
exports.myBrowser = myBrowser;
exports.debounce = debounce;
exports.warningOnce = warningOnce;
exports.getOffset = getOffset;
@ -75,6 +76,30 @@ function measureScrollbar() {
return scrollbarSize;
}
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
//判断是否Opera浏览器
return "Opera";
}
if (userAgent.indexOf("Firefox") > -1) {
//判断是否Firefox浏览器
return "FF";
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
//判断是否Safari浏览器
return "Safari";
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
//判断是否IE浏览器
return "IE";
}
}
function debounce(func, wait, immediate) {
var timeout = void 0;
return function debounceFunc() {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.3.15-beta.14",
"version": "2.3.15-beta.16",
"description": "Table ui component for react",
"keywords": [
"react",

11
src/Table.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classes from 'component-classes';
import TableRow from './TableRow';
import TableHeader from './TableHeader';
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './lib/utils';
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength } from './lib/utils';
import shallowequal from 'shallowequal';
import addEventListener from 'tinper-bee-core/lib/addEventListener';
import ColumnManager from './ColumnManager';
@ -307,8 +307,6 @@ class Table extends Component {
// 此处应该对比一下实际的
if (this.computeWidth > this.contentDomWidth) {
this.bodyTable.style.overflowX = 'scroll';
} else {
this.bodyTable.style.overflowX = 'hidden';
}
}
}
@ -1045,7 +1043,7 @@ class Table extends Component {
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
if (this.computeWidth > this.contentDomWidth) {
innerBodyStyle.overflowX = 'scroll';
} else {
} else if (this.contentWidth === this.contentDomWidth) {
innerBodyStyle.overflowX = 'hidden';
}
} else {
@ -1119,6 +1117,9 @@ class Table extends Component {
if ( !fixed && this.contentDomWidth < this.contentWidth) {
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
}
if (this.bodyTable && !fixed && this.contentDomWidth === this.contentWidth) {
tableStyle.width = this.bodyTable.clientWidth
}
const tableBody = hasBody ? getBodyWrapper(
<tbody className={`${clsPrefix}-tbody`} onMouseLeave={this.onBodyMouseLeave}>
{this.getRows(columns, fixed)}
@ -1279,7 +1280,7 @@ class Table extends Component {
syncFixedTableRowHeight() {
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow } = this.props;
const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow, lazyLoad } = this.props;
const headRows = this.headTable ?
this.headTable.querySelectorAll('thead') :
this.bodyTable.querySelectorAll('thead');

32
src/TableHeader.js
View File

@ -427,14 +427,15 @@ class TableHeader extends Component {
this.optTableMargin( this.table.fixedRighHeadertTable,0);
}
}else{
const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
if(showScroll < 0){
this.table.tableBody.style.overflowX = 'auto';
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
}else{
this.table.tableBody.style.overflowX = 'hidden';
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
@ -462,12 +463,25 @@ class TableHeader extends Component {
// }
if(this.drag.fixedType == 'left') {
contentTablePar.style.marginLeft = this.drag.contentTableML + diff + 'px'
}else {
contentTablePar.style.marginRight = this.drag.contentTableMR + diff + 'px'
}
const containerWidth = contentTablePar.getBoundingClientRect().width
const tableWidth = this.table.innerTableBody.getBoundingClientRect().width
const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
if (tableWidth > containerWidth) {
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
} else {
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
this.optTableMargin( this.table.fixedLeftBodyTable,0);
this.optTableMargin( this.table.fixedRightBodyTable,0);
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
}
}
}else {
@ -538,7 +552,13 @@ class TableHeader extends Component {
const innerTable = table.querySelector('.u-table-body-inner');
if(innerTable){
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
overflow.x && (innerTable.style.overflowX = overflow.x);
if (overflow.x) {
const fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container')
if (fixedScrollContainers && fixedScrollContainers.length) {
fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
}
}
overflow.y && (innerTable.style.overflowY = overflow.y);
}

19
src/lib/utils.js
View File

@ -41,6 +41,25 @@ export function measureScrollbar(direction = 'vertical') {
return scrollbarSize;
}
export function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) { //判断是否Opera浏览器
return "Opera"
}
if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
return "FF";
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
return "Safari";
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
return "IE";
}
}
export function debounce(func, wait, immediate) {
let timeout;