@appbuckets/react-ui/hooks/useElementSize.js

Just Another React UI Framework

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var useWindowResize = require('./useWindowResize.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);

/* --------
 * Internal Useful
 * -------- */
function computeDimension(initial, subtracts, minimum, maximum) {
  /** Subtract */
  var dimension = initial - (subtracts || 0);
  if (dimension < (minimum || 0)) {
    return minimum || 0;
  }
  if (typeof maximum === 'number' && dimension > maximum) {
    return maximum;
  }
  return dimension;
}
/* --------
 * Hook Definition
 * -------- */
function useElementSize(config) {
  var disabled = config.disabled,
    fixedHeight = config.fixedHeight,
    fixedWidth = config.fixedWidth,
    maximumHeight = config.maximumHeight,
    maximumWidth = config.maximumWidth,
    minimumHeight = config.minimumHeight,
    minimumWidth = config.minimumWidth,
    subtractToHeight = config.subtractToHeight,
    subtractToWidth = config.subtractToWidth,
    useDetectorHeightOnly = config.useDetectorHeightOnly,
    useDetectorWidthOnly = config.useDetectorWidthOnly;
  // ----
  // Create the Unique DetectorID
  // ----
  // const [ widthDetectorID ] = React.useState(`__rx-width-detector-${Math.round(Math.random() * 1000)}`);
  var widthDetectorID = React__namespace.useRef(undefined);
  React__namespace.useEffect(function () {
    widthDetectorID.current = Math.random().toString(36).slice(2);
  }, []);
  // ----
  // Internal State
  // ----
  var _a = tslib.__read(
      React__namespace.useState({
        width: fixedWidth || 0,
        height: fixedHeight || 0,
      }),
      2
    ),
    size = _a[0],
    setElementSize = _a[1];
  // ----
  // Initialize the detector ref
  // ----
  var elementRef = React__namespace.useRef(null);
  // ----
  // Memoize the Handle to call On Window Resize Event
  // ----
  var handleWindowResize = React__namespace.useCallback(
    function () {
      /** If no ref, or component is not mount, return */
      if (!elementRef.current || !elementRef.current.parentNode) {
        return;
      }
      var detector = elementRef.current;
      /** Get current window height and width */
      var windowHeight = window.innerHeight,
        windowWidth = window.innerWidth;
      /** Get the element top and left position */
      var _a = detector.getBoundingClientRect(),
        detectorTopPosition = _a.top,
        detectorLeftPosition = _a.left;
      /** Get new Sizing */
      var nextHeight =
        typeof fixedHeight !== 'number'
          ? computeDimension(
              useDetectorHeightOnly
                ? detector.clientHeight
                : windowHeight - detectorTopPosition,
              subtractToHeight,
              minimumHeight,
              maximumHeight
            )
          : fixedHeight;
      var nextWidth =
        typeof fixedWidth !== 'number'
          ? computeDimension(
              useDetectorWidthOnly
                ? detector.clientWidth
                : windowWidth - detectorLeftPosition,
              subtractToWidth,
              minimumWidth,
              maximumWidth
            )
          : fixedWidth;
      /** Check if state must be updated */
      if (nextHeight !== size.height || nextWidth !== size.width) {
        setElementSize({
          height: nextHeight,
          width: nextWidth,
        });
      }
    },
    [
      useDetectorHeightOnly,
      useDetectorWidthOnly,
      fixedHeight,
      fixedWidth,
      maximumHeight,
      maximumWidth,
      minimumHeight,
      minimumWidth,
      size.height,
      size.width,
      subtractToHeight,
      subtractToWidth,
    ]
  );
  // ----
  // Memoize the Width Detector Element
  // ----
  var widthDetector = React__namespace.useMemo(function () {
    return React__namespace.createElement('div', {
      ref: elementRef,
      id: widthDetectorID.current,
      style: {
        visibility: 'hidden',
        opacity: 0,
      },
    });
  }, []);
  // ----
  // Active the Window Resize Hook
  // ----
  useWindowResize.useWindowResize({
    disabled: disabled || !elementRef.current || !!(fixedWidth && fixedHeight),
    onResize: handleWindowResize,
  });
  // ----
  // Return Data
  // ----
  return [widthDetector, size];
}

exports.useElementSize = useElementSize;