remeasure/es/measure.js

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

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; }

// external dependencies
import PropTypes from 'prop-types';
import React, { Component, PureComponent } from 'react'; // classes

import Measured from './Measured'; // constants

import { KEY_NAMES } from './constants'; // utils

import { getComponentName, getMeasureKeys } from './utils';
export 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
 */

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

  var componentPrototype = Object.getPrototypeOf(RenderedComponent);
  var shouldSetRef = componentPrototype === Component || componentPrototype === 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.createElement(RenderedComponent, _extends({
          children: _measuredComponentChildren,
          ref: shouldSetRef ? _measuredComponentRef : null
        }, props))
        /* eslint-enable */

      );
    };

    return MeasuredComponent;
  }(Component), _defineProperty(_class, "displayName", "Measured(" + getComponentName(RenderedComponent) + ")"), _defineProperty(_class, "propTypes", {
    _measuredComponentChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    _measuredComponentRef: PropTypes.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
 */

export 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.createElement(Measured, _extends({}, props, restOfOptions, {
          _measuredComponentChildren: children,
          _measuredComponentRef: this.setOriginalRef,
          component: component,
          keys: keys
        }));
      };

      return MeasuredHoc;
    }(Component), _defineProperty(_class2, "displayName", 'MeasuredHoc'), _defineProperty(_class2, "propTypes", {
      children: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),
      render: PropTypes.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
 */

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

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

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