log,函数节流处理

build/Table.js

@@ -100,7 +100,8 @@ var propTypes = {
   onFilterClear: _propTypes2["default"].func,
   syncHover: _propTypes2["default"].bool,
   tabIndex: _propTypes2["default"].string,
-  hoverContent: _propTypes2["default"].func
+  hoverContent: _propTypes2["default"].func,
+  size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
 };
 
 var defaultProps = {
@@ -145,7 +146,8 @@ var defaultProps = {
   setRowHeight: function setRowHeight() {},
   setRowParentIndex: function setRowParentIndex() {},
   tabIndex: '0',
-  heightConsistent: false
+  heightConsistent: false,
+  size: 'md'
 };
 
 var Table = function (_Component) {
@@ -156,6 +158,11 @@ var Table = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+    _this.resize = function () {
+      (0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
+      _this.computeTableWidth();
+    };
+
     _this.renderDragHideTable = function () {
       var _this$props = _this.props,
           columns = _this$props.columns,
@@ -270,7 +277,7 @@ var Table = function (_Component) {
     }
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
-      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
+      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
     }
   };
 
@@ -1332,6 +1339,9 @@ var Table = function (_Component) {
         show: loading
       };
     }
+    if (props.size) {
+      className += ' ' + clsPrefix + '-' + props.size;
+    }
 
     return _react2["default"].createElement(
       'div',

build/lib/dragColumn.js

@@ -81,7 +81,7 @@ function dragColumn(Table) {
           columns: _newColumns //cloneDeep(columns)
         });
         // console.log(" onDrop-------columns--- ",_newColumns);
-        console.log(columns === _newColumns);
+        // console.log(columns === _newColumns);
         if (_this.props.onDrop) {
           _this.props.onDrop(event, data, columns);
         }

build/lib/multiSelect.js

@@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
       var count = 0;
       var disabledCount = 0;
       data.forEach(function (da) {
-        if (da._checked) {
+        if (da._checked && !da._disabled) {
           count++;
         }
         if (da._disabled) {
@@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
         key: "checkbox",
         dataIndex: "checkbox",
         fixed: "left",
-        width: 50,
+        width: 60,
         render: function render(text, record, index) {
           var attr = {};
           record._disabled ? attr.disabled = record._disabled : "";

build/lib/newMultiSelect.js

@@ -1,191 +1,17 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 exports["default"] = newMultiSelect;
 
-var _react = require("react");
+var _multiSelect = require('./multiSelect');
 
-var _react2 = _interopRequireDefault(_react);
+var _multiSelect2 = _interopRequireDefault(_multiSelect);
-
-var _util = require("./util");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
-
-/**
- * 参数: 过滤表头
- * @param {*} Table
- * @param {*} Checkbox
- * @param {*} Popover
- * @param {*} Icon
- */
-
 function newMultiSelect(Table, Checkbox) {
-  var _class, _temp, _initialiseProps;
+  return (0, _multiSelect2["default"])(Table, Checkbox);
-
-  return _temp = _class = function (_Component) {
-    _inherits(NewMultiSelect, _Component);
-
-    function NewMultiSelect(props) {
-      _classCallCheck(this, NewMultiSelect);
-
-      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
-      _initialiseProps.call(_this);
-
-      var checkedAll = _this.setChecked(props.data);
-      _this.state = {
-        checkedAll: checkedAll,
-        data: (0, _util.ObjectAssign)(props.data)
-      };
-      return _this;
-    }
-
-    NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-      if (this.props.data != nextProps.data) {
-        this.setState({
-          data: (0, _util.ObjectAssign)(nextProps.data),
-          checkedAll: this.setChecked(nextProps.data)
-        });
-      }
-    };
-
-    NewMultiSelect.prototype.setChecked = function setChecked(data) {
-      var allCheck = true;
-      if (data) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var da = _step.value;
-
-            if (!da._checked) {
-              allCheck = false;
-              break;
-            }
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator["return"]) {
-              _iterator["return"]();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-      }
-      return allCheck;
-    };
-
-    NewMultiSelect.prototype.render = function render() {
-      var columns = this.props.columns;
-      var data = this.state.data;
-
-      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
-    };
-
-    return NewMultiSelect;
-  }(_react.Component), _class.defaultProps = {
-    prefixCls: "u-table-mult-select"
-  }, _initialiseProps = function _initialiseProps() {
-    var _this2 = this;
-
-    this.onAllCheckChange = function () {
-      var _state = _this2.state,
-          data = _state.data,
-          checkedAll = _state.checkedAll;
-
-      var selectList = [];
-      var check = checkedAll ? false : true;
-      data.forEach(function (item) {
-        item._checked = check;
-        if (item._checked) {
-          selectList.push(item);
-        }
-      });
-      _this2.setState({
-        checkedAll: check
-      });
-      _this2.props.getSelectedDataFunc(selectList);
-    };
-
-    this.handleClick = function () {};
-
-    this.onCheckboxChange = function (text, record, index) {
-      return function () {
-        var data = _this2.state.data;
-
-        var selectList = [];
-        record._checked = record._checked ? false : true;
-        var checkedAll = true;
-        for (var i = 0; i < data.length; i++) {
-          var item = data[i];
-          if (!item._checked || item._checked == false) {
-            checkedAll = false;
-            break;
-          }
-        }
-        _this2.setState(_extends({}, _this2.state, {
-          checkedAll: checkedAll
-        }));
-        data.forEach(function (da) {
-          if (da._checked) {
-            selectList.push(da);
-          }
-        });
-        _this2.props.getSelectedDataFunc(selectList, record, index);
-      };
-    };
-
-    this.getDefaultColumns = function (columns) {
-      // let checkedAll = init?false:this.state.checkedAll;
-      var checkedAll = _this2.state.checkedAll;
-
-      var _defaultColumns = [{
-        title: _react2["default"].createElement(Checkbox, {
-          className: "table-checkbox",
-          checked: checkedAll
-          // indeterminate={indeterminate_bool && !this.state.checkedAll}
-          , onChange: _this2.onAllCheckChange
-        }),
-        key: "checkbox",
-        dataIndex: "checkbox",
-        fixed: "left",
-        width: 50,
-        render: function render(text, record, index) {
-          var attr = {};
-          record._disabled ? attr.disabled = record._disabled : "";
-          return _react2["default"].createElement(Checkbox, _extends({
-            key: index,
-            className: "table-checkbox"
-          }, attr, {
-            checked: record._checked,
-            onClick: _this2.handleClick,
-            onChange: _this2.onCheckboxChange(text, record, index)
-          }));
-        }
-      }];
-      return _defaultColumns.concat(columns);
-    };
-  }, _temp;
 }
-module.exports = exports["default"];
+module.exports = exports['default'];

demo/demolist/Demo0404.js

@@ -8,7 +8,7 @@
 import React, { Component } from 'react';
 import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
 import Table from '../../src';
-import multiSelect from "../../src/lib/multiSelect";
+import multiSelect from "../../src/lib/newMultiSelect";
 import sort from "../../src/lib/sort";
 
 const { Item } = Menu;

dist/demo.css

@@ -8857,6 +8857,10 @@ ul {
 ::-webkit-scrollbar-track-piece {
   display: none; }
 
+.u-table-drag-hidden-cont {
+  position: absolute;
+  top: -1000px; }
+
 .selected {
   background: #FFF7E7; }
 

src/Table.scss

@@ -906,4 +906,9 @@ $icon-color:#505F79;
 
 ::-webkit-scrollbar-track-piece {
   display: none;
-}
+}
+
+.u-table-drag-hidden-cont{
+  position: absolute;
+  top:-1000px;
+}

src/TableHeader.js

@@ -14,6 +14,7 @@ const propTypes = {
 
 function getDiv(id){
   let div = document.createElement("div");
+  div.className = "u-table-drag-hidden-cont";
   div.id = id;
   return div;
 }
@@ -66,7 +67,6 @@ class TableHeader extends Component {
   initTable(){
     const {contentTable} = this.props;
     if(!this.props.dragborder && !this.props.draggable)return;
-    // let el = ReactDOM.findDOMNode(this);
     let tableDome = this._thead.parentNode;
     let table = {};
     if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
@@ -119,9 +119,8 @@ class TableHeader extends Component {
     let  events = [
       {key:'mouseup', fun:this.onTrMouseUp},
       {key:'mousemove', fun:this.onTrMouseMove},
-      // {key:'mousedown', fun:this.onTrMouseDown}
+      // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
     ];
-    // console.log(" ---- ",this.table.tr);
     this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
   }
 
@@ -132,7 +131,6 @@ class TableHeader extends Component {
     let  events = [
       {key:'mouseup', fun:this.onTrMouseUp},
       {key:'mousemove', fun:this.onTrMouseMove},
-      // {key:'mousedown', fun:this.onTrMouseDown}
     ];
     this.eventListen(events,'remove',this.table.tr[0]);
   }
@@ -179,11 +177,9 @@ class TableHeader extends Component {
     let event = Event.getEvent(e) ,
     targetEvent = Event.getTarget(event);
     const { clsPrefix, contentTable } = this.props;
-    // console.log(" ------------------onTrMouseDown------------------ ");
     let currentElement = this.getOnLineObject(targetEvent);
     if(!currentElement)return;
     let type = currentElement.getAttribute('data-type');
-    // console.log("type : ",type);
     if(!this.props.dragborder && !this.props.draggable)return;
     if(type == 'online' && this.props.dragborder){
       if(!this.props.dragborder)return;
@@ -197,7 +193,6 @@ class TableHeader extends Component {
       this.drag.oldWidth = parseInt((currentObj).style.width);
       this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
       this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
-      // console.log("====================",this.drag);
     }else if(type != 'online' &&  this.props.draggable){
         if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
         targetEvent.setAttribute('draggable',true);//添加交换列效果
@@ -205,24 +200,22 @@ class TableHeader extends Component {
         this.currentDome = event.target;
         let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
         this.drag.currIndex = currentIndex;
-        // console.log(" ------------------onTrMouseDown------this.drag------------ ",this.drag); 
     }else{
       // console.log("onTrMouseDown dragborder or draggable is all false !");
       return ;
     }
   };
-
+ 
-
   /**
    * 调整列宽的move事件
    * @memberof TableHeader
    */
   onTrMouseMove = (e) => {
+    if(!this.props.dragborder && !this.props.draggable)return;
     const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);  
     if(this.props.dragborder && this.drag.option == "border"){
-      // console.log(" --onTrMouseMove--border- ",this.drag.option);
       //移动改变宽度
       let currentCols = this.table.cols[this.drag.currIndex];
       let diff = (event.x - this.drag.oldLeft); 
@@ -276,7 +269,6 @@ class TableHeader extends Component {
       // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
     }else{
       // console.log("onTrMouseMove dragborder or draggable is all false !");
-      // return ;
     }
   }
 
@@ -318,7 +310,6 @@ class TableHeader extends Component {
    */
   bodyonLineMouseUp = (events,type) =>{
     if(!this.drag || !this.drag.option)return;
-    // console.log("----bodyEventListen",this.drag);
     this.mouseClear();
   }
 
@@ -392,7 +383,6 @@ class TableHeader extends Component {
 
     if(event.dataTransfer.setDragImage){
       var crt = target.cloneNode(true);
-      // console.log(" -------crt-------",crt);
       crt.style.backgroundColor = "#ebecf0";
       crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
       crt.style.height = "40px";
@@ -420,8 +410,7 @@ class TableHeader extends Component {
     if(this.drag && this.drag.option != 'dragAble'){return;}
     let event = Event.getEvent(e) ,
     target = Event.getTarget(event);
-    this.currentDome.setAttribute('draggable',false);//添加交换列效果 
+    this.currentDome.setAttribute('draggable',false);//添加交换列效果
-    // console.log("-onDrop--target---",target);
   };
 
 
@@ -432,11 +421,9 @@ class TableHeader extends Component {
     let currentIndex = target.getAttribute("data-line-index");
     if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
     if(target.nodeName.toUpperCase() === "TH"){
-      // console.log("-onDragEnter-----",target);
       // target.style.border = "2px dashed rgba(5,0,0,0.25)";
       target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
       // target.style.backgroundColor = 'rgb(235, 236, 240)';
-      // target.style['box-sizing'] = 'border-box';
     }
   }
 
@@ -461,9 +448,6 @@ class TableHeader extends Component {
     let currentIndex = target.getAttribute("data-line-index");
     if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
     if(target.nodeName.toUpperCase() === "TH"){
-      // console.log("--onDragLeave----",target);
-      // console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
-      // target.style = "";
       target.setAttribute("style","");
       // this._dragCurrent.style = "";
     }

src/lib/newMultiSelect.js

@@ -1,133 +1,5 @@
-import React, { Component } from "react";
+import  multiSelect from './multiSelect';
-import {ObjectAssign} from './util';
-/**
- * 参数: 过滤表头
- * @param {*} Table
- * @param {*} Checkbox
- * @param {*} Popover
- * @param {*} Icon
- */
 
 export default function newMultiSelect(Table, Checkbox) {
-
+  return multiSelect(Table, Checkbox);
-  return class NewMultiSelect extends Component {
-    static defaultProps = {
-      prefixCls: "u-table-mult-select"
-    }
-
-    constructor(props) {
-      super(props);
-      let checkedAll = this.setChecked(props.data);
-      this.state = {
-        checkedAll,
-        data:ObjectAssign(props.data),
-      }
-    }
-
-    componentWillReceiveProps(nextProps){
-      if(this.props.data != nextProps.data){
-        this.setState({
-          data:ObjectAssign(nextProps.data),
-          checkedAll:this.setChecked(nextProps.data),
-        })
-      }
-    }
-
-    setChecked(data){
-      let allCheck = true;
-      if(data){
-        for (const da of data) {
-          if(!da._checked){
-            allCheck = false;
-            break;
-          }
-        }
-      }
-      return allCheck;
-    }
-
-    onAllCheckChange=()=>{
-      let {data,checkedAll} = this.state;
-      let selectList = [];
-      let check = checkedAll?false:true;
-      data.forEach(item => {
-        item._checked = check;
-        if(item._checked){
-          selectList.push(item);
-        }
-      });
-      this.setState({
-        checkedAll:check
-      });
-      this.props.getSelectedDataFunc(selectList);
-    }
-
-    handleClick=()=>{
-      
-    }
- 
-    onCheckboxChange = (text, record, index) => () => {
-      let {data} = this.state;
-      let selectList = [];
-      record._checked = record._checked?false:true;
-      let checkedAll = true;
-      for(let i=0;i<data.length;i++){
-        let item = data[i];
-        if(!item._checked || item._checked == false){
-          checkedAll = false;
-          break;
-        }
-      }
-      this.setState({
-        ...this.state,
-        checkedAll
-      })
-      data.forEach((da)=>{
-        if(da._checked){
-          selectList.push(da);
-        }
-      })
-      this.props.getSelectedDataFunc(selectList,record,index);
-    };
-
-    
-
-    getDefaultColumns=(columns)=>{
-      // let checkedAll = init?false:this.state.checkedAll;
-      let {checkedAll} = this.state;
-      let _defaultColumns =[{
-          title: (
-            <Checkbox
-              className="table-checkbox"
-              checked={checkedAll}
-              // indeterminate={indeterminate_bool && !this.state.checkedAll}
-              onChange={this.onAllCheckChange}
-            />
-          ),
-          key: "checkbox",
-          dataIndex: "checkbox",
-          fixed:"left",
-          width: 50,
-          render: (text, record, index) => {
-            let attr = {};
-            record._disabled?attr.disabled = record._disabled:"";
-            return <Checkbox
-                key={index}
-                className="table-checkbox"
-                {...attr}
-                checked={record._checked}
-                onClick={this.handleClick}
-                onChange={this.onCheckboxChange(text, record, index)}
-              ></Checkbox>
-          }
-        }]
-        return _defaultColumns.concat(columns);
-    }
-
-    render() {
-      const {columns} = this.props;
-      const {data} = this.state;
-      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
-    }
-  };
 }