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

13
build/Table.js
View File

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

79
dist/demo.js vendored
View File

@ -48143,7 +48143,7 @@
Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃
// 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();
}
@ -49148,16 +49148,19 @@
var fixedColumnsExpandedRowsHeight = {};
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
height = row && parseInt(row.getBoundingClientRect().height) || 'auto';
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
var exHeight = height;
if (!exHeight) {
exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
try {
//子表数据减少时，动态计算高度
var td = row.querySelector('td');
var tdPadding = _this5.getTdPadding(td);
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
height = trueheight + tdPadding;
exHeight = trueheight + tdPadding;
} catch (error) {}
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(height);
}
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)) {
return;
@ -63371,7 +63374,8 @@
showMinute = props.showMinute,
showSecond = props.showSecond,
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 pickerChangeHandler = {};
@ -63416,10 +63420,10 @@
if (props.keyboardInput) {
keyboardInputProps.readOnly = false;
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 {
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");
return _react2["default"].createElement(
@ -63536,16 +63540,22 @@
input.focus();
}
input.onkeydown = function (e) {
// 日历的input
if (e.keyCode == _tinperBeeCore.KeyCode.DELETE) {
input.value = '';
_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({
open: false
});
var v = _this3.state.value;
_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输入框
// e.stopPropagation();
} else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
var parsed = (0, _moment2["default"])(input.value, format, true);
var isDisabled = disabledDate && disabledDate(parsed);
@ -63562,6 +63572,14 @@
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);
};
@ -63627,7 +63645,7 @@
_this3.setState({
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({
value: (0, _moment2["default"])(value, _this3.props.format)
});
@ -63668,7 +63686,10 @@
_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) {
@ -88503,8 +88524,12 @@
var _this2 = this;
this.onCalendarKeyDown = function (event) {
if (event.keyCode === _KeyCode2["default"].ESC) {
if (event.keyCode === _KeyCode2["default"].ESC || event.keyCode === _KeyCode2["default"].TAB) {
event.stopPropagation();
event.target._dataTransfer = {
owner: _reactDom2["default"].findDOMNode(_this2.outInput),
_target: e.target
};
_this2.close(_this2.focus);
}
_this2.props.onKeyDown && _this2.props.onKeyDown(event);
@ -88528,11 +88553,34 @@
};
this.onKeyDown = function (event) {
// formcontrol onKeyDown
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 (!_this2.state.open) _this2.open();
if (!_this2.state.open) {
_this2.open();
event.nativeEvent.stopImmediatePropagation();
// event.target._dataTransfer = {
// owner: e
// }
}
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);
};
@ -88594,6 +88642,11 @@
if (!_this2.state.open) {
_reactDom2["default"].findDOMNode(_this2).focus();
}
// } else {
// // ReactDOM.findDOMNode(this).focus();
// if(this.calendarInstance)
// this.calendarInstance.focus();
// }
};
this.focusCalendar = function () {

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

13
src/Table.js
View File

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