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 _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,
          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.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);
        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