jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
153 lines (152 loc) • 3.75 kB
TypeScript
import type { ClassValue, PickClassStyleType, ReactPropsBase, SchemaBoolean, SchemaClassName, SchemaNode } from 'jamis-core';
import type { CSSProperties, PropsWithChildren } from 'react';
import type { BaseSchema, SchemaCollection, SchemaObject, SchemaTpl } from '../types';
export interface CollapseGroupProps extends PropsWithChildren, PickClassStyleType {
defaultActiveKey?: Array<string | number | never> | string | number;
accordion?: boolean;
expandIcon?: SchemaNode;
body?: Array<React.ReactElement>;
className?: SchemaClassName;
style?: CSSProperties;
/**
* 设置图标位置
*/
expandIconPosition?: 'left' | 'right';
}
export interface BasicCollapseProps extends PropsWithChildren, ReactPropsBase, Pick<CollapseSchema, 'mountOnEnter' | 'unmountOnExit' | 'headerPosition' | 'headerClassName' | 'bodyClassName' | 'collapsable' | 'disabled' | 'expandIconPosition' | 'size' | 'contentClassName' | 'collapsed'>, PickClassStyleType {
id?: string;
key?: string;
collapseId?: string;
propKey?: string;
header?: React.ReactNode;
showArrow?: boolean;
expandIcon?: React.ReactElement | null;
collapseHeader?: React.ReactElement | null;
wrapperComponent?: any;
headingComponent?: any;
propsUpdate?: boolean;
body?: any;
headingClassName?: ClassValue;
onCollapse?: (item: any, collapsed: boolean) => void;
}
/**
* Collapse 折叠组件，格式说明。
*
*/
export interface CollapseSchema extends Omit<BaseSchema, 'key'> {
/**
* 指定为折叠器类型
*/
type: 'collapse';
/**
* 标识
*/
key?: string;
/**
* 标题, 等价于 header
*/
title?: string | SchemaCollection;
/**
* 标题
*/
header?: string | SchemaCollection;
/**
* 标题 CSS 类名
*/
headerClassName?: SchemaClassName;
/**
* 标题展示位置
*/
headerPosition?: 'top' | 'bottom';
/**
* 内容区域
*/
body: SchemaCollection;
/**
* 配置 Body 容器 className
*/
bodyClassName?: SchemaClassName;
/**
* 元素`.cxd-Collapse-content`的样式类
*/
contentClassName?: SchemaClassName;
/**
* 是否禁用
*/
disabled?: boolean;
disabledOn?: SchemaBoolean;
/**
* 是否可折叠
*/
collapsable?: boolean;
/**
* 默认是否折叠
*/
collapsed?: boolean;
/**
* 图标是否展示
*/
showArrow?: boolean;
/**
* 自定义切换图标
*/
expandIcon?: SchemaObject;
/**
* 设置图标位置
*/
expandIconPosition?: 'left' | 'right';
/**
* 收起的标题
*/
collapseHeader?: SchemaTpl;
/**
* 控件大小
*/
size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
/**
* 点开时才加载内容
*/
mountOnEnter?: boolean;
/**
* 卡片隐藏就销毁内容
*/
unmountOnExit?: boolean;
}
/**
* CollapseGroup 折叠组件，格式说明。
*
*/
export interface CollapseGroupSchema extends BaseSchema {
/**
* 指定为折叠器类型
*/
type: 'collapse-group';
/**
* 激活面板
*/
activeKey?: Array<string | number | never> | string | number;
/**
* 手风琴模式
*/
accordion?: boolean;
/**
* 自定义切换图标
*/
expandIcon?: SchemaObject;
/**
* 设置图标位置
*/
expandIconPosition?: 'left' | 'right';
/**
* 内容区域
*/
body?: SchemaCollection;
/**
* 每项的通用样式类
*/
itemClassName?: SchemaClassName;
/**
* 每项的头部通用样式类
*/
headerClassName?: SchemaClassName;
}