choerodon-ui/es/_util/resizeObserver.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import ResizeObserver from 'resize-observer-polyfill';

var ReactResizeObserver = /*#__PURE__*/function (_PureComponent) {
  _inherits(ReactResizeObserver, _PureComponent);

  var _super = _createSuper(ReactResizeObserver);

  function ReactResizeObserver() {
    var _this;

    _classCallCheck(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 = _slicedToArray(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;
  }

  _createClass(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 = findDOMNode(this);

      if (!this.resizeObserver && !disabled && element) {
        // Add resize observer
        this.resizeObserver = new ResizeObserver(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;
}(PureComponent);

ReactResizeObserver.defaultProps = {
  resizeProp: 'both',
  boxSize: 'borderBox'
};
export default ReactResizeObserver;
//# sourceMappingURL=resizeObserver.js.map