linkmore-design
Version:
🌈 🚀lm组件库。🚀
154 lines (153 loc) • 5.2 kB
TypeScript
import { useSelections } from 'ahooks';
import { CSSProperties, ReactNode } from 'react';
/** 断点: 断点对应行展示数量 */
declare enum BreakPointEnum {
XS = "xs",
SM = "sm",
MD = "md",
LG = "lg",
XL = "xl",
XXL = "xxl"
}
/** [ x ] 响应式布局配置项 */
declare type ResizeConfigProps = {
/** 只对 auto-resize 有效，刷新延时，当父容器发生变化时，至少多少毫秒刷新布局 @default 250 */
refreshDelay: number;
} & {
[K in BreakPointEnum]: number;
};
/** 复选框配置 */
declare type CheckboxConfigProps = {
/** 指定选中项的 key 数组 */
selected: string[];
/** 默认选中项的 key 数组 */
defaultSelected: string[];
/** 高亮勾选行 */
highlight: boolean;
/** 复选框触发方式 */
trigger: 'default' | 'cell' | string;
} & ReturnType<typeof useSelections>;
/** 行配置参数 */
declare type RowConfigProps = {
/** 行间隔 */
gap: {
x: number;
y: number;
};
};
/** 组件配置项 */
export interface ConfigProps {
/** 响应式布局配置项 */
resizeConfig: ResizeConfigProps;
/** 复选框配置 */
checkboxConfig: CheckboxConfigProps;
/** 行配置 */
rowConfig: RowConfigProps;
}
/** 自定义渲染是需要的参数 */
declare type LayoutProps = {
record: Record<string, any>;
instance: any;
};
/** 自定义节点的字段 */
declare type FieldNames = 'title' | 'code' | 'img' | 'tag';
/** 自定义渲染内容 */
export interface RenderConfigProps {
/** 自定义操作列表 */
actionsRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义头区域 */
headerRender: (layoutProps: LayoutProps, dom: ReactNode) => ReactNode;
/** 自定义头标题区域 */
headerTitleRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义头编码区域 */
headerCodeRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义标签区域 */
tagRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义内容区域 */
contentRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义图片区域 */
imageRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义图片容器区域 */
thumbRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义卡片区域 */
itemRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义侧边栏区域 */
siderRender: (layoutProps: LayoutProps) => ReactNode;
/** 自定义页脚区域 */
footerRender: (layoutProps: LayoutProps) => ReactNode;
/** 空数据渲染内容 */
emptyRender: (layoutProps: LayoutProps) => ReactNode;
/** 分组标题渲染内容 */
groupRender: (layoutProps: {
groupKey: string;
groupData: Record<string, any>[];
onExpand: (expand?: boolean) => void;
instance: any;
}) => ReactNode;
}
/** 额外的可选参数 */
export interface ExtraPartialProps {
/** 类名前缀: 暂不支持更改 */
prefixCls: string;
/** 自定义节点的字段 */
fieldNames: Record<FieldNames, string>;
/** 描述布局(图片和内容的排列方向: 当前仅支持horizontal) */
layout: 'horizontal' | 'vertical';
/** 自定义内容样式 */
contentStyle: CSSProperties;
/** 内容列布局模式 */
contentColumn: number;
/** layout的加载态 */
loading: ReactNode | boolean;
/** 不展示复制功能 */
hideCopyButton: boolean;
/** 错误处理, 防止白屏 */
ErrorBoundary: ReactNode;
}
export interface ColumnProps {
dataIndex: string;
key?: string;
title?: string | ((text: string, record: Record<string, any>) => string | ReactNode);
render?: (text: string, record: Record<string, any>) => string | ReactNode;
[x: string]: any;
}
export interface EventProps {
/** 单元格被点击时会触发该事件 */
onClick: (record: Record<string, any>, instance: any) => void;
/** 单元格被双击时会触发该事件 */
onDoubleClick: (record: Record<string, any>, instance: any) => void;
/** 复选框选中事件: 手动勾选并且值发生改变时触发的事件 */
onCheckboxChange: ({ checked, record, instance }: {
checked: boolean;
} & LayoutProps) => void;
}
/** 组件接收参数 */
export interface ChartTableProps extends Partial<ConfigProps>, Partial<RenderConfigProps>, Partial<ExtraPartialProps>, Partial<EventProps> {
/**
* @description 数据源
*/
dataSource: any[];
/**
* @description 列配置
*/
columns: ColumnProps[];
/** @description 唯一标识 */
id?: string;
/** @description 尺寸 */
size?: 'large' | 'default' | 'small';
/** 高度, 默认响应式父容器高度 */
height?: number | string;
/** @description 是否启用分组功能
* @default false
*/
enableGroup?: boolean;
/** @description 分组字段 (配合 enableGroup 使用) */
groupKeys?: string | string[];
/** @description 分组默认展开 */
groupDefaultExpand?: boolean;
/** 多语言配置 */
locale?: {
noGroup?: string;
};
}
export {};