@dotcms/react/lib/next/components/Container/Container.esm.js

Official React Components library to render a dotCMS page.

"use client";
import { jsx } from 'react/jsx-runtime';
import { useContext, useMemo } from 'react';
import { getContainersData, getContentletsInContainer, getDotContainerAttributes } from '@dotcms/uve/internal';
import { ContainerNotFound, EmptyContainer } from './ContainerFallbacks.esm.js';
import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
import { Contentlet } from '../Contentlet/Contentlet.esm.js';

/**
 * @internal
 *
 * Container component that renders DotCMS containers and their contentlets.
 * This component is responsible for:
 * - Rendering container content based on DotCMS Page API data
 * - Handling empty container states
 * - Providing proper data attributes for DotCMS functionality
 * - Managing container contentlets rendering
 *
 * @component
 * @param {DotCMSContainerRendererProps} props - Component properties
 * @returns {JSX.Element} Rendered container with its contentlets or empty state message
 *
 * @example
 * ```tsx
 * <Container container={containerData} />
 * ```
 */
function Container({
  container
}) {
  const {
    pageAsset
  } = useContext(DotCMSPageContext);
  const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
  const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
  if (!containerData) {
    return jsx(ContainerNotFound, {
      identifier: container.identifier
    });
  }
  const isEmpty = contentlets.length === 0;
  const dotAttributes = getDotContainerAttributes(containerData);
  if (isEmpty) {
    return jsx(EmptyContainer, Object.assign({}, dotAttributes));
  }
  return jsx("div", Object.assign({}, dotAttributes, {
    children: contentlets.map(contentlet => jsx(Contentlet, {
      contentlet: contentlet,
      container: JSON.stringify(containerData)
    }, contentlet.identifier))
  }));
}

export { Container };