zent/table/lib/modules/Head.js

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

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _throttle = require('zent-utils/lodash/throttle');

var _throttle2 = _interopRequireDefault(_throttle);

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

var _helper2 = _interopRequireDefault(_helper);

var _assign = require('zent-utils/lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

var _zentCheckbox = require('zent-checkbox');

var _zentCheckbox2 = _interopRequireDefault(_zentCheckbox);

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

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

var Head = _react2['default'].createClass({
  displayName: 'Head',
  getInitialState: function getInitialState() {
    return {
      isShowFixRow: false
    };
  },
  componentDidMount: 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);
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    if (this.props.autoStick) {
      window.removeEventListener('scroll', this.throttleSetHeadStyle, true);
      window.removeEventListener('resize', this.throttleSetHeadStyle, true);
    }
  },
  getRect: 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
    };
    relativeTop = rect.top - document.body.getBoundingClientRect().top;
  },
  setHeadStyle: function setHeadStyle() {
    this.getRect();
    if (window.scrollY > 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: {}
      });
    }
  },
  getChild: 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;
  },
  sort: function sort(item) {
    var sortType = void 0;
    var name = item.name;

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

    this.props.onSort({
      sortBy: name,
      sortType: sortType
    });
  },
  onSelect: function onSelect(e) {
    var isChecked = false;
    if (e.target.checked) {
      isChecked = true;
    }

    this.props.selection.onSelectAll(isChecked);
  },
  renderTr: function renderTr(isFixTr) {
    var _this = this;

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

    var needSelect = selection.needSelect;
    var className = isFixTr ? fixRowClass : stickRowClass;

    return _react2['default'].createElement(
      'div',
      { className: className + ' tr', style: style, ref: function ref(c) {
          _this[className] = c;
        } },
      this.props.columns.map(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 (textAlign) {
          if (['left', 'center', 'right'].indexOf(textAlign)) {
            styleObj = (0, _assign2['default'])(styleObj, {
              textAlign: textAlign
            });
          }
        }

        return _react2['default'].createElement(
          'div',
          {
            key: index,
            className: cellClass,
            style: styleObj
          },
          index === 0 && needSelect && _react2['default'].createElement(_zentCheckbox2['default'], {
            className: 'select-check',
            onChange: _this.onSelect,
            checked: selection.isSelectAll,
            indeterminate: selection.isSelectPart
          }),
          _this.getChild(item)
        );
      })
    );
  },
  render: 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)
    );
  }
});

exports['default'] = Head;
module.exports = exports['default'];