remeasure/lib/measure.js

Get position and size of the DOM element for any React Component

"use strict";

exports.__esModule = true;
exports.measure = exports.getMeasuredHoc = exports.getMeasuredComponent = exports.createSetOriginalRef = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _Measured = _interopRequireDefault(require("./Measured"));

var _constants = require("./constants");

var _utils = require("./utils");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var createSetOriginalRef = function createSetOriginalRef(instance) {
  return (
    /**
     * @private
     *
     * @function setOriginalRef
     *
     * @description
     * set the reference to the original component instance to the instance of the HOC
     *
     * @param {HTMLElement|ReactComponent} component the component instance to assign
     */
    function (component) {
      instance.originalComponent = component;
    }
  );
};
/**
 * @private
 *
 * @function getMeasuredComponent
 *
 * @description
 * get the measured component class with the ref to get the original component
 *
 * @param {ReactComponent} RenderedComponent the component to render
 * @returns {ReactComponent} the measured component rendering RenderedComponent
 */


exports.createSetOriginalRef = createSetOriginalRef;

var getMeasuredComponent = function getMeasuredComponent(RenderedComponent) {
  var _class, _temp;

  var componentPrototype = Object.getPrototypeOf(RenderedComponent);
  var shouldSetRef = componentPrototype === _react.Component || componentPrototype === _react.PureComponent;
  return _temp = _class =
  /*#__PURE__*/
  function (_Component) {
    _inheritsLoose(MeasuredComponent, _Component);

    function MeasuredComponent() {
      return _Component.apply(this, arguments) || this;
    }

    var _proto = MeasuredComponent.prototype;

    _proto.render = function render() {
      var _this$props = this.props,
          _measuredComponentChildren = _this$props._measuredComponentChildren,
          _measuredComponentRef = _this$props._measuredComponentRef,
          props = _objectWithoutPropertiesLoose(_this$props, ["_measuredComponentChildren", "_measuredComponentRef"]);

      return (
        /* eslint-disable prettier */
        _react.default.createElement(RenderedComponent, _extends({
          children: _measuredComponentChildren,
          ref: shouldSetRef ? _measuredComponentRef : null
        }, props))
        /* eslint-enable */

      );
    };

    return MeasuredComponent;
  }(_react.Component), _defineProperty(_class, "displayName", "Measured(" + (0, _utils.getComponentName)(RenderedComponent) + ")"), _defineProperty(_class, "propTypes", {
    _measuredComponentChildren: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
    _measuredComponentRef: _propTypes.default.func.isRequired
  }), _temp;
};
/**
 * @private
 *
 * @function getMeasuredHoc
 *
 * @description
 * get a higher-order component that renders the component passed, injecting the measurements in as props
 *
 * @param {Array<string>} keys the keys to listen for changes to
 * @param {Object} options the options passed
 * @returns {function(ReactComponent): ReactComponent} the decorator that receives the component
 */


exports.getMeasuredComponent = getMeasuredComponent;

var getMeasuredHoc = function getMeasuredHoc(keys, options) {
  var childrenOptionIgnored = options.children,
      renderOptionIgnored = options.render,
      restOfOptions = _objectWithoutPropertiesLoose(options, ["children", "render"]);

  return function (RenderedComponent) {
    var _class2, _temp2;

    var component = getMeasuredComponent(RenderedComponent);
    return _temp2 = _class2 =
    /*#__PURE__*/
    function (_Component2) {
      _inheritsLoose(MeasuredHoc, _Component2);

      function MeasuredHoc() {
        var _this;

        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        _this = _Component2.call.apply(_Component2, [this].concat(args)) || this;

        _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "originalComponent", null);

        _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setOriginalRef", createSetOriginalRef(_assertThisInitialized(_assertThisInitialized(_this))));

        return _this;
      }

      var _proto2 = MeasuredHoc.prototype;

      _proto2.render = function render() {
        var _this$props2 = this.props,
            children = _this$props2.children,
            renderIgnored = _this$props2.render,
            props = _objectWithoutPropertiesLoose(_this$props2, ["children", "render"]);

        return _react.default.createElement(_Measured.default, _extends({}, props, restOfOptions, {
          _measuredComponentChildren: children,
          _measuredComponentRef: this.setOriginalRef,
          component: component,
          keys: keys
        }));
      };

      return MeasuredHoc;
    }(_react.Component), _defineProperty(_class2, "displayName", 'MeasuredHoc'), _defineProperty(_class2, "propTypes", {
      children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.string]),
      render: _propTypes.default.func
    }), _temp2;
  };
};
/**
 * @private
 *
 * @function measure
 *
 * @description
 * based on the keys and options passed, get the measured HOC
 *
 * @param {Array<string>|function|Object|string} passedKeys the keys to listen to, or options, or the component itself
 * @param {Object} [passedOptions={}] the options when creating the measured component
 * @returns {function} the HOC that will render the component passed with measurements injected
 */


exports.getMeasuredHoc = getMeasuredHoc;

var measure = function measure(passedKeys, passedOptions) {
  if (passedOptions === void 0) {
    passedOptions = {};
  }

  return typeof passedKeys === 'function' ? getMeasuredHoc(_constants.KEY_NAMES, passedOptions)(passedKeys) : getMeasuredHoc((0, _utils.getMeasureKeys)(passedKeys), passedKeys && passedKeys.constructor === Object ? passedKeys : passedOptions);
};

exports.measure = measure;

_constants.KEY_NAMES.forEach(function (key) {
  measure[key] = function (options) {
    return typeof options === 'function' ? measure([key])(options) : measure([key], options);
  };
});