@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
90 lines (89 loc) • 3.18 kB
TypeScript
/**
* TODO:
* - Update other examples / stories to use the component
* - Responsiveness
*/
import React, { ReactNode } from 'react';
import { CardProps } from '@mui/material/Card';
import { ChipProps } from '@mui/material/Chip';
import { CardMediaProps } from '@mui/material/CardMedia';
import { CheckboxProps } from '@mui/material/Checkbox';
import { BadgeProps } from '@mui/material/Badge';
import { MenuItemProps } from '@mui/material/MenuItem';
import { ICardLoadingProps } from '../Card/Card.container';
export type IComplexCardMenuItem = Omit<MenuItemProps, 'children'> & {
label: string;
icon?: JSX.Element;
};
export type IComplexCard = Omit<CardProps, 'children'> & ICardLoadingProps & {
/**
* Sets the shape of the card
*
* @default 'square'
*/
mode?: 'square' | 'rectangle';
/**
* Used for the main card graphic. Supports remote urls or local image files.
*/
image?: CardMediaProps['image'];
/**
* Placeholder to show if there is no image spacified. Supports any JSX Element, including EmptyState.
*
* @default <Photo fontColor={'inherit'}/>
*/
imagePlaceholder?: JSX.Element;
/**
* A tag/chip to display at the top of the card. It is fully customizable, supporting all MUI Chip props.
*/
primaryTag?: ChipProps;
/**
* A list of tags/chips that you want to use to label the card. Each item in the list is fully customizable, supporting all MUI Chip props.
*
* @default []
*/
tags?: ReadonlyArray<ChipProps>;
/**
* The primary text label on the card.
*/
primaryText: string;
/**
* An optional second line of text / description.
*/
secondaryText?: string;
/**
* An optional third line of text / description.
*/
tertiaryText?: string;
/**
* If specified, the primaryText will have a badge indicator on the right (to indicate 'new', 'unread', etc.). Set to undefined to hide.
*/
statusBadgeColor?: BadgeProps['color'];
/**
* Items passed as children will appear adjacent to the text labels on the card. It is typically used for showing users / audience using the AudienceGroup component or additional action icons.
*/
children?: ReactNode;
/**
* A list of actions to show in the 3-dot overflow menu. Appears in the top right corner of the image for square mode and on the far right in list mode.
*
* @default []
*/
menuActions?: ReadonlyArray<IComplexCardMenuItem | JSX.Element>;
/**
* If true, the ComplexCard will allow selection via a checkbox. The checkbox appears in the top left of the image in square mode and on the far left in list mode.
*
* @default false
*/
selectable?: boolean;
/**
* Set the selection state of the ComplexCard.
*
* @default false
*/
selected?: boolean;
/**
* Callback fired when the selected state changes.
*/
onSelectChange?: CheckboxProps['onChange'];
};
export declare const ComplexCard: React.ForwardRefExoticComponent<Omit<IComplexCard, "ref"> & React.RefAttributes<HTMLDivElement>>;
export default ComplexCard;