UNPKG

jamis

Version:

一种支持通过JSON配置方式生成页面的组件库

394 lines (393 loc) 11.6 kB
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; }