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

tinper-bee · Sep 21, 2020 · dc00d42 · dc00d42
1 parent 3e3b115
commit dc00d42
Show file tree

Hide file tree

Showing 10 changed files with 169,851 additions and 177,879 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,4 +40,7 @@ coverage
 .*.swp
 package-lock.json
 demo/.DS_Store
-demo/demolist/.DS_Store
+demo/demolist/.DS_Store
+
+# vsCode
+.history
diff --git a/build/Table.js b/build/Table.js
@@ -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,

diff --git a/build/TableCell.js b/build/TableCell.js
@@ -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,

diff --git a/build/TableHeader.js b/build/TableHeader.js
@@ -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") {
       //移动改变宽度

diff --git a/build/TableRow.js b/build/TableRow.js
@@ -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,