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

fix: 使用resizeObserver替代window.resize

This commit is contained in:
gx 2021-04-25 17:06:38 +08:00
parent 3b5ae93b7a
commit 584104651f
5 changed files with 111 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
build/Table.js
View File

@ -58,6 +58,10 @@ var _i18n2 = _interopRequireDefault(_i18n);
var _tool = require('bee-locale/build/tool'); var _tool = require('bee-locale/build/tool');
var _resizeObserverPolyfill = require('resize-observer-polyfill');
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -410,6 +414,8 @@ var Table = function (_Component) {
}; };
Table.prototype.componentDidMount = function componentDidMount() { Table.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
this.getTableUID(); this.getTableUID();
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus); _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
@ -424,7 +430,14 @@ var Table = function (_Component) {
} }
if (this.columnManager.isAnyColumnsFixed()) { if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
var targetNode = this.contentTable;
if (targetNode) {
this.resizeObserver = new _resizeObserverPolyfill2["default"](function () {
_this2.resize();
});
this.resizeObserver.observe(targetNode);
}
} }
}; };
@ -559,8 +572,8 @@ var Table = function (_Component) {
this.contentTable = null; this.contentTable = null;
_utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
_utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus); _utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
if (this.resizeEvent) { if (this.resizeObserver) {
this.resizeEvent.remove(); this.resizeObserver.disconnect();
} }
}; };
@ -776,7 +789,7 @@ var Table = function (_Component) {
}; };
Table.prototype.getHeaderRows = function getHeaderRows(columns) { Table.prototype.getHeaderRows = function getHeaderRows(columns) {
var _this2 = this; var _this3 = this;
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var rows = arguments[2]; var rows = arguments[2];
@ -801,8 +814,8 @@ var Table = function (_Component) {
} }
} }
var width = column.width; var width = column.width;
if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) { if (typeof width == 'string' && width.indexOf('%') > -1 && _this3.contentWidth) {
width = parseInt(_this2.contentWidth * parseInt(width) / 100); width = parseInt(_this3.contentWidth * parseInt(width) / 100);
} else if (width) { } else if (width) {
width = parseInt(width); width = parseInt(width);
} }
@ -825,9 +838,9 @@ var Table = function (_Component) {
cell.onClick = column.onHeadCellClick; cell.onClick = column.onHeadCellClick;
} }
if (column.children) { if (column.children) {
_this2.getHeaderRows(column.children, currentRow + 1, rows); _this3.getHeaderRows(column.children, currentRow + 1, rows);
} else { } else {
_this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点 _this3.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
} }
if ('colSpan' in column) { if ('colSpan' in column) {
cell.colSpan = column.colSpan; cell.colSpan = column.colSpan;
@ -839,7 +852,7 @@ var Table = function (_Component) {
rows[currentRow].push(cell); rows[currentRow].push(cell);
} }
//判断是否启用过滤 //判断是否启用过滤
if (_this2.props.filterable) { if (_this3.props.filterable) {
//组装Filter需要的Col //组装Filter需要的Col
filterCol.push({ filterCol.push({
key: column.key, key: column.key,
@ -847,7 +860,7 @@ var Table = function (_Component) {
width: column.width, width: column.width,
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number'] filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
dataindex: column.dataIndex, //field dataindex: column.dataIndex, //field
datasource: _this2.props.data, //需要单独拿到数据处理 datasource: _this3.props.data, //需要单独拿到数据处理
format: column.format, //设置日期的格式 format: column.format, //设置日期的格式
filterdropdown: column.filterDropdown, //是否显示 show hide filterdropdown: column.filterDropdown, //是否显示 show hide
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据 filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
@ -1138,7 +1151,7 @@ var Table = function (_Component) {
}; };
Table.prototype.getColGroup = function getColGroup(columns, fixed) { Table.prototype.getColGroup = function getColGroup(columns, fixed) {
var _this3 = this; var _this4 = this;
var cols = []; var cols = [];
var self = this; var self = this;
@ -1177,7 +1190,7 @@ var Table = function (_Component) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
if (!fixed && c.fixed) { if (!fixed && c.fixed) {
fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body'; fixedClass = ' ' + _this4.props.clsPrefix + '-row-fixed-columns-in-body';
} }
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass }); return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
})); }));
@ -1203,7 +1216,7 @@ var Table = function (_Component) {
}; };
Table.prototype.getTable = function getTable() { Table.prototype.getTable = function getTable() {
var _this4 = this; var _this5 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var columns = options.columns, var columns = options.columns,
@ -1323,27 +1336,27 @@ var Table = function (_Component) {
if (scroll.x === true) { if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'; tableStyle.tableLayout = 'fixed';
} else { } else {
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
} }
} }
// 自动出现滚动条 // 自动出现滚动条
if (!fixed && _this4.contentDomWidth < _this4.contentWidth) { if (!fixed && _this5.contentDomWidth < _this5.contentWidth) {
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
} }
if (_this4.bodyTable && !fixed && _this4.contentDomWidth === _this4.contentWidth) { if (_this5.bodyTable && !fixed && _this5.contentDomWidth === _this5.contentWidth) {
tableStyle.width = _this4.bodyTable.clientWidth; tableStyle.width = _this5.bodyTable.clientWidth;
} }
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement( var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
'tbody', 'tbody',
{ className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave }, { className: clsPrefix + '-tbody', onMouseLeave: _this5.onBodyMouseLeave },
_this4.getRows(columns, fixed) _this5.getRows(columns, fixed)
)) : null; )) : null;
var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : ""; var _drag_class = _this5.props.dragborder ? "table-drag-bordered" : "";
return _react2["default"].createElement( return _react2["default"].createElement(
'table', 'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this4.getColGroup(columns, fixed), _this5.getColGroup(columns, fixed),
hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null, hasHead ? _this5.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
tableBody tableBody
); );
}; };
@ -1355,7 +1368,7 @@ var Table = function (_Component) {
{ {
className: clsPrefix + '-header', className: clsPrefix + '-header',
ref: function ref(el) { ref: function ref(el) {
fixed ? _this4.fixedHeadTable = el : _this4.headTable = el; fixed ? _this5.fixedHeadTable = el : _this5.headTable = el;
}, },
style: headStyle, style: headStyle,
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
@ -1373,7 +1386,7 @@ var Table = function (_Component) {
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget, onTouchStart: this.detectScrollTarget,
ref: function ref(el) { ref: function ref(el) {
_this4.bodyTableOuter = el; _this5.bodyTableOuter = el;
}, },
onMouseLeave: this.onBodyMouseLeave onMouseLeave: this.onBodyMouseLeave
}, },
@ -1381,7 +1394,7 @@ var Table = function (_Component) {
_react2["default"].createElement( _react2["default"].createElement(
'div', 'div',
{ className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) { { className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
_this4.bodyTable = el; _this5.bodyTable = el;
}, style: _extends({}, bodyStyle) }, }, style: _extends({}, bodyStyle) },
renderTable(!useFixedHeader) renderTable(!useFixedHeader)
) )
@ -1408,7 +1421,7 @@ var Table = function (_Component) {
style: _extends({}, innerBodyStyle), style: _extends({}, innerBodyStyle),
className: clsPrefix + '-body-inner', className: clsPrefix + '-body-inner',
ref: function ref(el) { ref: function ref(el) {
return _this4[refName + 'Outer'] = el; return _this5[refName + 'Outer'] = el;
}, },
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget onTouchStart: this.detectScrollTarget
@ -1610,10 +1623,10 @@ var Table = function (_Component) {
}; };
Table.prototype.findExpandedRow = function findExpandedRow(record, index) { Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
var _this5 = this; var _this6 = this;
var rows = this.getExpandedRows().filter(function (i) { var rows = this.getExpandedRows().filter(function (i) {
return i === _this5.getRowKey(record, index); return i === _this6.getRowKey(record, index);
}); });
return rows[0]; return rows[0];
}; };
@ -1757,7 +1770,7 @@ var Table = function (_Component) {
}; };
Table.prototype.render = function render() { Table.prototype.render = function render() {
var _this6 = this; var _this7 = this;
var _state3 = this.state, var _state3 = this.state,
currentHoverRecord = _state3.currentHoverRecord, currentHoverRecord = _state3.currentHoverRecord,
@ -1811,7 +1824,7 @@ var Table = function (_Component) {
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) {
return _this6.contentTable = el; return _this7.contentTable = el;
}, },
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(), this.getTitle(),
@ -1843,7 +1856,7 @@ var Table = function (_Component) {
'div', 'div',
{ className: 'u-row-hover', { className: 'u-row-hover',
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) { onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
return _this6.hoverDom = el; return _this7.hoverDom = el;
} }, } },
props.hoverContent(currentHoverRecord, currentHoverIndex) props.hoverContent(currentHoverRecord, currentHoverIndex)
) )

83
dist/demo.js vendored
View File

@ -47967,6 +47967,10 @@
var _tool = __webpack_require__(427); var _tool = __webpack_require__(427);
var _resizeObserverPolyfill = __webpack_require__(585);
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -48319,6 +48323,8 @@
}; };
Table.prototype.componentDidMount = function componentDidMount() { Table.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
this.getTableUID(); this.getTableUID();
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus); _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
@ -48333,7 +48339,14 @@
} }
if (this.columnManager.isAnyColumnsFixed()) { if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
this.resizeEvent = (0, _addEventListener2['default'])(window, 'resize', this.resize);
var targetNode = this.contentTable;
if (targetNode) {
this.resizeObserver = new _resizeObserverPolyfill2['default'](function () {
_this2.resize();
});
this.resizeObserver.observe(targetNode);
}
} }
}; };
@ -48468,8 +48481,8 @@
this.contentTable = null; this.contentTable = null;
_utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown); _utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
_utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus); _utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
if (this.resizeEvent) { if (this.resizeObserver) {
this.resizeEvent.remove(); this.resizeObserver.disconnect();
} }
}; };
@ -48685,7 +48698,7 @@
}; };
Table.prototype.getHeaderRows = function getHeaderRows(columns) { Table.prototype.getHeaderRows = function getHeaderRows(columns) {
var _this2 = this; var _this3 = this;
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var rows = arguments[2]; var rows = arguments[2];
@ -48710,8 +48723,8 @@
} }
} }
var width = column.width; var width = column.width;
if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) { if (typeof width == 'string' && width.indexOf('%') > -1 && _this3.contentWidth) {
width = parseInt(_this2.contentWidth * parseInt(width) / 100); width = parseInt(_this3.contentWidth * parseInt(width) / 100);
} else if (width) { } else if (width) {
width = parseInt(width); width = parseInt(width);
} }
@ -48734,9 +48747,9 @@
cell.onClick = column.onHeadCellClick; cell.onClick = column.onHeadCellClick;
} }
if (column.children) { if (column.children) {
_this2.getHeaderRows(column.children, currentRow + 1, rows); _this3.getHeaderRows(column.children, currentRow + 1, rows);
} else { } else {
_this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点 _this3.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
} }
if ('colSpan' in column) { if ('colSpan' in column) {
cell.colSpan = column.colSpan; cell.colSpan = column.colSpan;
@ -48748,7 +48761,7 @@
rows[currentRow].push(cell); rows[currentRow].push(cell);
} }
//判断是否启用过滤 //判断是否启用过滤
if (_this2.props.filterable) { if (_this3.props.filterable) {
//组装Filter需要的Col //组装Filter需要的Col
filterCol.push({ filterCol.push({
key: column.key, key: column.key,
@ -48756,7 +48769,7 @@
width: column.width, width: column.width,
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number'] filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
dataindex: column.dataIndex, //field dataindex: column.dataIndex, //field
datasource: _this2.props.data, //需要单独拿到数据处理 datasource: _this3.props.data, //需要单独拿到数据处理
format: column.format, //设置日期的格式 format: column.format, //设置日期的格式
filterdropdown: column.filterDropdown, //是否显示 show hide filterdropdown: column.filterDropdown, //是否显示 show hide
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据 filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
@ -49047,7 +49060,7 @@
}; };
Table.prototype.getColGroup = function getColGroup(columns, fixed) { Table.prototype.getColGroup = function getColGroup(columns, fixed) {
var _this3 = this; var _this4 = this;
var cols = []; var cols = [];
var self = this; var self = this;
@ -49086,7 +49099,7 @@
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
if (!fixed && c.fixed) { if (!fixed && c.fixed) {
fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body'; fixedClass = ' ' + _this4.props.clsPrefix + '-row-fixed-columns-in-body';
} }
return _react2['default'].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass }); return _react2['default'].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
})); }));
@ -49112,7 +49125,7 @@
}; };
Table.prototype.getTable = function getTable() { Table.prototype.getTable = function getTable() {
var _this4 = this; var _this5 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var columns = options.columns, var columns = options.columns,
@ -49197,6 +49210,12 @@
} else { } else {
if (this.computeWidth > this.contentDomWidth) { if (this.computeWidth > this.contentDomWidth) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px'; bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
var userAgent = navigator.userAgent; // 火狐浏览器，固定表格跟随resize事件产生的滚动条隐藏
var isFF = userAgent.indexOf("Firefox") > -1;
if (isFF) {
// innerBodyStyle.overflowX = 'hidden';
delete innerBodyStyle.overflowX;
}
} }
} }
} else { } else {
@ -49226,27 +49245,27 @@
if (scroll.x === true) { if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'; tableStyle.tableLayout = 'fixed';
} else { } else {
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
} }
} }
// 自动出现滚动条 // 自动出现滚动条
if (!fixed && _this4.contentDomWidth < _this4.contentWidth) { if (!fixed && _this5.contentDomWidth < _this5.contentWidth) {
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth); tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
} }
if (_this4.bodyTable && !fixed && _this4.contentDomWidth === _this4.contentWidth) { if (_this5.bodyTable && !fixed && _this5.contentDomWidth === _this5.contentWidth) {
tableStyle.width = _this4.bodyTable.clientWidth; tableStyle.width = _this5.bodyTable.clientWidth;
} }
var tableBody = hasBody ? getBodyWrapper(_react2['default'].createElement( var tableBody = hasBody ? getBodyWrapper(_react2['default'].createElement(
'tbody', 'tbody',
{ className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave }, { className: clsPrefix + '-tbody', onMouseLeave: _this5.onBodyMouseLeave },
_this4.getRows(columns, fixed) _this5.getRows(columns, fixed)
)) : null; )) : null;
var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : ""; var _drag_class = _this5.props.dragborder ? "table-drag-bordered" : "";
return _react2['default'].createElement( return _react2['default'].createElement(
'table', 'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this4.getColGroup(columns, fixed), _this5.getColGroup(columns, fixed),
hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null, hasHead ? _this5.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
tableBody tableBody
); );
}; };
@ -49258,7 +49277,7 @@
{ {
className: clsPrefix + '-header', className: clsPrefix + '-header',
ref: function ref(el) { ref: function ref(el) {
fixed ? _this4.fixedHeadTable = el : _this4.headTable = el; fixed ? _this5.fixedHeadTable = el : _this5.headTable = el;
}, },
style: headStyle, style: headStyle,
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
@ -49276,7 +49295,7 @@
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget, onTouchStart: this.detectScrollTarget,
ref: function ref(el) { ref: function ref(el) {
_this4.bodyTableOuter = el; _this5.bodyTableOuter = el;
}, },
onMouseLeave: this.onBodyMouseLeave onMouseLeave: this.onBodyMouseLeave
}, },
@ -49284,7 +49303,7 @@
_react2['default'].createElement( _react2['default'].createElement(
'div', 'div',
{ className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) { { className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
_this4.bodyTable = el; _this5.bodyTable = el;
}, style: _extends({}, bodyStyle) }, }, style: _extends({}, bodyStyle) },
renderTable(!useFixedHeader) renderTable(!useFixedHeader)
) )
@ -49311,7 +49330,7 @@
style: _extends({}, innerBodyStyle), style: _extends({}, innerBodyStyle),
className: clsPrefix + '-body-inner', className: clsPrefix + '-body-inner',
ref: function ref(el) { ref: function ref(el) {
return _this4[refName + 'Outer'] = el; return _this5[refName + 'Outer'] = el;
}, },
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget onTouchStart: this.detectScrollTarget
@ -49513,10 +49532,10 @@
}; };
Table.prototype.findExpandedRow = function findExpandedRow(record, index) { Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
var _this5 = this; var _this6 = this;
var rows = this.getExpandedRows().filter(function (i) { var rows = this.getExpandedRows().filter(function (i) {
return i === _this5.getRowKey(record, index); return i === _this6.getRowKey(record, index);
}); });
return rows[0]; return rows[0];
}; };
@ -49660,7 +49679,7 @@
}; };
Table.prototype.render = function render() { Table.prototype.render = function render() {
var _this6 = this; var _this7 = this;
var _state3 = this.state, var _state3 = this.state,
currentHoverRecord = _state3.currentHoverRecord, currentHoverRecord = _state3.currentHoverRecord,
@ -49714,7 +49733,7 @@
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) {
return _this6.contentTable = el; return _this7.contentTable = el;
}, },
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(), this.getTitle(),
@ -49746,7 +49765,7 @@
'div', 'div',
{ className: 'u-row-hover', { className: 'u-row-hover',
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) { onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
return _this6.hoverDom = el; return _this7.hoverDom = el;
} }, } },
props.hoverContent(currentHoverRecord, currentHoverIndex) props.hoverContent(currentHoverRecord, currentHoverIndex)
) )

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.3.15-beta.24", "version": "2.3.15-beta.25",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",
@ -95,6 +95,7 @@
"ref-tree": "2.0.1-beta.1", "ref-tree": "2.0.1-beta.1",
"reqwest": "^2.0.5", "reqwest": "^2.0.5",
"tinper-bee": "latest", "tinper-bee": "latest",
"husky": "^4.2.5" "husky": "^4.2.5",
"resize-observer-polyfill": "^1.5.1"
} }
} }

16
src/Table.js
View File

@ -13,6 +13,7 @@ import Icon from 'bee-icon';
import { Event,EventUtil,closest} from "./lib/utils"; import { Event,EventUtil,closest} from "./lib/utils";
import i18n from "./lib/i18n"; import i18n from "./lib/i18n";
import { getComponentLocale } from "bee-locale/build/tool"; import { getComponentLocale } from "bee-locale/build/tool";
import ResizeObserver from 'resize-observer-polyfill';
const propTypes = { const propTypes = {
data: PropTypes.array, data: PropTypes.array,
@ -202,9 +203,14 @@ class Table extends Component {
} }
if (this.columnManager.isAnyColumnsFixed()) { if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
this.resizeEvent = addEventListener(
window, 'resize', this.resize const targetNode = this.contentTable
); if (targetNode) {
this.resizeObserver = new ResizeObserver(() => {
this.resize()
});
this.resizeObserver.observe(targetNode)
}
} }
} }
@ -331,8 +337,8 @@ class Table extends Component {
this.contentTable = null; this.contentTable = null;
EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown); EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown);
EventUtil.removeHandler(this.contentTable,'focus',this.onFocus); EventUtil.removeHandler(this.contentTable,'focus',this.onFocus);
if (this.resizeEvent) { if (this.resizeObserver) {
this.resizeEvent.remove(); this.resizeObserver.disconnect()
} }
} }