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

滚动时不实时render

This commit is contained in:
wanghaoo 2018-12-03 16:40:25 +08:00
parent 97cf518410
commit 89659dde33
5 changed files with 86 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

136
dist/demo.js vendored
View File

@ -7237,7 +7237,7 @@
duration: _propTypes2["default"].number,
onClose: _propTypes2["default"].func,
children: _propTypes2["default"].any,
color: _propTypes2["default"].oneOf(['info', 'success', 'danger', 'warning', 'light', 'dark', 'news', 'infolight', 'successlight', 'dangerlight', 'warninglight']),
color: _propTypes2["default"].oneOf(['light']),
title: _propTypes2["default"].any
};
@ -7336,7 +7336,7 @@
;
Notice.propTypes = propTypes;
Notice.PropTypes = _propTypes2["default"];
Notice.defaultProps = defaultProps;
exports["default"] = Notice;
@ -10582,6 +10582,10 @@
var _propTypes2 = _interopRequireDefault(_propTypes);
var _componentClasses = __webpack_require__(46);
var _componentClasses2 = _interopRequireDefault(_componentClasses);
var _TableRow = __webpack_require__(106);
var _TableRow2 = _interopRequireDefault(_TableRow);
@ -11600,18 +11604,24 @@
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
var position = '';
if (e.target === bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
this.setState({ scrollPosition: 'left' });
position = 'left';
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
this.setState({ scrollPosition: 'right' });
position = 'right';
} else if (this.state.scrollPosition !== 'middle') {
this.setState({ scrollPosition: 'middle' });
position = 'middle';
}
// if(position){
// classes(this.contentTable)
// .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
// .add(`${prefixCls}-scroll-position-${position}`);
// }
}
if (scroll.y) {
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
@ -12612,7 +12622,11 @@
_this.onLineMouseMove = function (e) {
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
dragborder = _this$props.dragborder;
dragborder = _this$props.dragborder,
contentDomWidth = _this$props.contentDomWidth,
scrollbarWidth = _this$props.scrollbarWidth,
contentTable = _this$props.contentTable,
headerScroll = _this$props.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
@ -12626,11 +12640,36 @@
var newWidth = _this.drag.oldWidth + diff;
if (newWidth > _this.drag.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 修改表体的width
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
//表头滚动条处理
if (headerScroll) {
var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
var newTableWidth = oldTableWidth + diff;
_this.table.table.style.width = newTableWidth; //改变table的width
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
// if(bordered){
// showScroll = showScroll -1;
// }
var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
} else {
contentTableHeader.style.overflowX = 'hidden';
fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
}
}
}
//hao todo
_this.table.table.style.width = parseInt(_this.table.table.style.width) + diff; //改变table的width
};
_this.onLineMouseDown = function (e) {
@ -12652,6 +12691,10 @@
};
_this.onLineMouseUp = function (event) {
var rows = _this.props.rows;
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
_this.clearDragBorder(event);
};
@ -12957,10 +13000,7 @@
TableHeader.prototype.clearDragBorder = function clearDragBorder() {
if (!this.props.dragborder) return;
var rows = this.props.rows;
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = {
option: ""
};
@ -21508,15 +21548,15 @@
InputNumber.prototype.ComponentWillMount = function ComponentWillMount() {};
InputNumber.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (!nextProps.hasOwnProperty('precision')) {
var data = judgeValue(nextProps);
this.setState({
value: data.value,
minusDisabled: data.minusDisabled,
plusDisabled: data.plusDisabled
});
this.tempStorage = data.value;
}
// if(!nextProps.hasOwnProperty('precision')){//如果没有 precision
var data = judgeValue(nextProps);
this.setState({
value: data.value,
minusDisabled: data.minusDisabled,
plusDisabled: data.plusDisabled
});
this.tempStorage = data.value;
// }
};
InputNumber.prototype.ComponentWillUnMount = function ComponentWillUnMount() {
@ -59294,18 +59334,18 @@
}
};
Popconfirm.prototype.handleClose = function handleClose(e) {
Popconfirm.prototype.handleClose = function handleClose() {
var onClose = this.props.onClose;
this.hide();
onClose && onClose(e);
onClose && onClose();
};
Popconfirm.prototype.handleCancel = function handleCancel(e) {
Popconfirm.prototype.handleCancel = function handleCancel() {
var onCancel = this.props.onCancel;
this.hide();
onCancel && onCancel(e);
onCancel && onCancel();
};
Popconfirm.prototype.handleHide = function handleHide() {
@ -59341,8 +59381,7 @@
content = _props.content,
children = _props.children,
onClick = _props.onClick,
stopbubble = _props.stopbubble,
props = _objectWithoutProperties(_props, ['content', 'children', 'onClick', 'stopbubble']);
props = _objectWithoutProperties(_props, ['content', 'children', 'onClick']);
delete props.defaultOverlayShown;
@ -59359,7 +59398,6 @@
_extends({}, confirmProps, {
onClose: this.handleClose,
onCancel: this.handleCancel,
stopbubble: stopbubble,
placement: props.placement }),
content
);
@ -59474,11 +59512,6 @@
*/
arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 阻止冒泡
*/
stopbubble: _propTypes2["default"].number,
/**
* Title content
*/
@ -59489,7 +59522,6 @@
};
var defaultProps = {
stopbubble: 0,
placement: 'right',
clsPrefix: 'u-popconfirm',
locale: {}
@ -59501,27 +59533,7 @@
function Confirm(props) {
_classCallCheck(this, Confirm);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.cancel = function (e) {
var _this$props = _this.props,
stopbubble = _this$props.stopbubble,
onCancel = _this$props.onCancel;
stopbubble && e.stopPropagation();
onCancel(e);
};
_this.close = function (e) {
var _this$props2 = _this.props,
stopbubble = _this$props2.stopbubble,
onClose = _this$props2.onClose;
stopbubble && e.stopPropagation();
onClose(e);
};
return _this;
return _possibleConstructorReturn(this, _React$Component.call(this, props));
}
Confirm.prototype.render = function render() {
@ -59543,8 +59555,7 @@
onClose = _props.onClose,
color = _props.color,
onCancel = _props.onCancel,
stopbubble = _props.stopbubble,
props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel', 'stopbubble']);
props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel']);
var local = (0, _tool.getComponentLocale)(this.props, this.context, 'Popconfirm', function () {
return _i18n2["default"];
@ -59570,10 +59581,7 @@
_extends({}, props, {
role: 'tooltip',
className: (0, _classnames2["default"])(className, classes),
style: outerStyle,
onClick: function onClick(e) {
return stopbubble && e.stopPropagation();
}
style: outerStyle
}),
_react2["default"].createElement('div', { className: 'arrow', style: arrowStyle }),
_react2["default"].createElement(
@ -59586,13 +59594,13 @@
{ className: (0, _classnames2["default"])(clsPrefix + '-confirm') },
_react2["default"].createElement(
_beeButton2["default"],
{ onClick: this.cancel, size: 'sm', style: { minWidth: 50 },
{ onClick: onCancel, size: 'sm', style: { minWidth: 50 },
shape: 'border' },
local['cancel']
),
_react2["default"].createElement(
_beeButton2["default"],
{ onClick: this.close, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
{ onClick: onClose, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
local['ok']
)
)

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
package.json
View File

@ -65,6 +65,7 @@
"shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest",
"component-classes": "^1.2.6",
"warning": "^3.0.0"
},
"peerDependencies": {

14
src/Table.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from 'component-classes';
import TableRow from './TableRow';
import TableHeader from './TableHeader';
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
@ -904,20 +905,27 @@ class Table extends Component {
return;
}
if (e.target.scrollLeft !== this.lastScrollLeft) {
let position = '';
if (e.target === bodyTable && headTable) {
headTable.scrollLeft = e.target.scrollLeft;
} else if (e.target === headTable && bodyTable) {
bodyTable.scrollLeft = e.target.scrollLeft;
}
if (e.target.scrollLeft === 0) {
this.setState({ scrollPosition: 'left' });
position='left';
} else if (e.target.scrollLeft + 1 >=
e.target.children[0].getBoundingClientRect().width -
e.target.getBoundingClientRect().width) {
this.setState({ scrollPosition: 'right' });
position='right';
} else if (this.state.scrollPosition !== 'middle') {
this.setState({ scrollPosition: 'middle' });
position='middle';
}
if(position){
classes(this.contentTable)
.remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
.add(`${prefixCls}-scroll-position-${position}`);
}
}
if (scroll.y) {
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {