import React, { useContext } from "react"; import { Body, BreadcrumbItem, Breadcrumbs, BreadcrumbsProps, Breakout, Card, CardProps, Column, ErrorMessageProps, Errors, Form, FormProps, Toolbar, ToolbarItem, } from "../../components"; import { NavigationContext } from "../../contexts"; import { BaseTemplate, BaseTemplateProps } from "./base"; export type CardBaseTemplateProps = BaseTemplateProps & { actions?: ToolbarItem[]; /** When set to true, a breakout component is applied to remove the page padding to the card. */ breakout?: boolean; /** Card props.*/ cardProps?: CardProps; /** Breadcrumb items to show. */ breadcrumbItems?: BreadcrumbItem[]; /** Breadcrumbs props. */ breadcrumbsProps?: BreadcrumbsProps; /** ErrorMessage props. */ errorMessageProps?: ErrorMessageProps; errors?: ErrorMessageProps["children"] | ErrorMessageProps["children"][]; /** Form props. */ formProps?: FormProps; /** Secondary navigation items to show. */ secondaryNavigationItems?: ToolbarItem[]; /** Secondary navigation (JSX) slot. */ slotSecondaryNavigation?: React.ReactNode; }; /** * BodyBase template, renders children within card component. * @constructor */ export const CardBaseTemplate: React.FC = ({ actions, breakout = false, children, cardProps, breadcrumbItems = [], breadcrumbsProps, errorMessageProps, errors = [], formProps, secondaryNavigationItems = [], slotSecondaryNavigation, ...props }) => { const { breadcrumbs, secondaryNavigation, secondaryNavigationItems: _secondaryNavigationItems, breadcrumbItems: _breadcrumbItems, } = useContext(NavigationContext); const contextBreadcrumbs = breadcrumbs || (breadcrumbItems.length || _breadcrumbItems?.length ? ( ) : null); const contextSecondaryNavigation = formProps || secondaryNavigation || secondaryNavigationItems.length || _secondaryNavigationItems?.length ? ( {formProps && (
)} ) : null; const renderCard = () => ( {actions && ( )} {slotSecondaryNavigation || (contextSecondaryNavigation && ( {contextSecondaryNavigation} ))} {contextBreadcrumbs && {contextBreadcrumbs}} {children} ); return ( {breakout ? {renderCard()} : renderCard()} ); };