jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
289 lines (288 loc) • 8.69 kB
TypeScript
import type { CSSProperties } from 'react';
import type { ClassValue, DispatchEventFn, GetPopOverContainer, OnActionFn, OnEventProps, RendererEnv, RendererEvent, RendererProps, SchemaRenderFn, ThemeProps } from 'jamis-core';
import type { BadgeObject, BaseSchema, IColumn, IRow, SchemaClassName, SchemaCopyable, SchemaExpression, SchemaObject, SchemaPopOver, SchemaQuickEdit, SchemaRemark } from '../../types';
import type { AutoGenerateFilterObject, ITableStore } from '../types';
export * from './ColumnToggler.types';
export interface UseHeaderCellAffixProps extends Pick<RendererProps, 'data' | 'render' | 'dispatchEvent'> {
column: IColumn | (() => JSX.Element | null);
autoGenerateFilter?: boolean | AutoGenerateFilterObject;
store: ITableStore;
query?: Record<string, any>;
fetcher: RendererEnv['fetcher'];
popOverContainer?: GetPopOverContainer;
onQuery?: (values: object) => void;
onSort: (column: IColumn) => void;
}
export interface HeaderCellProps extends ThemeProps {
column: IColumn | (() => JSX.Element | null);
store: ITableStore;
headerCellClassName?: ClassValue;
expandBtnClass?: ClassValue;
resizable?: boolean;
multiple?: boolean;
tableFixed?: boolean;
renderHeaderCellAffix: (column: IColumn | (() => JSX.Element | null)) => JSX.Element | null;
getModalContainer?: () => HTMLElement;
render: SchemaRenderFn;
resolveVariable: <T>(expr: string) => T;
cellProps: HeaderCellRenderProps;
onCheckAll?: () => void;
onResizeMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
}
export interface BodyCellProps extends ThemeProps {
region: string;
column: IColumn | (() => JSX.Element | null);
row: IRow;
ignoreDrag?: boolean;
bordered?: boolean;
store: ITableStore;
bodyCellClassName?: ClassValue;
tableFixed: boolean;
multiple?: boolean;
expandBtnClass?: ClassValue;
cellProps: RenderCellProps;
popOverContainer: JSX.Element;
canAccessSuperData?: boolean;
quickEditFormRef: any;
itemBadge?: BadgeObject;
render: SchemaRenderFn;
onCheck?: (row: IRow, value: any) => void;
onDragStart?: (e: React.DragEvent) => void;
onImageEnlarge: (info: any, target: {
rowIndex: number;
colIndex: number;
}) => any;
}
export interface QuickSearchConfig {
type?: string;
controls?: any;
tabs?: any;
fieldSet?: any;
[propName: string]: any;
}
export interface HeadCellSearchProps extends Pick<RendererProps, 'data' | 'render' | 'dispatchEvent' | 'onAction'> {
name?: string;
searchable: boolean | QuickSearchConfig;
searchIcon?: string;
searchIconClassName?: SchemaClassName;
sortable?: boolean;
label?: string;
orderBy?: string;
popOverContainer?: GetPopOverContainer;
orderDir?: string;
onQuery: (values: object) => void;
}
export interface QuickFilterConfig {
options: Array<any>;
multiple: boolean;
[propName: string]: any;
}
export interface HeadCellFilterProps extends Pick<RendererProps, 'data' | 'render' | 'dispatchEvent' | 'onAction'> {
data: any;
name: string;
filterable: QuickFilterConfig;
items?: any[];
filterOptions?: any[];
popOverContainer?: GetPopOverContainer;
fetcher: RendererEnv['fetcher'];
onQuery: (values: object) => void;
}
/**
* 表格列,不指定类型时默认为文本类型。
*/
export interface TableColumnObject {
/**
* 列标题, false时表示没有标题
*/
label?: string | false;
/**
* 配置是否固定当前列
*/
fixed?: 'left' | 'right' | 'none';
/**
* 绑定字段名
*/
name?: string;
/**
* 超级表头,用于对表头再一次进行分组
*/
groupName?: string;
/**
* 配置查看详情功能
*/
popOver?: SchemaPopOver;
/**
* 配置当前行是否启动,要用表达式
*/
popOverEnableOn?: SchemaExpression;
/**
* 配置快速编辑功能
*/
quickEdit?: SchemaQuickEdit;
/**
* 作为表单项时,可以单独配置编辑时的快速编辑面板。
*/
quickEditOnUpdate?: SchemaQuickEdit;
/**
* 配置点击复制功能
*/
copyable?: SchemaCopyable;
/**
* 配置是否可以排序
*/
sortable?: boolean;
/**
* 是否可快速搜索
*/
searchable?: boolean | SchemaObject;
searchIcon?: string;
searchIconClassName?: SchemaClassName;
/**
* 配置是否默认展示
*/
toggled?: boolean;
/**
* 列宽度
*/
width?: number | string;
widthExpr?: SchemaExpression;
/**
* 列对齐方式
*/
align?: 'left' | 'right' | 'center' | 'justify';
/**
* 列样式表
*/
className?: SchemaClassName;
/**
* 单元格样式表达式
*/
classNameExpr?: SchemaExpression;
/**
* 列头样式表
*/
labelClassName?: SchemaClassName;
/**
* todo
*/
filterable?: boolean | {
source?: string;
options?: Array<any>;
};
/**
* 结合表格的 footable 一起使用。
* 填写 *、xs、sm、md、lg指定 footable 的触发条件,可以填写多个用空格隔开
*/
breakpoint?: '*' | 'xs' | 'sm' | 'md' | 'lg';
/**
* 提示信息
*/
remark?: SchemaRemark;
/**
* 默认值, 只有在 input-table 里面才有用
*/
value?: any;
/**
* 是否唯一, 只有在 input-table 里面才有用
*/
unique?: boolean;
/**
* 表格列单元格是否可以获取父级数据域值,默认为true,该配置对当前列内单元格生效
*/
canAccessSuperData?: boolean;
/**
* 用来根据数据控制自动分配色阶
*/
backgroundScale?: {
min?: number;
max?: number;
colors?: string[];
};
/**
* 列内容超过宽度将自动省略...
*/
ellipsis?: boolean | {
showTitle?: boolean;
};
isHead?: boolean;
/** 列内部元素的样式类 */
bodyClassName?: SchemaClassName;
/**
* 列内部元素的样式类
*/
bodyStyle?: CSSProperties;
}
export interface TableCellSchema extends BaseSchema, TableColumnObject {
type: 'cell' | 'table-cell';
}
export interface TableCellProps extends RendererProps, Omit<TableCellSchema, 'className'> {
wrapperComponent?: React.ComponentType<any>;
column: IColumn;
}
export interface HeaderCellRenderProps {
/** 当前列索引 */
index: number;
key: string | number;
/** 经过计算后的列数 */
columns?: IColumn[];
/** 总列数 */
columnCount: number;
colSpan?: number;
rowSpan?: number;
className?: string;
style?: CSSProperties;
[key: string]: any;
}
export interface RenderCellProps {
/** 当前列索引 */
index: number;
key: string | number;
/** 一共多少列 */
columnCount: number;
loading?: boolean;
isHead?: boolean;
colIndex?: number;
colSpan?: number;
className?: string;
style?: CSSProperties;
[key: string]: any;
}
export interface TableRowProps {
columns: Array<IColumn>;
item: IRow;
parent?: IRow;
itemClassName?: string;
itemIndex: number;
regionPrefix?: string;
checkOnItemClick?: boolean;
ignoreFootableContent?: boolean;
striped?: boolean;
canAccessSuperData?: boolean;
footableMode?: boolean;
footableColSpan?: number;
itemAction?: any;
render: RendererProps['render'];
dispatchEvent: DispatchEventFn;
onEvent: OnEventProps['onEvent'];
onAction?: OnActionFn;
onQuickChange?: (item: IRow, values: object, saveImmediately?: boolean | any, savePristine?: boolean, options?: {
resetOnFailed?: boolean;
reload?: string;
}) => void;
onCheck: (item: IRow, value: boolean, shift?: boolean) => Promise<void>;
renderCell: (region: string, column: IColumn, item: IRow, props: RenderCellProps) => React.ReactNode;
onRowClick?: (item: IRow, index: number, restArgs: {
clientX?: number;
clientY?: number;
}) => Promise<RendererEvent<any> | void>;
onRowDbClick?: (item: IRow, index: number, restArgs: {
clientX?: number;
clientY?: number;
}) => Promise<RendererEvent<any> | void>;
onRowMouseUp?: (item: IRow, index: number, restArgs: {
clientX?: number;
clientY?: number;
}) => Promise<RendererEvent<any> | void>;
onRowMouseEnter?: (item: IRow, index: number) => Promise<RendererEvent<any> | void>;
onRowMouseLeave?: (item: IRow, index: number) => Promise<RendererEvent<any> | void>;
}