Merge branch 'solve-switch-problem'

build/ColumnManager.js

@@ -42,7 +42,7 @@ var ColumnManager = function () {
         title: "",
         key: "dragHandle",
         dataIndex: "dragHandle",
-        fixed: "left",
+        // fixed:"left",
         width: 49,
         render: function render() {
           return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });

build/Table.css

@@ -209,6 +209,8 @@
         color: #1565c0; }
       .u-table td a:active {
         color: #1565c0; }
+    .u-table td .u-switch-span {
+      display: inline-block; }
   .u-table thead tr:last-child {
     border-bottom: 1px solid #C1C7D0; }
   .u-table thead tr > th:last-child {

build/Table.js

@@ -230,7 +230,16 @@ var Table = function (_Component) {
     };
 
     _this.swapArray = function (arr, index1, index2) {
-      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      var value1 = arr[index1];
+      arr.splice(index1, 1);
+      if (index1 < index2) {
+        console.log('向下拖');
+        arr.splice(index2, 0, value1);
+      } else {
+        console.log('向上拖');
+        arr.splice(index2 + 1, 0, value1);
+      }
+
       return arr;
     };
 

build/TableRow.js

@@ -160,17 +160,28 @@ var TableRow = function (_Component) {
     };
 
     _this.onTouchStart = function (e) {
+      e.stopPropagation();
       var onDragRowStart = _this.props.onDragRowStart;
 
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
           target = _target.parentNode;
+
+      if (target.tagName === 'TR') {
+
         _this.currentIndex = target.getAttribute("data-row-key");
 
         onDragRowStart && onDragRowStart(_this.currentIndex);
+      } else {
+
+        _this.canBeTouch = false;
+      }
     };
 
     _this.onTouchMove = function (e) {
+
+      if (!_this.canBeTouch) return;
+      e.stopPropagation();
       var event = _utils.Event.getEvent(e);
       event.preventDefault();
       var touchTarget = _this.getTouchDom(event),
@@ -187,6 +198,13 @@ var TableRow = function (_Component) {
     };
 
     _this.onTouchEnd = function (e) {
+
+      if (!_this.canBeTouch) {
+        _this.canBeTouch = true;
+        return;
+      }
+
+      e.stopPropagation();
       var onDragRow = _this.props.onDragRow;
 
       var event = _utils.Event.getEvent(e),
@@ -317,6 +335,7 @@ var TableRow = function (_Component) {
     _this.expandHeight = 0;
     _this.event = false;
     _this.cacheCurrentIndex = null;
+    _this.canBeTouch = true; //受否允许拖动该行
     return _this;
   }
 

demo/demolist/Demo1201.js

@@ -8,11 +8,12 @@
 
 import React, { Component } from "react";
 import Table from "../../src";
+import Switch from 'bee-switch';
 
 const columns = [
   { title: "员工编号", dataIndex: "a", key: "a", width: 150 },
   { title: "员工姓名", dataIndex: "b", key: "b", width:200 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "系统权限", dataIndex: "c", key: "c", width: 200,render:()=>{return(<Switch size="sm" />)}},
   { title: "部门", dataIndex: "d", key: "d", width: 100 },
   { title: "职级", dataIndex: "e", key: "e", width: 100 }
 ];

dist/demo.css

@@ -194,6 +194,8 @@
         color: #1565c0; }
       .u-table td a:active {
         color: #1565c0; }
+    .u-table td .u-switch-span {
+      display: inline-block; }
   .u-table thead tr:last-child {
     border-bottom: 1px solid #C1C7D0; }
   .u-table thead tr > th:last-child {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bee-table",
- "version": "2.1.9",
+  "version": "2.2.0-alpha.0",
   "description": "Table ui component for react",
   "keywords": [
     "react",
@@ -80,6 +80,7 @@
     "bee-pagination": "^2.0.5",
     "bee-panel": "latest",
     "bee-popover": "^3.0.2",
+    "bee-switch": "^2.0.6",
     "chai": "^3.5.0",
     "console-polyfill": "~0.2.1",
     "cz-conventional-changelog": "^2.1.0",

src/ColumnManager.js

@@ -15,7 +15,7 @@ export default class ColumnManager {
         title: "",
         key: "dragHandle",
         dataIndex: "dragHandle",
-        fixed:"left",
+        // fixed:"left",
         width: 49,
         render: () => {
           return <Icon type="uf-navmenu" />

src/Table.js

@@ -617,7 +617,17 @@ class Table extends Component {
   * @param {number} index2 删除项目的位置
   */
   swapArray = (arr, index1, index2) => {
-    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+    var value1 = arr[index1]
+    arr.splice(index1,1)
+    if(index1<index2){
+      console.log('向下拖')
+      arr.splice(index2,0,value1)
+
+    }else {
+      console.log('向上拖')
+      arr.splice(index2+1,0,value1)
+    }
+ 
      return arr;
   }
 

src/Table.scss

@@ -78,6 +78,9 @@ $icon-color:#505F79;
         color: #1565c0;
       }
     }
+    .u-switch-span{
+      display: inline-block
+    }
   }
   thead{
     tr:last-child{

src/TableRow.js

@@ -62,6 +62,7 @@ class TableRow extends Component{
      this.expandHeight = 0;
      this.event = false;
      this.cacheCurrentIndex = null;
+     this.canBeTouch = true  //受否允许拖动该行
  }
 
 
@@ -194,16 +195,28 @@ class TableRow extends Component{
    * 开始调整交换行的事件
    */
   onTouchStart = (e) => {
+    e.stopPropagation()
     let {onDragRowStart} = this.props;
     let event = Event.getEvent(e) ,
         _target = Event.getTarget(event),
         target = _target.parentNode;
+   
+    if (target.tagName === 'TR') {
+     
       this.currentIndex = target.getAttribute("data-row-key");
 
       onDragRowStart && onDragRowStart(this.currentIndex);
+    }else{
+     
+      this.canBeTouch = false
+    }
+
   }
 
   onTouchMove = (e) => {
+ 
+    if (!this.canBeTouch) return;
+    e.stopPropagation()
     let event = Event.getEvent(e);
     event.preventDefault();
     let touchTarget = this.getTouchDom(event),
@@ -222,6 +235,13 @@ class TableRow extends Component{
    * 手指移开时触发
    */
   onTouchEnd = (e) => {
+   
+    if(!this.canBeTouch){
+      this.canBeTouch = true
+      return
+    }
+
+    e.stopPropagation()
     let {onDragRow} = this.props;
     let event = Event.getEvent(e),
         currentKey = this.currentIndex, //拖拽行的key