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

Just Another React UI Framework

import { __rest, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { childrenUtils } from '@appbuckets/react-ui-core';
import Fade from '../Fade/Fade.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';

/* --------
 * Component Render
 * -------- */
var BackdropInner = function (receivedProps) {
  var props = 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 = __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.useRef(null);
  var contentRef = React.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(
    { visible: visible },
    verticalAlign && 'content-'.concat(verticalAlign.replace(/\s/g, '-')),
    'backdrop',
    className
  );
  var contentClasses = clsx({ visible: visible }, 'content');
  // ----
  // Compute the Inner Content
  // ----
  var innerContent = childrenUtils.isNil(children) ? content : children;
  // ----
  // Render the Content
  // ----
  return React.createElement(
    Fade,
    {
      ref: containerRef,
      onExiting: onExiting,
      onExited: onExited,
      onEntered: onEntered,
      onEntering: onEntering,
      visible: visible,
      timeout: timeout,
    },
    React.createElement(
      'div',
      __assign({}, rest, {
        className: classes,
        onClick: handleClick,
        role: 'region',
      }),
      innerContent &&
        React.createElement(
          'div',
          { ref: contentRef, className: contentClasses },
          innerContent
        )
    )
  );
};
/** Properly set the Display Name */
BackdropInner.displayName = 'BackdropInner';

export { BackdropInner as default };