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

fix: ie 下展开表格当含有height时不再动态获取该表格高度

This commit is contained in:
izbz wh 2020-12-23 14:05:37 +08:00
parent 2e48c17f25
commit 8a0bba14dd
4 changed files with 101 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
build/Table.js
View File

@ -459,7 +459,7 @@ var Table = function (_Component) {
Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃 // todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃
// https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09 // https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09
if (this.columnManager.isAnyColumnsFixed() && !prevProps.height && prevProps.data == this.props.data) { if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
} }
@ -1464,16 +1464,19 @@ var Table = function (_Component) {
var fixedColumnsExpandedRowsHeight = {}; var fixedColumnsExpandedRowsHeight = {};
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 // expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) { expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"), var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
height = row && parseInt(row.getBoundingClientRect().height) || 'auto'; var exHeight = height;
try { if (!exHeight) {
//子表数据减少时，动态计算高度 exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
var td = row.querySelector('td'); try {
var tdPadding = _this5.getTdPadding(td); //子表数据减少时，动态计算高度
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); var td = row.querySelector('td');
height = trueheight + tdPadding; var tdPadding = _this5.getTdPadding(td);
} catch (error) {} var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(height); exHeight = trueheight + tdPadding;
} catch (error) {}
}
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
}); });
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) { if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
return; return;

91
dist/demo.js vendored
View File

@ -48143,7 +48143,7 @@
Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃 // todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃
// https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09 // https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09
if (this.columnManager.isAnyColumnsFixed() && !prevProps.height && prevProps.data == this.props.data) { if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
} }
@ -49148,16 +49148,19 @@
var fixedColumnsExpandedRowsHeight = {}; var fixedColumnsExpandedRowsHeight = {};
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 // expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) { expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"), var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
height = row && parseInt(row.getBoundingClientRect().height) || 'auto'; var exHeight = height;
try { if (!exHeight) {
//子表数据减少时，动态计算高度 exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
var td = row.querySelector('td'); try {
var tdPadding = _this5.getTdPadding(td); //子表数据减少时，动态计算高度
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); var td = row.querySelector('td');
height = trueheight + tdPadding; var tdPadding = _this5.getTdPadding(td);
} catch (error) {} var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(height); exHeight = trueheight + tdPadding;
} catch (error) {}
}
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
}); });
if ((0, _shallowequal2['default'])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2['default'])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2['default'])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) { if ((0, _shallowequal2['default'])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2['default'])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2['default'])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
return; return;
@ -63371,7 +63374,8 @@
showMinute = props.showMinute, showMinute = props.showMinute,
showSecond = props.showSecond, showSecond = props.showSecond,
autoTriggerChange = props.autoTriggerChange, autoTriggerChange = props.autoTriggerChange,
others = _objectWithoutProperties(props, ["showClose", "defaultPanelShown", "onBlur", "showHour", "showMinute", "showSecond", "autoTriggerChange"]); inputShowValue = props.inputShowValue,
others = _objectWithoutProperties(props, ["showClose", "defaultPanelShown", "onBlur", "showHour", "showMinute", "showSecond", "autoTriggerChange", "inputShowValue"]);
var value = state.value; var value = state.value;
var pickerChangeHandler = {}; var pickerChangeHandler = {};
@ -63416,10 +63420,10 @@
if (props.keyboardInput) { if (props.keyboardInput) {
keyboardInputProps.readOnly = false; keyboardInputProps.readOnly = false;
keyboardInputProps.onChange = this.inputChange; keyboardInputProps.onChange = this.inputChange;
keyboardInputProps.value = state.inputValue && state.inputValue.format && state.inputValue.isValid() && this.props.validatorFunc(state.inputValue) ? state.inputValue.format(props.format) : state.inputValue; keyboardInputProps.value = inputShowValue || (state.inputValue && state.inputValue.format && state.inputValue.isValid() && this.props.validatorFunc(state.inputValue) ? state.inputValue.format(props.format) : state.inputValue);
} else { } else {
keyboardInputProps.readOnly = true; keyboardInputProps.readOnly = true;
keyboardInputProps.value = value && this.getValue(value) || ""; keyboardInputProps.value = inputShowValue || value && this.getValue(value) || "";
} }
var classes = (0, _classnames2["default"])(props.className, "datepicker-container"); var classes = (0, _classnames2["default"])(props.className, "datepicker-container");
return _react2["default"].createElement( return _react2["default"].createElement(
@ -63536,16 +63540,22 @@
input.focus(); input.focus();
} }
input.onkeydown = function (e) { input.onkeydown = function (e) {
// 日历的input
if (e.keyCode == _tinperBeeCore.KeyCode.DELETE) { if (e.keyCode == _tinperBeeCore.KeyCode.DELETE) {
input.value = ''; input.value = '';
_this3.fireChange('', ''); _this3.fireChange('', '');
} else if (e.keyCode == _tinperBeeCore.KeyCode.ESC) { } else if (e.keyCode == _tinperBeeCore.KeyCode.ESC || e.keyCode == _tinperBeeCore.KeyCode.TAB) {
if (e.keyCode == _tinperBeeCore.KeyCode.TAB) {
console.debug('[bee-datepicker] [DatePicker] e.keyCode == KeyCode.TAB');
}
_this3.setState({ _this3.setState({
open: false open: false
}); });
var v = _this3.state.value; var v = _this3.state.value;
_this3.props.onOpenChange(false, v, v && _this3.getValue(v) || ''); _this3.props.onOpenChange(false, v, v && _this3.getValue(v) || '');
console.debug(' [bee-datepicker] [DatePicker] ReactDOM.findDOMNode(this.outInput)', _reactDom2["default"].findDOMNode(_this3.outInput));
_reactDom2["default"].findDOMNode(_this3.outInput).focus(); // 按esc时候焦点回到input输入框 _reactDom2["default"].findDOMNode(_this3.outInput).focus(); // 按esc时候焦点回到input输入框
// e.stopPropagation();
} else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) { } else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
var parsed = (0, _moment2["default"])(input.value, format, true); var parsed = (0, _moment2["default"])(input.value, format, true);
var isDisabled = disabledDate && disabledDate(parsed); var isDisabled = disabledDate && disabledDate(parsed);
@ -63562,6 +63572,14 @@
open: false open: false
}); });
} }
} else if (e.keyCode >= 37 && e.keyCode <= 40) {
// 向下
// 自定义_dataTransfer
e.target._dataTransfer = {
owner: _reactDom2["default"].findDOMNode(_this3.outInput),
_target: e.target
// e.target.___onCalendarKeyDown = true;
};
} }
_this3.props.onKeyDown && _this3.props.onKeyDown(e); _this3.props.onKeyDown && _this3.props.onKeyDown(e);
}; };
@ -63627,7 +63645,7 @@
_this3.setState({ _this3.setState({
inputValue: value inputValue: value
}); });
if ((0, _moment2["default"])(value, _this3.props.format).isValid() && _this3.props.validatorFunc(value)) { if ((0, _moment2["default"])(value, _this3.props.format, true).isValid() && _this3.props.validatorFunc(value)) {
_this3.setState({ _this3.setState({
value: (0, _moment2["default"])(value, _this3.props.format) value: (0, _moment2["default"])(value, _this3.props.format)
}); });
@ -63668,7 +63686,10 @@
_this3.fireChange(null, value); _this3.fireChange(null, value);
} }
} }
_this3.props.outInputKeydown && _this3.props.outInputKeydown(e); if (_this3.props.outInputKeydown) {
console.debug('[bee-datepicker] [DatePicker] exist this.props.outInputKeydown and the props is ,' + _this3.props);
_this3.props.outInputKeydown(e);
}
}; };
this.onMouseLeave = function (e) { this.onMouseLeave = function (e) {
@ -88503,8 +88524,12 @@
var _this2 = this; var _this2 = this;
this.onCalendarKeyDown = function (event) { this.onCalendarKeyDown = function (event) {
if (event.keyCode === _KeyCode2["default"].ESC) { if (event.keyCode === _KeyCode2["default"].ESC || event.keyCode === _KeyCode2["default"].TAB) {
event.stopPropagation(); event.stopPropagation();
event.target._dataTransfer = {
owner: _reactDom2["default"].findDOMNode(_this2.outInput),
_target: e.target
};
_this2.close(_this2.focus); _this2.close(_this2.focus);
} }
_this2.props.onKeyDown && _this2.props.onKeyDown(event); _this2.props.onKeyDown && _this2.props.onKeyDown(event);
@ -88528,11 +88553,34 @@
}; };
this.onKeyDown = function (event) { this.onKeyDown = function (event) {
// formcontrol onKeyDown
var enterKeyDown = _this2.props.enterKeyDown; var enterKeyDown = _this2.props.enterKeyDown;
console.debug('++++++++++++++++++++++++ [bee Picker.js] [event.keyCode ===' + event.keyCode + '] ');
if (event.keyCode === _KeyCode2["default"].DOWN || enterKeyDown && event.keyCode === _KeyCode2["default"].ENTER) { if (event.keyCode === _KeyCode2["default"].DOWN || enterKeyDown && event.keyCode === _KeyCode2["default"].ENTER) {
if (!_this2.state.open) _this2.open(); if (!_this2.state.open) {
_this2.open();
event.nativeEvent.stopImmediatePropagation();
// event.target._dataTransfer = {
// owner: e
// }
}
event.preventDefault(); event.preventDefault();
event.stopPropagation();
// delete event.keyCode;
console.debug('++++++++++++++++++++++++ [bee Picker.js] event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); ');
} else if (event.keyCode === _KeyCode2["default"].TAB) {
if (_this2.state.open) {
console.debug('+TABTABTABTABTABTABTABTABTABTAB [bee Picker.js] this.close() event.stopPropagation()');
_this2.close();
_this2.focus();
event.preventDefault();
event.stopPropagation();
} else {
console.debug('+TABTABTABTABTABTABTABTABTABTAB [bee Picker.js] nothing to do');
}
} else {
console.debug('NONONONONONONONOONONO [bee Picker.js] nothing to do');
} }
_this2.props.onKeyDown && _this2.props.onKeyDown(event); _this2.props.onKeyDown && _this2.props.onKeyDown(event);
}; };
@ -88594,6 +88642,11 @@
if (!_this2.state.open) { if (!_this2.state.open) {
_reactDom2["default"].findDOMNode(_this2).focus(); _reactDom2["default"].findDOMNode(_this2).focus();
} }
// } else {
// // ReactDOM.findDOMNode(this).focus();
// if(this.calendarInstance)
// this.calendarInstance.focus();
// }
}; };
this.focusCalendar = function () { this.focusCalendar = function () {

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

25
src/Table.js
View File

@ -251,7 +251,7 @@ class Table extends Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
// todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃 // todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃
// https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09 // https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09
if(this.columnManager.isAnyColumnsFixed() && !prevProps.height && prevProps.data == this.props.data) { if(this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
} }
@ -1245,17 +1245,20 @@ class Table extends Component {
const fixedColumnsExpandedRowsHeight = {}; const fixedColumnsExpandedRowsHeight = {};
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 // expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => { expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"), let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
height = row && parseInt(row.getBoundingClientRect().height) || 'auto'; let exHeight = height;
try {//子表数据减少时，动态计算高度 if(!exHeight) {
let td = row.querySelector('td'); exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
let tdPadding = this.getTdPadding(td); try {//子表数据减少时，动态计算高度
let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height); let td = row.querySelector('td');
height = trueheight+tdPadding; let tdPadding = this.getTdPadding(td);
} catch (error) { let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
exHeight = trueheight+tdPadding;
} catch (error) {
} }
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(height); }
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
}) })
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) &&