// @flow import type { Node } from 'react'; import React, { useState } from 'react'; import classnames from 'classnames'; import Icon from 'component/common/icon'; import Button from 'component/button'; import * as ICONS from 'constants/icons'; type Props = { title?: string | Node, subtitle?: string | Node, titleActions?: string | Node, body?: string | Node, actions?: string | Node, icon?: string, className?: string, isPageTitle?: boolean, noTitleWrap?: boolean, isBodyList?: boolean, defaultExpand?: boolean, nag?: Node, smallTitle?: boolean, onClick?: () => void, children?: Node, }; export default function Card(props: Props) { const { title, subtitle, titleActions, body, actions, icon, className, isPageTitle = false, isBodyList = false, noTitleWrap = false, smallTitle = false, defaultExpand, nag, onClick, children, } = props; const [expanded, setExpanded] = useState(defaultExpand); const expandable = defaultExpand !== undefined; return (
{ if (onClick) { onClick(); } }} > {(title || subtitle) && (
{icon && }
{isPageTitle &&

{title}

} {!isPageTitle && (

{title}

)} {subtitle &&
{subtitle}
}
{titleActions && (
{titleActions}
)} {expandable && (
)}
)} {(!expandable || (expandable && expanded)) && ( <> {body && (
{body}
)} {actions &&
{actions}
} {children &&
{children}
} )} {nag}
); }