zent/lib/table/modules/Body.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _assign = require('lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

var _includes = require('lodash/includes');

var _includes2 = _interopRequireDefault(_includes);

var _Td = require('./Td');

var _Td2 = _interopRequireDefault(_Td);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

// 需要传入一个组件模板
var _ref2 = _react2['default'].createElement('div', { className: 'td expanded-item' });

var Body = function (_ref) {
  (0, _inherits3['default'])(Body, _ref);

  function Body(props) {
    (0, _classCallCheck3['default'])(this, Body);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Body.__proto__ || Object.getPrototypeOf(Body)).call(this, props));

    var datasets = props.datasets,
        isExpanded = props.isExpanded;

    var expandItems = datasets.reduce(function (items, rowData, rowIndex) {
      if (typeof isExpanded === 'function') {
        items[rowIndex] = isExpanded(rowData, rowIndex);
      } else {
        items[rowIndex] = false;
      }

      return items;
    }, {});

    _this.state = {
      expandItems: expandItems
    };
    return _this;
  }

  (0, _createClass3['default'])(Body, [{
    key: 'handleExpand',
    value: function handleExpand(rowIndex) {
      var _this2 = this;

      return function () {
        var expandItems = (0, _assign2['default'])({}, _this2.state.expandItems);

        expandItems[rowIndex] = !(expandItems[rowIndex] || 0);

        _this2.setState({
          expandItems: expandItems
        });
      };
    }
  }, {
    key: 'isExpanded',
    value: function isExpanded(rowData, rowIndex) {
      return this.state.expandItems[rowIndex] || 0;
    }
  }, {
    key: 'onRowClick',
    value: function onRowClick(key) {
      var selection = this.props.selection;

      if (selection.canRowSelect) {
        selection.onSelect(key, !(0, _includes2['default'])(selection.selectedRowKeys, key));
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          datasets = _props.datasets,
          columns = _props.columns,
          emptyLabel = _props.emptyLabel,
          rowKey = _props.rowKey,
          selection = _props.selection,
          getRowConf = _props.getRowConf,
          expandRender = _props.expandRender,
          needExpand = _props.needExpand;


      var trs = [];
      var dataIterator = function dataIterator(rowData, rowIndex) {
        var _getRowConf = getRowConf(rowData, rowIndex),
            _getRowConf$canSelect = _getRowConf.canSelect,
            canSelect = _getRowConf$canSelect === undefined ? true : _getRowConf$canSelect,
            _getRowConf$rowClass = _getRowConf.rowClass,
            rowClass = _getRowConf$rowClass === undefined ? '' : _getRowConf$rowClass;

        var key = rowData[rowKey] || rowIndex;

        var tds = [];
        if (needExpand) {
          tds.push(_react2['default'].createElement(
            'div',
            { key: '-1', className: 'td expanded-item' },
            _react2['default'].createElement('span', {
              className: _this3.isExpanded(rowData, rowIndex) ? 'expandable-btn collapse-btn' : 'expandable-btn expand-btn',
              onClick: _this3.handleExpand(rowIndex)
            })
          ));
        }

        columns.forEach(function (item, columnIndex) {
          // 位置信息
          var pos = {
            row: rowIndex,
            column: columnIndex
          };

          var needSelect = false;
          if (selection.needSelect && columnIndex === 0) {
            needSelect = true;
          }

          tds.push(_react2['default'].createElement(_Td2['default'], {
            column: item,
            key: columnIndex,
            data: rowData,
            pos: pos,
            rowKey: rowKey,
            selection: {
              needSelect: needSelect,
              isSingleSelection: selection.isSingleSelection,
              canSelect: canSelect,
              selectedRowKeys: selection.selectedRowKeys,
              onSelect: selection.onSelect
            }
          }));
        });

        trs.push(_react2['default'].createElement(
          'div',
          {
            className: rowClass + ' tr',
            key: key,
            onClick: function onClick() {
              return _this3.onRowClick(key);
            }
          },
          tds
        ));
      };

      var expandedInterator = function expandedInterator(rowData, rowIndex) {
        var key = rowData[rowKey] || rowIndex;

        trs.push(_react2['default'].createElement(
          'div',
          {
            className: 'tr tr--expanded',
            key: key + '-expand',
            style: {
              display: _this3.isExpanded(rowData, rowIndex) ? 'flex' : 'none'
            },
            onClick: function onClick() {
              return _this3.onRowClick(key);
            }
          },
          _ref2,
          _react2['default'].createElement(
            'div',
            { className: 'td' },
            expandRender(rowData)
          )
        ));
      };

      if (needExpand) {
        datasets.forEach(function (rowData, rowIndex) {
          dataIterator(rowData, rowIndex);
          expandedInterator(rowData, rowIndex);
        });
      } else {
        datasets.forEach(function (rowData, rowIndex) {
          dataIterator(rowData, rowIndex);
        });
      }

      return _react2['default'].createElement(
        'div',
        { className: 'tbody' },
        datasets.length !== 0 ? trs : _react2['default'].createElement(
          'div',
          { className: 'tr' },
          _react2['default'].createElement(
            'div',
            { className: 'cell empty-data' },
            emptyLabel
          )
        )
      );
    }
  }]);
  return Body;
}(_react.PureComponent || _react.Component);

exports['default'] = Body;