@appbuckets/react-ui/esm/Loader/Loader.js

Just Another React UI Framework

import { __rest, __read, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import {
  createShorthandFactory,
  useElementType,
  childrenUtils,
} from '@appbuckets/react-ui-core';
import {
  useSharedClassName,
  useSplitStateClassName,
} from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';

/* --------
 * Component Render
 * -------- */
var Loader = function (receivedProps) {
  var props = useWithDefaultProps('loader', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    children = _b.children,
    content = _b.content,
    active = _b.active,
    centered = _b.centered,
    inline = _b.inline,
    inverted = _b.inverted,
    overlay = _b.overlay,
    type = _b.type,
    rawRest = __rest(_b, [
      'children',
      'content',
      'active',
      'centered',
      'inline',
      'inverted',
      'overlay',
      'type',
    ]);
  /** Get Render Element Type */
  var ElementType = useElementType(Loader, receivedProps, props);
  /** Get the State Class */
  var _c = __read(useSplitStateClassName(rawRest), 2),
    stateClassName = _c[0],
    rest = _c[1];
  /** Check if has Children */
  var hasChildren = !childrenUtils.isNil(children);
  /** Build Loader classes */
  var classes = clsx(
    type && type.replace(/\s/g, '-'),
    {
      centered: centered,
      inverted: inverted,
      inline: inline,
      overlay: overlay,
      active: active,
      'with-content': hasChildren || content,
      'is-normal': !props.size,
    },
    'loader',
    stateClassName,
    className
  );
  /** Build the Loader Content */
  var loaderContent = React.createElement(
    'div',
    { className: 'content' },
    hasChildren ? children : content
  );
  /** Circular loader is built using CSS only */
  if (type === 'circular') {
    return React.createElement(
      ElementType,
      __assign({}, rest, { className: classes }),
      loaderContent
    );
  }
  /** An indeterminate Loader has a bar container and a content */
  if (type === 'indeterminate bar') {
    return React.createElement(
      ElementType,
      __assign({}, rest, { className: classes }),
      React.createElement(
        'div',
        { className: 'progress-container' },
        React.createElement('div', { className: 'indeterminate-bar' })
      ),
      loaderContent
    );
  }
  /** Loader with Dots has 3 dot on type === dots, or 4 in type === circular dots */
  return React.createElement(
    ElementType,
    __assign({}, rest, { className: classes }),
    React.createElement(
      'div',
      { className: 'dots-container' },
      React.createElement('div', { className: 'dot' }),
      React.createElement('div', { className: 'dot' }),
      React.createElement('div', { className: 'dot' }),
      type === 'circular dots' &&
        React.createElement('div', { className: 'dot' })
    ),
    loaderContent
  );
};
/** Set component displayName */
Loader.displayName = 'Loader';
/** Create the shorthand factory */
Loader.create = createShorthandFactory(Loader, function (content) {
  return { content: content };
});

export { Loader as default };