feat: 支持表头自定义mouseDown事件

This commit is contained in:
izbz wh 2020-09-21 11:05:41 +08:00
parent 3e3b11508d
commit dc00d42445
10 changed files with 19918 additions and 27946 deletions

5
.gitignore vendored
View File

@ -40,4 +40,7 @@ coverage
.*.swp
package-lock.json
demo/.DS_Store
demo/demolist/.DS_Store
demo/demolist/.DS_Store
# vsCode
.history

View File

@ -638,7 +638,8 @@ var Table = function (_Component) {
bordered = _props2.bordered,
onDropBorder = _props2.onDropBorder,
onDraggingBorder = _props2.onDraggingBorder,
bodyDisplayInRow = _props2.bodyDisplayInRow;
bodyDisplayInRow = _props2.bodyDisplayInRow,
headerEventNoStop = _props2.headerEventNoStop;
this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空
var rows = this.getHeaderRows(columns);
@ -686,7 +687,8 @@ var Table = function (_Component) {
bordered: bordered,
leftFixedWidth: leftFixedWidth,
rightFixedWidth: rightFixedWidth,
bodyDisplayInRow: bodyDisplayInRow
bodyDisplayInRow: bodyDisplayInRow,
eventNoStop: headerEventNoStop
})) : null;
};
@ -972,7 +974,7 @@ var Table = function (_Component) {
indent: indent,
indentSize: props.indentSize,
needIndentSpaced: needIndentSpaced,
className: className + ' ' + (props.rowDraggAble && !props.useDragHandle ? 'row-dragg-able ' : ''),
className: '' + className,
record: record,
expandIconAsCell: expandIconAsCell,
onDestroy: this.onRowDestroy,

View File

@ -271,6 +271,12 @@ var TableCell = function (_Component) {
onPaste(e, position);
};
_this.onCellMouseOver = function (e) {
var column = _this.props.column;
_this.props.stopRowDrag(column.notRowDrag);
};
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.state = {
@ -461,6 +467,7 @@ var TableCell = function (_Component) {
onClick: this.handleClick,
title: title,
onPaste: this.onPaste,
onMouseOver: this.onCellMouseOver,
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
indentText,
expandIcon,

View File

@ -569,7 +569,9 @@ var _initialiseProps = function _initialiseProps() {
};
this.onTrMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var eventNoStop = _this8.props.eventNoStop;
!eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e),
targetEvent = _utils.Event.getTarget(event);
var _props3 = _this8.props,
@ -668,9 +670,10 @@ var _initialiseProps = function _initialiseProps() {
onDraggingBorder = _props4.onDraggingBorder,
leftFixedWidth = _props4.leftFixedWidth,
rightFixedWidth = _props4.rightFixedWidth,
bodyDisplayInRow = _props4.bodyDisplayInRow;
bodyDisplayInRow = _props4.bodyDisplayInRow,
eventNoStop = _props4.eventNoStop;
_utils.Event.stopPropagation(e);
!eventNoStop && _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (_this8.props.dragborder && _this8.drag.option == "border") {
//移动改变宽度

View File

@ -115,7 +115,7 @@ var TableRow = function (_Component) {
_this.onDragStart = function (e) {
var onDragRowStart = _this.props.onDragRowStart;
if (!_this.props.rowDraggAble) return;
if (!_this.props.rowDraggAble || _this.notRowDrag) return;
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
if (target.tagName === 'TD') {
@ -305,6 +305,17 @@ var TableRow = function (_Component) {
}
};
_this.stopRowDrag = function (isStop) {
var rowDraggAble = _this.props.rowDraggAble;
var notRowDrag = _this.state.notRowDrag;
if (rowDraggAble && isStop !== notRowDrag) {
_this.setState({
notRowDrag: isStop
});
}
};
_this.set = function (fn) {
_this.clear();
_this._timeout = window.setTimeout(fn, 300);
@ -576,6 +587,7 @@ var TableRow = function (_Component) {
lazyStartIndex = _props10.lazyStartIndex,
lazyEndIndex = _props10.lazyEndIndex,
expandIconCellWidth = _props10.expandIconCellWidth;
var notRowDrag = this.state.notRowDrag;
var showSum = false;
var className = this.props.className;
@ -636,6 +648,7 @@ var TableRow = function (_Component) {
lazyStartIndex: lazyStartIndex,
lazyEndIndex: lazyEndIndex,
onPaste: onPaste,
stopRowDrag: this.stopRowDrag,
col: i
}));
}
@ -646,10 +659,15 @@ var TableRow = function (_Component) {
if (record && record._checked) {
className += ' selected';
}
if (rowDraggAble && !useDragHandle && !notRowDrag) {
className += ' row-dragg-able';
}
return _react2["default"].createElement(
'tr',
{
draggable: rowDraggAble && !useDragHandle,
draggable: rowDraggAble && !useDragHandle && !notRowDrag,
onClick: this.onRowClick,
onDoubleClick: this.onRowDoubleClick,
onMouseEnter: this.onMouseEnter,

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

47799
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -436,7 +436,7 @@ class Table extends Component {
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow} = this.props;
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop} = this.props;
this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -487,6 +487,7 @@ class Table extends Component {
leftFixedWidth = {leftFixedWidth}
rightFixedWidth = {rightFixedWidth}
bodyDisplayInRow = {bodyDisplayInRow}
eventNoStop = {headerEventNoStop}
/>
) : null;
}

View File

@ -245,7 +245,8 @@ class TableHeader extends Component {
* @memberof TableHeader
*/
onTrMouseDown = (e) => {
Event.stopPropagation(e);
const { eventNoStop } = this.props;
!eventNoStop && Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props;
@ -337,8 +338,8 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow} = this.props;
Event.stopPropagation(e);
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow, eventNoStop} = this.props;
!eventNoStop && Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度