jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
330 lines (329 loc) • 8.46 kB
TypeScript
import type { CSSProperties } from 'react';
import type { RendererProps } from 'jamis-core';
import type { ActionSchema, BaseSchema, FormHorizontal, SchemaClassName, SchemaCollection, SchemaExpression, SchemaTpl, SchemaUrlPath, SizeUnit, StaticControlSchemaBase, Trigger } from '../types';
export * from './components/types';
/**
* Wrapper 容器组件。
*
*/
export interface WrapperSchema extends BaseSchema {
/**
* 指定为 container 类型
*/
type: 'wrapper';
/**
* 内容
*/
body: SchemaCollection;
size?: SizeUnit | 'none';
sizeExpr?: SchemaExpression;
/**
* 期望不要使用,给 form controls 用法自动转换时使用的。
* @deprecated
*/
wrap?: boolean;
/**
* 容器标题, 如果设置, 则会显示如panel一样的效果
*/
title?: SchemaCollection | SchemaTpl | false;
/**
* `.cxd-Wrapper-body`是否使用边框包裹
*/
bordered?: boolean;
/**
* 标题栏样式
* @deprecated 请使用`slots.className`
*/
titleClassName?: SchemaClassName;
/**
* @deprecated 请使用`slots.className`
*/
bodyClassName?: SchemaClassName;
/**
* 是否可收缩, 默认是false
*/
collapsable?: boolean;
/**
* 初始的收缩状态
*/
collapsed?: boolean;
}
/**
* 可供设置的wrapper组件的属性配置
*/
export interface WithWrapperHook {
/**
* 容器标题, 如果设置, 则会显示如panel一样的效果
*/
title?: SchemaCollection | SchemaTpl | false;
/**
* @deprecated 请使用`slots.className`
*/
titleClassName?: SchemaClassName;
wrapper?: {
/** @deprecated 使用 `slots.className` */
className?: SchemaClassName;
title?: SchemaCollection | SchemaTpl | false;
/** @deprecated 请使用`slots.className` */
titleClassName?: SchemaClassName;
/** @deprecated 请使用`slots.className` */
bodyClassName?: SchemaClassName;
bordered?: boolean;
collapsable?: boolean;
collapsableOn?: SchemaExpression;
/** 初始展开状态 */
collapsed?: boolean;
collapsedOn?: SchemaExpression;
};
}
export interface StaticWrapperSchema extends Omit<WrapperSchema, 'type' | 'size'>, StaticControlSchemaBase {
type: 'static-wrapper';
}
/**
* Container 容器组件。
*/
export interface ContainerSchema extends BaseSchema {
/**
* 指定为 container 类型
*/
type: 'container';
/**
* 内容
*/
body: SchemaCollection;
/**
* body 类名
* @deprecated 请使用`slots.className`
*/
bodyClassName?: SchemaClassName;
/**
* 使用的标签
*/
wrapperComponent?: string;
isFreeContainer?: boolean;
size?: SizeUnit;
wrapperBody?: boolean;
}
export interface StaticContainerSchema extends Omit<ContainerSchema, 'type'>, StaticControlSchemaBase {
type: 'static-container';
}
export interface TooltipWrapperSchema extends BaseSchema {
/**
* 文字提示容器
*/
type: 'tooltip-wrapper';
/**
* 文字提示标题
*/
title?: string;
/**
* 文字提示内容,兼容 tooltip,但建议通过 content 来实现提示内容
*/
content?: SchemaCollection;
/**
* @deprecated 文字提示内容, 使用content替代
*/
tooltip?: string;
/**
* 文字提示浮层出现位置,默认为top
*/
placement?: 'top' | 'right' | 'bottom' | 'left';
/**
* 浮层位置相对偏移量
*/
offset?: [number, number];
/**
* 是否展示浮层指向箭头
*/
showArrow?: boolean;
/**
* 是否禁用提示
*/
disabled?: boolean;
/**
* 浮层触发方式,默认为hover
*/
trigger?: Trigger | Array<Trigger>;
/**
* 浮层延迟显示时间, 单位 ms
*/
mouseEnterDelay?: number;
/**
* 浮层延迟隐藏时间, 单位 ms
*/
mouseLeaveDelay?: number;
/**
* 是否点击非内容区域关闭提示,默认为true
*/
rootClose?: boolean;
/**
* 内容区域
*/
body?: SchemaCollection;
/**
* 内容区包裹标签
*/
wrapperComponent?: React.ElementType;
/**
* 内容区是否内联显示,默认为false
*/
inline?: boolean;
/**
* 主题样式, 默认为light
*/
tooltipTheme?: 'light' | 'dark';
/**
* 是否可以移入浮层中, 默认true
*/
enterable?: boolean;
/**
* 自定义提示浮层样式
* @deprecated 请使用`slots.style`
*/
tooltipStyle?: React.CSSProperties;
/**
* 文字提示浮层CSS类名
* @deprecated 请使用`slots.style`
*/
tooltipClassName?: string;
}
/**
* Panel组件。
*
*/
export interface PanelSchema extends BaseSchema {
/**
* 指定为Panel组件。
*/
type: 'panel';
/**
* panel 等级
*/
level?: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
/**
* 按钮集合
*/
actions?: Array<ActionSchema>;
/**
* 按钮集合外层类名
* @deprecated 请使用`slots.className`
*/
actionsClassName?: SchemaClassName;
/**
* 内容区域
*/
body?: SchemaCollection;
/**
* 配置 Body 容器 className
* @deprecated 请使用`slots.className`
*/
bodyClassName?: SchemaClassName;
bodyStyle?: CSSProperties;
/**
* 底部内容区域
*/
footer?: SchemaCollection;
/**
* 配置 footer 容器 className
* @deprecated 请使用`slots.className`
*/
footerClassName?: SchemaClassName;
/**
* 头部内容, 和 title 二选一。
*/
header?: SchemaCollection;
/**
* 配置 header 容器 className
* @deprecated 请使用`slots.className`
*/
headerClassName?: SchemaClassName;
/**
* Panel 标题
*/
title?: SchemaTpl;
/**
* @deprecated 请使用`slots.className`
*/
titleClassName?: SchemaClassName;
desc?: SchemaCollection;
/** @deprecated 请使用`slots.className` */
descClassName?: SchemaClassName;
/**
* 固定底部, 想要把按钮固定在底部的时候配置。
*/
affixFooter?: boolean | 'always';
/**
* 配置子表单项默认的展示方式。
*/
subFormMode?: 'normal' | 'inline' | 'horizontal';
/**
* 如果是水平排版,这个属性可以细化水平排版的左右宽度占比。
*/
subFormHorizontal?: FormHorizontal;
/**
* 是否可收缩, 默认是true
*/
collapsable?: boolean;
/**
* 控制collapsable的表达式
*/
collapsableOn?: boolean;
/**
* 初始的收缩和展开状态
*/
collapsed?: boolean;
/**
* 控制collapsed的表达式
*/
collapsedOn?: SchemaExpression;
}
/**
* IFrame 组件
*
*/
export interface IFrameSchema extends BaseSchema {
type: 'iframe';
/**
* 页面地址
*/
src: SchemaUrlPath;
/**
* 事件相应,配置后当 iframe 通过 postMessage 发送事件时,可以触发 AMIS 内部的动作。
*/
events?: {
[eventName: string]: ActionSchema;
};
width?: number | string;
height?: number | string;
allow?: string;
name?: string;
referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
sandbox?: string;
}
export interface TooltipWrapperRendererProps extends RendererProps, Omit<TooltipWrapperSchema, 'wrapperComponent' | 'className'> {
tooltip?: string;
/**
* 文字提示位置
*/
placement: 'top' | 'right' | 'bottom' | 'left';
inline?: boolean;
trigger: Trigger | Array<Trigger>;
rootClose?: boolean;
showArrow?: boolean;
offset?: [number, number];
disabled?: boolean;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
container?: React.ReactNode;
wrapperComponent?: string;
tooltipTheme?: 'light' | 'dark';
}
/**
* @deprecated 请使用`slots`
*/
export interface WithPrefixAffixHook {
/** @deprecated 请使用`slots` */
affixRegion?: SchemaCollection;
/** @deprecated 请使用`slots` */
prefixRegion?: SchemaCollection;
}