zent/lib/table/modules/Head.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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _throttle = require('lodash/throttle');

var _throttle2 = _interopRequireDefault(_throttle);

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

var _checkbox2 = _interopRequireDefault(_checkbox);

var _helper = require('../helper');

var _helper2 = _interopRequireDefault(_helper);

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

var rect = void 0;
var stickRowClass = 'stickrow';
var fixRowClass = 'fixrow';

var _ref2 = _react2['default'].createElement('div', { key: '-1', className: 'td expanded-item' });

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

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

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

    _this.setHeadStyle = function () {
      _this.getRect();
      if (window.scrollY > _this.relativeTop) {
        _this.setState({
          isShowFixRow: true,
          fixStyle: {
            position: 'fixed',
            top: 0,
            left: rect.left + 'px',
            height: rect.height + 'px',
            width: rect.width + 'px',
            zIndex: 1000
          }
        });
      } else {
        _this.setState({
          isShowFixRow: false,
          fixStyle: {}
        });
      }
    };

    _this.onSelect = function (e) {
      var isChecked = false;
      if (e.target.checked) {
        isChecked = true;
      }

      _this.props.selection.onSelectAll(isChecked);
    };

    _this.state = {
      isShowFixRow: false
    };
    _this.relativeTop = 0;
    return _this;
  }

  (0, _createClass3['default'])(Head, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.autoStick) {
        this.throttleSetHeadStyle = (0, _throttle2['default'])(this.setHeadStyle, 100, {
          leading: true
        });

        window.addEventListener('scroll', this.throttleSetHeadStyle, true);
        window.addEventListener('resize', this.throttleSetHeadStyle, true);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.props.autoStick) {
        window.removeEventListener('scroll', this.throttleSetHeadStyle, true);
        window.removeEventListener('resize', this.throttleSetHeadStyle, true);
      }
    }
  }, {
    key: 'getRect',
    value: function getRect() {
      // clientrect can't be clone
      var tmpRect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect();
      rect = {
        top: tmpRect.top,
        height: tmpRect.height - 1,
        width: tmpRect.width
      };
      this.relativeTop = rect.top - document.documentElement.getBoundingClientRect().top;
    }
  }, {
    key: 'getChild',
    value: function getChild(item) {
      if (item.needSort) {
        return _react2['default'].createElement(
          'a',
          { onClick: this.sort.bind(this, item) },
          item.title,
          item.name === this.props.sortBy && _react2['default'].createElement('span', { className: this.props.sortType })
        );
      }
      return item.title;
    }
  }, {
    key: 'sort',
    value: function sort(item) {
      var sortType = void 0;
      var name = item.name;

      sortType = 'desc'; // desc sort by default
      if (name === this.props.sortBy) {
        sortType = this.props.sortType === 'desc' ? 'asc' : 'desc'; // toggble current sortType
      }

      this.props.onSort({
        sortBy: name,
        sortType: sortType
      });
    }
  }, {
    key: 'renderCheckBox',
    value: function renderCheckBox(index, selection) {
      var canSelectAll = selection.canSelectAll,
          needSelect = selection.needSelect,
          isSingleSelection = selection.isSingleSelection;

      if (needSelect && index === 0 && !isSingleSelection) {
        return _react2['default'].createElement(_checkbox2['default'], {
          className: 'select-check',
          disabled: !canSelectAll,
          onChange: this.onSelect,
          checked: selection.isSelectAll,
          indeterminate: selection.isSelectPart
        });
      }

      return null;
    }
  }, {
    key: 'renderTr',
    value: function renderTr(isFixTr) {
      var _this2 = this;

      var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var _props = this.props,
          selection = _props.selection,
          needExpand = _props.needExpand;
      var needSelect = selection.needSelect;

      var className = isFixTr ? fixRowClass : stickRowClass;
      var tds = [];

      if (needExpand) {
        tds.push(_ref2);
      }

      this.props.columns.forEach(function (item, index) {
        var cellClass = 'cell';
        var isMoney = item.isMoney,
            textAlign = item.textAlign,
            width = item.width;


        if (index === 0 && needSelect) {
          cellClass += ' cell--selection';
        }

        if (isMoney) {
          cellClass += ' cell--money';
        }

        width = _helper2['default'].getCalculatedWidth(width);

        var styleObj = {};

        if (width) {
          styleObj = {
            width: width,
            flex: '0 1 auto'
          };
        }

        if (_helper2['default'].getAlignClass(textAlign) !== '') {
          cellClass += ' cell--' + _helper2['default'].getAlignClass(textAlign);
        }

        tds.push(_react2['default'].createElement(
          'div',
          { key: index, className: cellClass, style: styleObj },
          _react2['default'].createElement(
            'div',
            { className: 'cell__child-container' },
            _this2.renderCheckBox(index, selection),
            _this2.getChild(item)
          )
        ));
      });
      return _react2['default'].createElement(
        'div',
        {
          className: className + ' tr',
          style: style,
          ref: function ref(c) {
            _this2[className] = c;
          }
        },
        tds
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var style = this.props.style;
      var _state = this.state,
          isShowFixRow = _state.isShowFixRow,
          fixStyle = _state.fixStyle;


      return _react2['default'].createElement(
        'div',
        { className: 'thead', style: style },
        this.renderTr(false),
        isShowFixRow && this.renderTr(true, fixStyle)
      );
    }
  }]);
  return Head;
}(_react.PureComponent || _react.Component);

exports['default'] = Head;