@appbuckets/react-ui/esm/Item/ItemContent.js

Just Another React UI Framework

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

/* --------
 * Component Render
 * -------- */
var ItemContent = function (receivedProps) {
  var props = useWithDefaultProps('itemContent', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    children = _b.children,
    content = _b.content,
    header = _b.header,
    loading = _b.loading,
    meta = _b.meta,
    rest = __rest(_b, ['children', 'content', 'header', 'loading', 'meta']);
  /** Get the component element type */
  var ElementType = useElementType(ItemContent, receivedProps, props);
  /** Build the element class list */
  var classes = clsx('content', className);
  var hasChildren = !childrenUtils.isNil(children);
  // ----
  // Define Component Memoized Element
  // ----
  var loaderElement = React.useMemo(
    function () {
      return (
        loading &&
        Loader.create(
          typeof loading !== 'boolean'
            ? loading
            : { type: 'indeterminate bar' },
          {
            autoGenerateKey: false,
            defaultProps: {
              primary: true,
              size: 'big',
              type: 'indeterminate bar',
            },
            overrideProps: {
              active: true,
            },
          }
        )
      );
    },
    [loading]
  );
  var headerElement = React.useMemo(
    function () {
      return (
        !hasChildren &&
        ItemHeader.create(header, {
          autoGenerateKey: false,
        })
      );
    },
    [hasChildren, header]
  );
  var textOrLoaderElement = React.useMemo(
    function () {
      if (hasChildren) {
        return null;
      }
      if (loading) {
        return loaderElement;
      }
      return ItemText.create(content, {
        autoGenerateKey: false,
      });
    },
    [hasChildren, content, loading, loaderElement]
  );
  var metaElement = React.useMemo(
    function () {
      return (
        !hasChildren &&
        !loading &&
        ItemMeta.create(meta, {
          autoGenerateKey: false,
        })
      );
    },
    [hasChildren, meta, loading]
  );
  // ----
  // Component render with declared children
  // ----
  if (hasChildren) {
    return React.createElement(
      ElementType,
      __assign({}, rest, { className: classes }),
      children
    );
  }
  // ----
  // Component render with shorthand
  // ----
  return React.createElement(
    ElementType,
    __assign({}, rest, { className: classes }),
    headerElement,
    textOrLoaderElement,
    metaElement
  );
};
ItemContent.displayName = 'ItemContent';
ItemContent.Header = ItemHeader;
ItemContent.Text = ItemText;
ItemContent.Meta = ItemMeta;
ItemContent.create = createShorthandFactory(ItemContent, function (content) {
  return { content: content };
});

export { ItemContent as default };