choerodon-ui/lib/_util/resizeObserver.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = require("react");

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

var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));

var ReactResizeObserver = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(ReactResizeObserver, _PureComponent);

  var _super = (0, _createSuper2["default"])(ReactResizeObserver);

  function ReactResizeObserver() {
    var _this;

    (0, _classCallCheck2["default"])(this, ReactResizeObserver);
    _this = _super.apply(this, arguments);
    _this.resizeObserver = null;
    _this.width = 0;
    _this.height = 0;

    _this.onResize = function (entries) {
      var _this$props = _this.props,
          onResize = _this$props.onResize,
          resizeProp = _this$props.resizeProp,
          boxSize = _this$props.boxSize;

      var _entries = (0, _slicedToArray2["default"])(entries, 1),
          entry = _entries[0];

      var target = entry.target,
          contentRect = entry.contentRect;
      var borderBoxSize = entry.borderBoxSize;
      var borderBox = borderBoxSize && borderBoxSize[0];
      var isBorderBox = boxSize === 'borderBox';

      var _ref = function () {
        if (isBorderBox) {
          if (borderBox) {
            return {
              width: borderBox.inlineSize,
              height: borderBox.blockSize
            };
          }

          return target.getBoundingClientRect();
        }

        return contentRect;
      }(),
          width = _ref.width,
          height = _ref.height;

      var fixedWidth = Math.round(width);
      var fixedHeight = Math.round(height);

      if (_this.width !== fixedWidth && ['width', 'both'].includes(resizeProp) || _this.height !== fixedHeight && ['height', 'both'].includes(resizeProp)) {
        _this.width = fixedWidth;
        _this.height = fixedHeight;

        if (onResize) {
          onResize(fixedWidth, fixedHeight, target);
        }
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(ReactResizeObserver, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.onComponentUpdated();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.onComponentUpdated();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.destroyObserver();
    }
  }, {
    key: "onComponentUpdated",
    value: function onComponentUpdated() {
      var disabled = this.props.disabled;
      var element = (0, _reactDom.findDOMNode)(this);

      if (!this.resizeObserver && !disabled && element) {
        // Add resize observer
        this.resizeObserver = new _resizeObserverPolyfill["default"](this.onResize);
        this.resizeObserver.observe(element);
        var _this$props2 = this.props,
            onResize = _this$props2.onResize,
            immediately = _this$props2.immediately;

        if (immediately && onResize) {
          onResize(element.offsetWidth, element.offsetHeight, element);
        }
      } else if (disabled) {
        // Remove resize observer
        this.destroyObserver();
      }
    }
  }, {
    key: "destroyObserver",
    value: function destroyObserver() {
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
        this.resizeObserver = null;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props$children = this.props.children,
          children = _this$props$children === void 0 ? null : _this$props$children;
      return children;
    }
  }]);
  return ReactResizeObserver;
}(_react.PureComponent);

ReactResizeObserver.defaultProps = {
  resizeProp: 'both',
  boxSize: 'borderBox'
};
var _default = ReactResizeObserver;
exports["default"] = _default;
//# sourceMappingURL=resizeObserver.js.map