yyuap-ref/dist2/components/ref/RefTable.js

cloud os fe ref project which is based on tinper

'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; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _table = require('../../bee/table');

var _table2 = _interopRequireDefault(_table);

var _button = require('../../bee/button');

var _button2 = _interopRequireDefault(_button);

var _checkbox = require('../../bee/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _pagination = require('../../bee/pagination');

var _pagination2 = _interopRequireDefault(_pagination);

var _loading = require('../../bee/loading');

var _loading2 = _interopRequireDefault(_loading);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; }

var RefTable = function (_Component) {
  _inherits(RefTable, _Component);

  function RefTable(props) {
    _classCallCheck(this, RefTable);

    var _this = _possibleConstructorReturn(this, (RefTable.__proto__ || Object.getPrototypeOf(RefTable)).call(this, props));

    _this.onAllCheckChange = function () {
      var self = _this;
      var checkedArray = [];
      var listData = self.state.data.concat();
      var tabActiveKey = self.props.tabActiveKey;
      if (tabActiveKey == '__selected') {
        self.setState({
          checkedAll: false,
          checkedArray: []
        });
        _this.onSelectTableItems([]);
      } else {
        for (var i = 0; i < self.state.checkedArray.length; i++) {
          checkedArray[i] = !self.state.checkedAll;
        }
        self.setState({
          checkedAll: !self.state.checkedAll,
          checkedArray: checkedArray
        });
        var a = listData.slice().filter(function (v, k) {
          return checkedArray[k] == true;
        });
        _this.onSelectTableItems(a);
      }
    };

    _this.onCheckboxChange = function (text, record, index) {
      var self = _this;
      var allFlag = false;
      var checkedArray = self.state.checkedArray.concat();
      checkedArray[index] = !self.state.checkedArray[index];
      for (var i = 0; i < self.state.checkedArray.length; i++) {
        if (checkedArray[i] == false) {
          allFlag = false;
          break;
        } else {
          allFlag = true;
        }
      }
      self.setState({
        checkedAll: allFlag,
        checkedArray: checkedArray
      });
      var a = _this.state.data.slice().filter(function (v, k) {
        return checkedArray[k] == true;
      });
      _this.onSelectTableItems(a);
    };

    _this.clickRowHandler = function (record, index, event) {
      var checkedArray = _this.state.checkedArray.concat();
      if (_this.props.isRadio) {
        checkedArray = checkedArray.map(function (v, k) {
          if (k !== index) {
            return false;
          }
        });
      }
      checkedArray[index] = !_this.state.checkedArray[index];
      _this.setState({
        checkedArray: checkedArray
      });
      var a = _this.state.data.slice().filter(function (v, k) {
        return checkedArray[k] == true;
      });

      _this.onSelectTableItems(a);
    };

    _this.clickRowDoubleHandler = function (record, index, event) {
      var checkedArray = _this.state.checkedArray.concat();
      if (_this.props.isRadio) {
        checkedArray = checkedArray.map(function (v, k) {
          if (k !== index) {
            return false;
          }
          return true;
        });
        checkedArray[index] = !_this.state.checkedArray[index];
        _this.setState({
          checkedArray: checkedArray
        });
        var a = _this.state.data.slice().filter(function (v, k) {
          return checkedArray[k] == true;
        });

        _this.onSelectTableItems(a, 'isRadio');
        // setTimeout(()=>{
        //   this.onClickBtn('save');
        // },100)
      }
    };

    _this.rowClassNameHandler = function (record, index, indent) {
      if (_this.state.checkedArray[index]) {
        // if(this.props.isRadio){
        return 'selected';
        // }else{
        //   return '';
        // }
      } else {
        return '';
      }
    };

    _this.onSelectTableItems = _this.onSelectTableItems.bind(_this);
    _this.onClickBtn = _this.onClickBtn.bind(_this);
    return _this;
  }

  // initScroll = (refTable) => {
  //   // 监听滚动加载u-table-tbody
  //   let self = this;
  //   refTable.addEventListener('scroll', self.props.onSendData(refTable), false);
  // }

  //选择列表参数


  _createClass(RefTable, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var refTable = _reactDom2.default.findDOMNode(this.refs.refTable).getElementsByClassName('u-table-body')[0];
      if (!this.props.hasPage) {
        this.props.onSendData(refTable);
      } else {
        //todo nothing
      }
    }
  }, {
    key: 'handleSelect',
    value: function handleSelect(eventKey) {
      this.props.handlePageSelect(eventKey);
    }
  }, {
    key: 'onSelectTableItems',
    value: function onSelectTableItems(v, autoSave) {
      this.props.onTableSelect(v, autoSave);
    }
  }, {
    key: 'onClickBtn',
    value: function onClickBtn(v) {
      this.props.onClickBtn(v);
    }
    //全选/全不选

    //对某一个checkbox的点击事件

  }, {
    key: 'renderColumnsMultiSelect',
    value: function renderColumnsMultiSelect(columns) {
      var self = this;
      var _state = this.state,
          data = _state.data,
          checkedArray = _state.checkedArray;
      var multiSelect = this.props.multiSelect;

      var select_column = {};
      var indeterminate_bool = false;
      if (!this.props.isRadio) {
        if (multiSelect && multiSelect.type === "checkbox") {
          var i = checkedArray.length - 1;
          while (i >= 0) {
            if (checkedArray[i]) {
              indeterminate_bool = true;
              break;
            }
            i--;
          } //判断是否有部分选中
          var defaultColumns = [{
            title: _react2.default.createElement(_checkbox2.default, {
              className: 'table-checkbox',
              checked: this.state.checkedAll,
              indeterminate: indeterminate_bool && !this.state.checkedAll,
              onChange: this.onAllCheckChange
            }),
            key: "checkbox",
            dataIndex: "checkbox",
            width: "5%",
            render: function render(text, record, index) {
              return _react2.default.createElement(_checkbox2.default, {
                className: 'table-checkbox',
                checked: checkedArray[index],
                onChange: self.onCheckboxChange.bind(this, text, record, index),
                onClick: function onClick(e) {
                  return e.stopPropagation();
                }
              });
            }
          }];
          columns = defaultColumns.concat(columns);
        }
      } else {
        columns = [{ key: "radio", width: '5%' }].concat(columns);
      }
      return columns;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props$data = this.props.data,
          _props$data$listData = _props$data.listData,
          listData = _props$data$listData === undefined ? [] : _props$data$listData,
          _props$data$cols = _props$data.cols,
          cols = _props$data$cols === undefined ? [] : _props$data$cols;
      var _props = this.props,
          loading = _props.loading,
          language = _props.language,
          tabActiveKey = _props.tabActiveKey,
          selectedArray = _props.selectedArray;


      var len = listData.length;
      var lenselectedArray = selectedArray.length;
      var nodata = "没有查询到数据";
      switch (language) {
        case "zh_CN":
          nodata = '没有查询到数据';

          break;
        case "en_US":
          nodata = 'No query to data';
          break;
        case "zh_TW":
          nodata = '沒有査詢到數據';
          break;
        case "fr_FR":
          nodata = 'Pas de données';
          break;
        case "de_DE":
          nodata = 'Keine abfrage zu Daten';
          break;
        case "ja_JP":
          nodata = 'データが検索されていません';
          break;
        default:
          nodata = '没有查询到数据';
      }
      var checkedArrayCreater = new Array(len).fill(false);
      function ifInSelected(v, selectedArray) {
        var flag = false;
        selectedArray.forEach(function (val) {
          if (val.refpk == v.refpk) flag = true;
        });
        return flag;
      }
      listData.slice().forEach(function (v, k) {
        ifInSelected(v, selectedArray) ? checkedArrayCreater[k] = true : checkedArrayCreater[k] = false;
      });
      var data = null,
          checkedArray = null;
      if (tabActiveKey == '__selected') {
        //data = listData.filter((v,k)=>{return ifInSelected(v,selectedArray)});
        data = selectedArray;
        checkedArray = data.slice().forEach(function (v, k) {
          ifInSelected(v, selectedArray) ? checkedArrayCreater[k] = true : checkedArrayCreater[k] = false;
        });
      } else {
        data = listData;
        checkedArray = checkedArrayCreater;
      }
      var ifAllSelected = checkedArrayCreater.indexOf(false) > -1;
      this.state = {
        checkedAll: !ifAllSelected && data.length != 0, //data.length == selectedArray.length 
        checkedArray: checkedArrayCreater,
        data: data
      };
      var columns = len > 0 || tabActiveKey == '__selected' && lenselectedArray > 0 ? this.renderColumnsMultiSelect(cols) : [];
      var option = {
        scroll: { y: 270 },
        emptyText: function emptyText() {
          return nodata;
        },
        style: { 'height': 301 }
      };
      return _react2.default.createElement(
        'div',
        { className: 'tableCon' },
        _react2.default.createElement(
          'div',
          { className: 'tableWrap' },
          _react2.default.createElement(_table2.default, _extends({}, option, { ref: 'refTable',
            columns: columns,
            data: this.state.data,
            className: loading ? 'loading' : '',
            rowClassName: this.rowClassNameHandler,
            onRowClick: this.clickRowHandler,
            onRowDoubleClick: this.clickRowDoubleHandler
          }))
        ),
        _react2.default.createElement(_loading2.default, { container: this, show: loading }),
        this.props.hasPage && this.props.pageCount > 0 && _react2.default.createElement(
          'div',
          { className: 'paginationWrap' },
          _react2.default.createElement(_pagination2.default, _extends({
            prev: true, next: true, boundaryLinks: true,
            items: this.props.pageCount,
            size: 'sm',
            maxButtons: 3
          }, this.props.paginationOption, {
            activePage: this.props.curPage + 1,
            onSelect: this.handleSelect.bind(this)
          }))
        )
      );
    }
  }]);

  return RefTable;
}(_react.Component);

RefTable.defaultProps = {
  prefixCls: "bee-table",
  multiSelect: {
    type: "checkbox",
    param: "key"
  }
};
exports.default = RefTable;
module.exports = exports['default'];