@cainiaofe/cn-ui-m
Version:
107 lines (106 loc) • 3.57 kB
TypeScript
/// <reference types="react" />
import type { IRequestConfig } from '@cainiaofe/cn-ui-common';
import type { StyleOverrides } from "../../../types";
import type { CnStatusTagProps } from "../../cn-tag";
import type { ICnColumn } from './column';
import type { IOperateColumns } from './operate-column';
import type { ICardItemsToolbar } from './toolbar';
import type { CnIconProps } from "../../cn-icon";
import type { IParams, IResponseData } from '../hooks/use-fetch-data-service';
import type { ICnRowSelection } from './row-selection';
export interface CnCardItemsProps extends StyleOverrides, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
/**
* 当在卡片内使用该组件时展示标题占位符，点击展示列表详情
* @deprecated 请使用 entryTitle (since version 0.10.5)
*/
listPlaceholder?: React.ReactNode;
/**
* 当在卡片内使用该组件时展示标题占位符，点击展示列表详情
*/
entryTitle?: React.ReactNode;
/**
* 请求配置
*/
requestConfig?: IRequestConfig<IResponseData, IParams>;
/**
* 表主键，用于更新时的数据替换，默认值是'id', 一般java工程主键值是'id'
* 不设置或值重复会出现数据行重复和多选不可用等问题
* @default id
*/
primaryKey?: string;
dataSource?: Array<Record<string, unknown>>;
/** 表格列 */
columns?: ICnColumn[];
/** 操作列 */
operateColumn?: IOperateColumns;
/**
* 卡片标题icon
*/
icon?: (record: Record<string, unknown>) => CnIconProps | string;
/**
* 卡片标题
*/
title?: (record: Record<string, unknown>) => React.ReactNode;
/**
* 卡片标题描述
*/
desc?: (record: Record<string, unknown>) => string;
/**
* 卡片标题行动点
* 该属性展示依赖title
*/
action?: (record: Record<string, unknown>) => React.ReactNode;
/**
* 卡片内部标题icon
*/
subIcon?: (record: Record<string, unknown>) => CnIconProps | string;
/**
* 卡片内部标题
*/
subTitle?: (record: Record<string, unknown>) => React.ReactNode;
/**
* 卡片内标题描述
*/
subDesc?: (record: Record<string, unknown>) => string;
/**
* 卡片内部标题行动点
* 该属性展示依赖subTitle
*/
subAction?: (record: Record<string, unknown>) => React.ReactNode;
/**
* 内部标题下的标签组
*/
tags?: (record: Record<string, unknown>) => CnStatusTagProps[];
toolbar?: ICardItemsToolbar;
/**
* 是否支持多选
* 注意：开启多选前，必须设定有效的 primaryKey
*/
showSelect?: boolean;
/**
* 行选择配置
*/
rowSelection?: ICnRowSelection;
/**
* 选择变化监听
*/
onSelectChange?: (keys: unknown[], record: ICnColumn[]) => void;
/**
* 是否禁用点击展示详情能力
*/
disableDetail?: boolean;
/**
* 卡片模式标签位置，支持左右布局和上下布局，auto 模式会根据语言自适应，中文左右布局，非中文上下布局
* @default left
*/
labelAlign?: 'auto' | 'left' | 'top';
/**
* 点击卡片后的详情假页标签位置，支持左右布局和上下布局，auto 模式会根据语言自适应，中文左右布局，非中文上下布局
* @default top
*/
detailLabelAlign?: 'auto' | 'left' | 'top';
/**
* 空数据时的提示内容
*/
emptyContent?: React.ReactNode;
}