zent/lib/portal/withNonScrollable.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);

exports['default'] = withNonScrollable;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _util = require('./util');

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

/*
  Provides an HOC component for ensuring container is non-scrollable during component
  lifecycle.
*/
function withNonScrollable(Portal) {
  var _class, _temp;

  var portalVisibleCount = 0;
  var originalOverflow = void 0;

  return _temp = _class = function (_ref) {
    (0, _inherits3['default'])(NonScrollableWrapper, _ref);

    function NonScrollableWrapper() {
      (0, _classCallCheck3['default'])(this, NonScrollableWrapper);
      return (0, _possibleConstructorReturn3['default'])(this, (NonScrollableWrapper.__proto__ || Object.getPrototypeOf(NonScrollableWrapper)).apply(this, arguments));
    }

    (0, _createClass3['default'])(NonScrollableWrapper, [{
      key: 'restoreStyle',
      value: function restoreStyle() {
        portalVisibleCount--;

        if (portalVisibleCount <= 0) {
          var node = (0, _util.getNodeFromSelector)(this.props.selector);
          node.style.overflow = originalOverflow;
        }
      }
    }, {
      key: 'saveStyle',
      value: function saveStyle() {
        portalVisibleCount++;

        if (portalVisibleCount === 1) {
          var node = (0, _util.getNodeFromSelector)(this.props.selector);
          var style = node.style;

          originalOverflow = style.overflow;
          style.overflow = 'hidden';
        }
      }
    }, {
      key: 'componentDidMount',
      value: function componentDidMount() {
        if (this.props.visible) {
          this.saveStyle();
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        if (this.props.visible) {
          this.restoreStyle();
        }
      }
    }, {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        if (this.props.visible !== nextProps.visible) {
          if (nextProps.visible === false) {
            this.restoreStyle();
          } else {
            this.saveStyle();
          }
        }
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2['default'].createElement(Portal, this.props);
      }
    }]);
    return NonScrollableWrapper;
  }(_react.PureComponent || _react.Component), _class.propTypes = {
    selector: _propTypes2['default'].string
  }, _class.defaultProps = {
    selector: 'body'
  }, _temp;
}