zent/lib/affix/Affix.js

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

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _WindowEventHandler = require('../utils/component/WindowEventHandler');

var _WindowEventHandler2 = _interopRequireDefault(_WindowEventHandler);

var _getViewportSize = require('../utils/dom/getViewportSize');

var _getViewportSize2 = _interopRequireDefault(_getViewportSize);

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

var _throttle2 = _interopRequireDefault(_throttle);

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

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

  function Affix() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, Affix);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = Affix.__proto__ || Object.getPrototypeOf(Affix)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      position: 'static',
      width: null,
      placeHoldStyle: {}
    }, _this.affix = false, _this.handleResize = (0, _throttle2['default'])(function () {
      _this.updatePin();
      _this.setWidth();
    }, 20), _this.handleScroll = (0, _throttle2['default'])(function () {
      _this.updatePin();
    }, 20), _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(Affix, [{
    key: 'pin',
    value: function pin() {
      var onPin = this.props.onPin;


      this.affix = true;
      this.setWidth();
      this.setState({ position: 'fixed' });
      onPin && onPin();
    }
  }, {
    key: 'unpin',
    value: function unpin() {
      var onUnpin = this.props.onUnpin;


      this.affix = false;
      this.setState({
        position: 'static',
        width: null,
        placeHoldStyle: { overflow: 'hidden' }
      });
      onUnpin && onUnpin();
    }
  }, {
    key: 'setWidth',
    value: function setWidth() {
      var element = _reactDom2['default'].findDOMNode(this);

      this.setState({
        width: element.offsetWidth,
        placeHoldStyle: {
          width: '100%',
          height: element.offsetHeight
        }
      });
    }
  }, {
    key: 'updatePin',
    value: function updatePin() {
      var affix = this.affix;
      var props = this.props;
      var element = _reactDom2['default'].findDOMNode(this);
      var reallyNum = void 0,
          propsNum = void 0;

      if (props.offsetBottom !== undefined) {
        reallyNum = (0, _getViewportSize2['default'])().height - element.getBoundingClientRect().bottom;
        propsNum = props.offsetBottom;
      } else {
        reallyNum = element.getBoundingClientRect().top;
        propsNum = props.offsetTop;
      }

      if (affix && reallyNum > propsNum) {
        this.unpin();
      }
      if (!affix && reallyNum <= propsNum) {
        this.pin();
      }
    }
  }, {
    key: 'getStyleObj',
    value: function getStyleObj() {
      var _props = this.props,
          zIndex = _props.zIndex,
          offsetBottom = _props.offsetBottom,
          offsetTop = _props.offsetTop;
      var _state = this.state,
          position = _state.position,
          width = _state.width;

      var styleObj = {};

      if (position === 'fixed') {
        styleObj = { position: position, zIndex: zIndex, width: width };
        offsetBottom !== undefined ? styleObj.bottom = offsetBottom : styleObj.top = offsetTop;
      } else {
        styleObj = { position: position };
      }

      return styleObj;
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.handleResize();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          prefix = _props2.prefix,
          className = _props2.className,
          placeHoldClassName = _props2.placeHoldClassName;

      var wrapClass = (0, _classnames2['default'])(prefix + '-affix', className);

      return _react2['default'].createElement(
        'div',
        { className: placeHoldClassName, style: this.state.placeHoldStyle },
        _react2['default'].createElement(
          'div',
          { className: wrapClass, style: (0, _extends3['default'])({}, this.getStyleObj()) },
          this.props.children
        ),
        _react2['default'].createElement(_WindowEventHandler2['default'], { eventName: 'scroll', callback: this.handleScroll }),
        _react2['default'].createElement(_WindowEventHandler2['default'], { eventName: 'resize', callback: this.handleResize })
      );
    }
  }]);
  return Affix;
}(_react.PureComponent || _react.Component);

Affix.propTypes = {
  placeHoldClassName: _propTypes2['default'].string,
  className: _propTypes2['default'].string,
  prefix: _propTypes2['default'].string,
  zIndex: _propTypes2['default'].number,
  offsetTop: _propTypes2['default'].number,
  offsetBottom: _propTypes2['default'].number,
  onPin: _propTypes2['default'].func,
  onUnpin: _propTypes2['default'].func
};
Affix.defaultProps = {
  offsetTop: 0,
  prefix: 'zent',
  zIndex: 10
};
exports['default'] = Affix;