@appbuckets/react-ui/Backdrop/BackdropInner.js

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var reactUiCore = require('@appbuckets/react-ui-core');
var Fade = require('../Fade/Fade.js');
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);

/* --------
 * Component Render
 * -------- */
var BackdropInner = function (receivedProps) {
  var props = BucketContext.useWithDefaultProps('backdropInner', receivedProps);
  var content = props.content,
    children = props.children,
    className = props.className,
    onClick = props.onClick,
    onClickOutside = props.onClickOutside,
    onExited = props.onExited,
    onExiting = props.onExiting,
    onEntered = props.onEntered,
    onEntering = props.onEntering,
    timeout = props.timeout,
    verticalAlign = props.verticalAlign,
    visible = props.visible,
    rest = tslib.__rest(props, [
      'content',
      'children',
      'className',
      'onClick',
      'onClickOutside',
      'onExited',
      'onExiting',
      'onEntered',
      'onEntering',
      'timeout',
      'verticalAlign',
      'visible',
    ]);
  // ----
  // Define internal Ref to Switch classes and Style
  // ----
  var containerRef = React__namespace.useRef(null);
  var contentRef = React__namespace.useRef(null);
  // ----
  // Build Component Handlers
  // ----
  var handleClick = function (e) {
    /** Call onClick Handler */
    if (onClick) {
      onClick(e, props);
    }
    /** If no ref are been currently loaded, or if no handler has been defined, abort */
    if (!contentRef.current || !containerRef.current || !onClickOutside) {
      return;
    }
    /** If click target is the content background or the container, invoke the handler */
    if (e.target === containerRef.current || e.target === contentRef.current) {
      onClickOutside(e, props);
    }
  };
  // ----
  // Build Element Classes
  // ----
  var classes = clsx__default['default'](
    { visible: visible },
    verticalAlign && 'content-'.concat(verticalAlign.replace(/\s/g, '-')),
    'backdrop',
    className
  );
  var contentClasses = clsx__default['default'](
    { visible: visible },
    'content'
  );
  // ----
  // Compute the Inner Content
  // ----
  var innerContent = reactUiCore.childrenUtils.isNil(children)
    ? content
    : children;
  // ----
  // Render the Content
  // ----
  return React__namespace.createElement(
    Fade,
    {
      ref: containerRef,
      onExiting: onExiting,
      onExited: onExited,
      onEntered: onEntered,
      onEntering: onEntering,
      visible: visible,
      timeout: timeout,
    },
    React__namespace.createElement(
      'div',
      tslib.__assign({}, rest, {
        className: classes,
        onClick: handleClick,
        role: 'region',
      }),
      innerContent &&
        React__namespace.createElement(
          'div',
          { ref: contentRef, className: contentClasses },
          innerContent
        )
    )
  );
};
/** Properly set the Display Name */
BackdropInner.displayName = 'BackdropInner';

module.exports = BackdropInner;