@appbuckets/react-ui/AutoSpacer/AutoSpacer.js

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

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);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

var AutoSpacer = /** @class */ (function (_super) {
  tslib.__extends(AutoSpacer, _super);
  function AutoSpacer() {
    var _this = this;
    var _a, _b;
    _this =
      _super.apply(
        this,
        tslib.__spreadArray([], tslib.__read(arguments), false)
      ) || this;
    /* --------
     * Define initial State
     * -------- */
    _this.state = {
      height: _this.computeHeight(
        (_a = _this.props.defaultHeight) !== null && _a !== void 0 ? _a : 0
      ),
      width: _this.computeWidth(
        (_b = _this.props.defaultWidth) !== null && _b !== void 0 ? _b : 0
      ),
    };
    /* --------
     * Define the isMounted state to avoid unnecessary re render
     * -------- */
    _this.isComponentMounted = false;
    /* --------
     * Initialize Ref Containers
     * -------- */
    _this.containerRef = React__namespace.createRef();
    _this.parentNode = undefined;
    return _this;
  }
  /* --------
   * Component LifeCycle Handlers
   * -------- */
  AutoSpacer.prototype.componentDidMount = function () {
    var _a;
    this.isComponentMounted = true;
    this.parentNode =
      (_a = this.containerRef.current) === null || _a === void 0
        ? void 0
        : _a.parentNode;
    window.addEventListener('resize', this.recomputeSizing.bind(this));
    this.recomputeSizing();
  };
  AutoSpacer.prototype.componentWillUnmount = function () {
    this.isComponentMounted = false;
    this.parentNode = undefined;
    window.removeEventListener('resize', this.recomputeSizing.bind(this));
  };
  /* --------
   * Get valid data
   * -------- */
  AutoSpacer.prototype.computeHeight = function (initialHeight) {
    var _a = this.props,
      _b = _a.subtractHeight,
      subtractHeight = _b === void 0 ? 0 : _b,
      maximumHeight = _a.maximumHeight,
      _c = _a.minimumHeight,
      minimumHeight = _c === void 0 ? 0 : _c;
    var subtractedHeight = initialHeight - subtractHeight;
    if (subtractedHeight < minimumHeight) {
      return minimumHeight;
    }
    if (typeof maximumHeight === 'number' && subtractedHeight > maximumHeight) {
      return maximumHeight;
    }
    return subtractedHeight;
  };
  AutoSpacer.prototype.computeWidth = function (initialWidth) {
    var _a = this.props,
      _b = _a.subtractWidth,
      subtractWidth = _b === void 0 ? 0 : _b,
      maximumWidth = _a.maximumWidth,
      _c = _a.minimumWidth,
      minimumWidth = _c === void 0 ? 0 : _c;
    var subtractedWidth = initialWidth - subtractWidth;
    if (subtractedWidth < minimumWidth) {
      return minimumWidth;
    }
    if (typeof maximumWidth === 'number' && subtractedWidth > maximumWidth) {
      return maximumWidth;
    }
    return subtractedWidth;
  };
  /* --------
   * Resize Callback Function
   * -------- */
  AutoSpacer.prototype.recomputeSizing = function () {
    /** Avoid recomputing if no node, or if component is not mounted */
    var container = this.containerRef.current;
    if (!container || !this.parentNode) {
      return;
    }
    /** Get props */
    var _a = this.props,
      disableHeight = _a.disableHeight,
      disableWidth = _a.disableWidth,
      onResize = _a.onResize;
    /** Get current state and container ref */
    var _b = this.state,
      currHeight = _b.height,
      currWidth = _b.width;
    /** Get current window dimension */
    var windowHeight = window.innerHeight,
      windowWidth = window.innerWidth;
    /** Get Container offset Position */
    var _c = container.getBoundingClientRect(),
      containerTopPosition = _c.top,
      containerLeftPosition = _c.left;
    /** Get new Size */
    var nextHeight = disableHeight
      ? container.clientHeight
      : this.computeHeight(windowHeight - containerTopPosition);
    var nextWidth = disableWidth
      ? container.clientWidth
      : this.computeWidth(windowWidth - containerLeftPosition);
    /** Check if must update state */
    if (
      this.isComponentMounted &&
      (nextHeight !== currHeight || nextWidth !== currWidth)
    ) {
      this.setState(
        {
          height: nextHeight,
          width: nextWidth,
        },
        function () {
          if (typeof onResize === 'function') {
            onResize({ height: nextHeight, width: nextWidth });
          }
        }
      );
    }
  };
  /* --------
   * Component Render
   * -------- */
  AutoSpacer.prototype.renderChildren = function () {
    var _a = this.props,
      children = _a.children,
      renderIfInvisible = _a.renderIfInvisible;
    var _b = this.state,
      height = _b.height,
      width = _b.width;
    if ((height === 0 || width === 0) && !renderIfInvisible) {
      return null;
    }
    if (typeof children === 'function') {
      return children({ height: height, width: width });
    }
    return children !== null && children !== void 0 ? children : null;
  };
  AutoSpacer.prototype.render = function () {
    var _a = this.props,
      className = _a.className,
      children = _a.children,
      disableHeight = _a.disableHeight,
      disableWidth = _a.disableWidth,
      style = _a.style;
    var _b = this.state,
      height = _b.height,
      width = _b.width;
    var classes = clsx__default['default'](
      {
        'disabled-height': disableHeight,
        'disabled-width': disableWidth,
      },
      'autospacer',
      className
    );
    var divStyle =
      typeof children !== 'function'
        ? tslib.__assign(tslib.__assign({}, style), {
            height: height,
            width: width,
          })
        : tslib.__assign({}, style);
    return React__namespace.createElement(
      'div',
      { ref: this.containerRef, className: classes, style: divStyle },
      this.renderChildren()
    );
  };
  return AutoSpacer;
})(React__namespace.Component);
var AutoSpacerWrapped = BucketContext.withDefaultProps(
  'autoSpacer',
  AutoSpacer
);
AutoSpacerWrapped.displayName = 'AutoSpacer';

module.exports = AutoSpacerWrapped;