jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
394 lines (393 loc) • 11.6 kB
TypeScript
import type { BaseSchemaScoped, PlainObject, RendererEvent, RendererProps, SchemaBoolean, SchemaMessage } from 'jamis-core';
import type { ActionProps, ActionSchema, AutoGenerateFilterObject, BaseSchema, CardsRendererEvent, CardsSchema, DropdownButtonSchema, FormSchema, ICRUDStore, IRow, ListSchema, SchemaApi, SchemaClassName, SchemaCollection, SchemaExpression, SchemaObject, SchemaTokenizeableString, SchemaTpl, TableRendererEvent, TableSchema, WithPrefixAffixHook, WithWrapperHook } from '../types';
export type { ICRUDStore } from './CrudStore';
export type CRUDBultinToolbarType = 'columns-toggler' | 'drag-toggler' | 'pagination' | 'bulkActions' | 'bulk-actions' | 'statistics' | 'switch-per-page' | 'load-more' | 'filter-toggler' | 'export-csv' | 'export-excel' | 'reload';
export interface CRUDBultinToolbar extends Omit<BaseSchema, 'type'> {
type: CRUDBultinToolbarType;
/**
* 对齐方式
*/
align?: 'left' | 'right';
}
export type CRUDToolbarChild = (SchemaObject & {
align?: 'left' | 'right';
}) | CRUDBultinToolbar;
export type CRUDRendererEvent = TableRendererEvent | CardsRendererEvent;
export interface CRUDCommonSchema extends BaseSchemaScoped, WithWrapperHook, WithPrefixAffixHook {
/**
* 指定为 CRUD 渲染器。
*/
type: 'crud';
/**
* 指定内容区的展示模式。
*/
mode?: 'table' | 'grid' | 'cards' | /* grid 的别名*/ 'list';
/**
* 初始化数据 API
*/
api?: SchemaApi;
/**
* 批量操作
*/
bulkActions?: Array<ActionSchema | DropdownButtonSchema>;
/**
* 单条操作
*/
itemActions?: Array<ActionSchema | DropdownButtonSchema>;
/**
* 点击列表项的行为
*/
itemAction?: {
onClick?: (event: React.SyntheticEvent<HTMLElement>, props: ActionProps, rowData: IRow['data']) => any;
} & Omit<ActionSchema, 'onClick'>;
/**
* 每页个数,默认为 10,如果不是请设置。
*
* @default 10
*/
perPage?: number;
/**
* 每页个数表达式
*/
perPageExpr?: SchemaExpression;
/**
* 默认排序字段
*/
orderBy?: string;
/**
* 默认排序方向
*/
orderDir?: 'asc' | 'desc';
/**
* 可以默认给定初始参数如: {\"perPage\": 24}
*/
defaultParams?: PlainObject;
/**
* 是否可通过拖拽排序
*/
draggable?: boolean;
/**
* 是否可通过拖拽排序,通过表达式来配置
*/
draggableOn?: SchemaExpression;
/**
* 过滤器表单
*/
filter?: Partial<FormSchema>;
/**
* 初始是否拉取
* @deprecated 建议用 api 的 sendOn 代替。
*/
initFetch?: boolean;
/**
* 初始是否拉取,用表达式来配置。
* @deprecated 建议用 api 的 sendOn 代替。
*/
initFetchOn?: SchemaExpression;
/**
* 设置自动刷新时间
*/
interval?: number;
/**
* 设置用来确定位置的字段名,设置后新的顺序将被赋值到该字段中。
*/
orderField?: string;
/**
* 设置分页页码字段名。
* @default page
*/
pageField?: string;
/**
* 设置分页一页显示的多少条数据的字段名。
* @default perPage
*/
perPageField?: string;
/**
* 快速编辑后用来批量保存的 API
*/
quickSaveApi?: SchemaApi;
/**
* 快速编辑配置成及时保存时使用的 API
*/
quickSaveItemApi?: SchemaApi;
/**
* 保存排序的 api
*/
saveOrderApi?: SchemaApi;
/**
* 是否将过滤条件的参数同步到地址栏,默认为true
* @default true
*/
syncLocation?: boolean;
/**
* 顶部工具栏
*/
headerToolbar?: Array<CRUDToolbarChild | CRUDBultinToolbarType>;
headerToolbarClassName?: SchemaClassName;
/**
* 底部工具栏
*/
footerToolbar?: Array<CRUDToolbarChild | CRUDBultinToolbarType>;
footerToolbarClassName?: SchemaClassName;
/**
* 每页显示多少个空间成员的配置如: [5, 10, 20, 50, 100]。
*/
perPageAvailable?: Array<number>;
messages?: SchemaMessage;
/**
* 是否隐藏快速编辑的按钮。
*/
hideQuickSaveBtn?: boolean;
/**
* 是否自动跳顶部,当切分页的时候。 默认false
*/
autoJumpToTopOnPagerChange?: boolean;
/**
* 静默拉取
*/
silentPolling?: boolean;
stopAutoRefreshWhen?: SchemaExpression;
stopAutoRefreshWhenModalIsOpen?: boolean;
filterTogglable?: boolean;
filterDefaultVisible?: boolean;
/**
* 是否将接口返回的内容自动同步到地址栏,前提是开启了同步地址栏。
*/
syncResponse2Query?: boolean;
/**
* 分页的时候是否保留用户选择, 同时在表格上部渲染出`已选择`部分
*/
keepItemSelectionOnPageChange?: boolean;
/**
* 当配置 keepItemSelectionOnPageChange 时有用,用来配置已勾选项的文案。
*/
labelTpl?: SchemaTpl;
/**
* 是否为前端单次加载模式,可以用来实现前端分页。
*/
loadDataOnce?: boolean;
/**
* 在开启loadDataOnce时,filter时是否去重新请求api
*/
loadDataOnceFetchOnFilter?: boolean;
/**
* 重新加载(reload) 监听表达式
*/
reloadTrackExpression?: SchemaExpression;
/**
* 也可以直接从环境变量中读取,但是不太推荐。
*/
source?: SchemaTokenizeableString;
/**
* 如果是内嵌模式,可以通过这个来配置默认的展开选项。
*/
expandConfig?: {
/**
* 默认是展开第一个、所有、还是都不展开。
*/
expand?: 'first' | 'all' | 'none';
/**
* 是否显示全部切换按钮
*/
expandAll?: boolean;
/**
* 是否为手风琴模式
*/
accordion?: boolean;
};
/**
* 默认只有当分页数大于 1 是才显示,如果总是想显示请配置。
*/
alwaysShowPagination?: boolean;
/**
* 开启查询区域,会根据列元素的searchable属性值,自动生成查询条件表单
*/
autoGenerateFilter?: boolean | AutoGenerateFilterObject;
/**
* 内容区域占满屏幕剩余空间
*/
autoFillHeight?: TableSchema['autoFillHeight'];
/**
* body内的css类型
*/
bodyClassName?: SchemaClassName;
toolbarClassName?: SchemaClassName;
/**
* `.cxd-Crud-actions` 元素的样式类
*/
actionsClassName?: SchemaClassName;
/**
* 是否通过滚动方式加载更多, 只有在footerToolbar中有`load-more`时才会生效, 默认值是true
*/
loadMoreOnScroll?: boolean;
/**
* 加载更多按钮文字, 支持表达式
*/
loadMoreBtnLabel?: SchemaExpression;
/**
* 加载更多按钮`.cxd-Crud-loadMore`的样式类
*/
loadMoreClassName?: SchemaClassName;
showLoading?: boolean;
showLoadingOn?: SchemaBoolean;
/**
* 延迟渲染阈值配置, 默认是100
*/
lazyRenderAfter?: number;
}
export interface CRUDCardsSchema extends Omit<CRUDCommonSchema, 'mode'>, Omit<CardsSchema, 'type' | 'itemAction'> {
mode: 'cards';
/** CRUD的数据域 */
data?: Record<string, any>;
}
export interface CRUDListSchema extends Omit<CRUDCommonSchema, 'mode' | 'itemAction'>, Omit<ListSchema, 'type'> {
mode: 'list';
/** CRUD的数据域 */
data?: Record<string, any>;
}
export interface CRUDTableSchema extends Omit<CRUDCommonSchema, 'mode'>, Omit<TableSchema, 'type' | 'headerToolbar'> {
mode?: 'table';
/** CRUD的数据域 */
data?: Record<string, any>;
}
/**
* CRUD 增删改查渲染器。
*
*/
export type CRUDSchema = CRUDTableSchema | CRUDCardsSchema | CRUDListSchema;
export interface CRUDProps extends RendererProps, Omit<CRUDCommonSchema, 'type' | 'className' | 'data'> {
store: ICRUDStore;
pickerMode?: boolean;
dispatchEvent: (event: string, data?: any) => Promise<RendererEvent>;
toolbarClassName?: string;
}
export interface CRUD2CommonSchema extends BaseSchemaScoped {
/**
* 指定为 CRUD2 渲染器。
*/
type: 'crud2';
/**
* 指定内容区的展示模式。
*/
mode?: 'table' | 'grid' | 'cards' | /* grid 的别名*/ 'list' | 'table2';
/**
* 初始化数据 API
*/
api?: SchemaApi;
/**
* 也可以直接从环境变量中读取,但是不太推荐。
*/
source?: SchemaTokenizeableString;
/**
* 静默拉取
*/
silentPolling?: boolean;
/**
* 设置自动刷新时间
*/
interval?: number;
stopAutoRefreshWhen?: SchemaExpression;
/**
* 数据展示模式 无限加载 or 分页
*/
loadType?: 'more' | 'pagination';
/**
* 无限加载时,根据此项设置其每页加载数量,可以不限制
*/
perPage?: number;
/**
* 是否为前端单次加载模式,可以用来实现前端分页。
*/
loadDataOnce?: boolean;
/**
* 重新加载(reload) 监听表达式
*/
reloadTrackExpression?: SchemaExpression;
/**
* 是否可以选择数据,外部事件动作
*/
selectable?: boolean;
/**
* 是否可以多选数据,仅当selectable为 true 时生效
*/
multiple?: boolean;
/**
* 是否展示已选数据区域,仅当selectable为 true 时生效
*/
showSelection?: boolean;
/**
* 快速编辑后用来批量保存的 API
*/
quickSaveApi?: SchemaApi;
/**
* 快速编辑配置成及时保存时使用的 API
*/
quickSaveItemApi?: SchemaApi;
/**
* 保存排序的 api
*/
saveOrderApi?: SchemaApi;
/**
* 是否将过滤条件的参数同步到地址栏,默认为true
* @default true
*/
syncLocation?: boolean;
/**
* 设置分页页码字段名。
* @default page
*/
pageField?: string;
/**
* 设置分页一页显示的多少条数据的字段名。
* @default perPage
*/
perPageField?: string;
/**
* 是否隐藏快速编辑的按钮。
*/
hideQuickSaveBtn?: boolean;
/**
* 是否自动跳顶部,当切分页的时候。
*/
autoJumpToTopOnPagerChange?: boolean;
/**
* 顶部区域
*/
headerToolbar?: SchemaCollection;
/**
* 底部区域
*/
footerToolbar?: SchemaCollection;
/**
* 是否将接口返回的内容自动同步到地址栏,前提是开启了同步地址栏。
*/
syncResponse2Query?: boolean;
/**
* 翻页时是否保留用户已选的数据
*/
keepItemSelectionOnPageChange?: boolean;
/**
* 内容区域占满屏幕剩余空间
*/
autoFillHeight?: boolean;
}
export type CRUD2CardsSchema = CRUD2CommonSchema & {
mode: 'cards';
} & Omit<CardsSchema, 'type'>;
export type CRUD2ListSchema = CRUD2CommonSchema & {
mode: 'list';
} & Omit<ListSchema, 'type'>;
export type CRUD2Schema = CRUD2CardsSchema | CRUD2ListSchema;
export interface CRUD2Props extends RendererProps, Omit<CRUD2CommonSchema, 'type' | 'className' | 'data'> {
store: ICRUDStore;
pickerMode?: boolean;
}
/**
* 滚动事件参数
*/
export interface ScrollEventParam {
hitBottom: boolean;
scrollHeight: number;
scrollTop: number;
offsetHeight: number;
}