import type { PickClassStyleType, ReactPropsBase, RendererProps, SchemaClassName, SchemaExpression } from 'jamis-core'; import type { ActionSchema, BaseSchema, DropdownButtonSchema, IListItem, SchemaCopyable, SchemaObject, SchemaPopOver, SchemaQuickEdit, SchemaTpl, SchemaUrlPath, TplSchema } from '../types'; /** * Card 卡片组件。 * */ export interface CardSchema extends BaseSchema { /** * 指定为 card 类型 */ type: 'card'; /** * 头部配置 */ header?: CardHeader; /** * 内容区域 */ body?: Array | SchemaTpl; /** @deprecated 请使用`slots.className` */ bodyClassName?: SchemaClassName; /** * 多媒体区域 */ media?: CardMedia; /** * 底部按钮集合。 */ actions?: Array; /** @deprecated 请使用`slots.className` */ actionsClassName?: SchemaClassName; /** * 每个操作按钮的样式类 * @deprecated 请使用`slots.className` */ actionsItemClassName?: SchemaClassName; /** * 工具栏按钮 */ toolbar?: Array; /** * 次要说明 */ secondary?: SchemaTpl; /** * 卡片内容区的表单项label是否使用Card内部的样式,默认为true */ useCardLabel?: boolean; /** * 设置整个卡片的点击行为 */ itemAction?: ActionSchema | DropdownButtonSchema; /** * 卡片跳转地址, 可以是绝对路径, 也可以是前端路由 */ href?: string; /** * 是否新窗口打开 */ blank?: boolean; /** @deprecated 请使用`slots.className` */ lazyItemClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ headerClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ titleClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ subTitleClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ descriptionClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ avatarTextStyle?: React.CSSProperties; /** @deprecated 请使用`slots.className` */ avatarTextClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ avatarClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ secondaryClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ imageClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ footerClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ mediaPosition?: 'top' | 'left' | 'right' | 'bottom'; /** @deprecated 请使用`slots.className` */ mediaClassName?: SchemaClassName; /** @deprecated 请使用`slots.className` */ descClassName?: SchemaClassName; } export interface CardBodyField { /** * 列标题 */ label?: string; /** * label 类名 */ labelClassName?: SchemaClassName; /** * 绑定字段名 */ name?: string; /** * 配置查看详情功能 */ popOver?: SchemaPopOver; /** * 配置快速编辑功能 */ quickEdit?: SchemaQuickEdit; /** * 配置点击复制功能 */ copyable?: SchemaCopyable; /** 外部包装的样式类 */ wrapClassName?: SchemaClassName; } export interface CardHeader { className?: SchemaClassName; /** * 标题 */ title?: SchemaTpl; titleClassName?: SchemaClassName; /** * 副标题 */ subTitle?: SchemaTpl; subTitleClassName?: SchemaClassName; subTitlePlaceholder?: string; /** * 描述 */ description?: SchemaTpl; /** * 描述占位内容 */ descriptionPlaceholder?: string; /** * 描述占位类名 */ descriptionClassName?: SchemaClassName; /** * @deprecated 建议用 description */ desc?: SchemaTpl; /** * @deprecated 建议用 descriptionPlaceholder */ descPlaceholder?: SchemaTpl; /** * @deprecated 建议用 descriptionClassName */ descClassName?: SchemaClassName; /** * 图片地址 */ avatar?: SchemaUrlPath; avatarText?: SchemaTpl; avatarTextBackground?: String[]; avatarTextClassName?: SchemaClassName; /** * 图片包括层类名 */ avatarClassName?: SchemaClassName; /** * 图片类名。 */ imageClassName?: SchemaClassName; /** * 是否点亮 */ highlight?: SchemaExpression | boolean; highlightClassName?: SchemaClassName; /** * 链接地址 */ href?: SchemaTpl; /** * 是否新窗口打开 */ blank?: boolean; } export interface CardMedia { className?: SchemaClassName; /** * 多媒体类型 */ type?: 'image' | 'video'; /** * 多媒体链接地址 */ url?: SchemaUrlPath; /** * 多媒体区域位置 */ position?: 'top' | 'left' | 'right' | 'bottom'; /** * 类型为video时是否自动播放 */ autoPlay?: boolean; /** * 类型为video时是否是直播 */ isLive?: boolean; /** * 类型为video时视频封面 */ poster?: SchemaUrlPath | false; } export interface CardRendererProps extends RendererProps, Omit { actionsCount: number; itemIndex?: number; dragging?: boolean; selectable?: boolean; selected?: boolean; checkable?: boolean; multiple?: boolean; hideCheckToggler?: boolean; item?: IListItem; checkOnItemClick?: boolean; onCheck: (item?: IListItem) => Promise; onDoubleClick?: (e: React.MouseEvent) => void; onClickBefore?: () => Promise; } export interface CardProps extends Omit, ReactPropsBase, PickClassStyleType { media?: React.ReactNode; toolbar?: React.ReactNode; children?: React.ReactNode; actions?: React.ReactNode; title?: string | JSX.Element; subTitle?: string | JSX.Element; subTitlePlaceholder?: string | JSX.Element; description?: string | JSX.Element; descriptionPlaceholder?: string | JSX.Element; avatar?: string; avatarText?: string | JSX.Element; secondary?: string | JSX.Element; onClick?: (e: React.MouseEvent) => void; onDoubleClick?: (e: React.MouseEvent) => void; data?: any; }