choerodon-ui/es/_util/resizeObserver.js

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

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;
      var _entries$ = entries[0],
          target = _entries$.target,
          _entries$$contentRect = _entries$.contentRect,
          width = _entries$$contentRect.width,
          height = _entries$$contentRect.height;
      /**
       * getBoundingClientRect return wrong size in transform case.
       */
      // const { width, height } = target.getBoundingClientRect();

      var fixedWidth = Math.floor(width);
      var fixedHeight = Math.floor(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);
      } 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'
};
export default ReactResizeObserver;
//# sourceMappingURL=resizeObserver.js.map