jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
341 lines (340 loc) • 11.2 kB
TypeScript
import type { Api, Option, ReactPropsBase, SchemaBoolean, SchemaClassName, SchemaExpression, SchemaRenderFn } from 'jamis-core';
import type { CSSProperties } from 'react';
import type { ActionSchema, FormOptionsSchema, IFormItemStore, IFormStore, ItemRenderStates, OptionsControlProps, SchemaApi, SchemaObject, SchemaTpl } from '../types';
export interface BaseTreeOptionsSchema extends FormOptionsSchema {
/**
* 是否隐藏顶级
*/
hideRoot?: boolean;
/**
* 顶级选项的名称
*/
rootLabel?: string;
/**
* 顶级选项的值
*/
rootValue?: any;
/**
* 可选选项的名称, 用于新增或编辑选项的dialog的标题中
*/
optionLabel?: string;
/**
* 创建顶级节点的悬浮提示
* @deprecated 请使用`rootCreateConfig`来配置schema
*/
rootCreateTip?: string;
/**
* 顶级节点是否可以创建子节点
* @deprecated 请使用`rootCreateConfig`来配置schema
*/
rootCreatable?: boolean;
/**
* 新增根节点配置项
*/
rootCreateConfig?: ActionSchema;
/**
* 显示图标
*/
showIcon?: boolean;
/**
* 是否为选项添加默认的Icon,默认值为true
*/
enableDefaultIcon?: boolean;
/**
* ui级联关系,true代表级联选中,false代表不级联,默认为true
*/
autoCheckChildren?: boolean;
autoCheckParent?: boolean;
/**
* 该属性代表数据级联关系,autoCheckChildren为true时生效,默认为false,具体数据级联关系如下:
* 1.casacde为false,ui行为为级联选中子节点,子节点禁用;值只包含父节点的值
* 2.cascade为false,withChildren为true,ui行为为级联选中子节点,子节点禁用;值包含父子节点的值
* 3.cascade为true,ui行为级联选中子节点,子节点可反选,值包含父子节点的值,此时withChildren属性失效
* 4.cascade不论为true还是false,onlyChildren为true,ui行为级联选中子节点,子节点可反选,值只包含子节点的值
*/
cascade?: boolean;
/**
* 选父级的时候是否把子节点的值也包含在内。
*/
withChildren?: boolean;
/**
* 选父级的时候,是否只把子节点的值包含在内
*/
onlyChildren?: boolean;
/**
* 单选时,只运行选择叶子节点
*/
onlyLeaf?: boolean;
/**
* 是否开启节点路径模式
*/
enableNodePath?: boolean;
/**
* 开启节点路径模式后,节点路径的分隔符
*/
pathSeparator?: string;
/**
* 是否显示展开线
*/
showOutline?: boolean;
deferApi?: SchemaApi;
/**
* 需要高亮的字符串
*/
highlightTxt?: string;
/**
* 需要高亮的字符串的表达式
*/
highlightTxtExpr?: SchemaExpression;
/**
* 配置指定展开的层级数,从1开始计算, 默认展开第 1 层
*/
unfoldedLevel?: number;
/**
* 配置指定展开的层级数,从1开始计算, 默认展开第 1 层
*/
unfoldedLevelExpr?: SchemaExpression;
/** 是否默认都展开 */
initiallyOpen?: boolean;
sortable?: boolean;
sortableOn?: SchemaBoolean;
/** 是否可拖拽 */
draggable?: boolean;
draggableOn?: SchemaBoolean;
/**
* 标签字段名
*/
labelField?: string;
/**
* 值字段名
*/
valueField?: string;
/** 在多选情况下, 点击label时是否不选中, 默认是false*/
clickLabelNoCheck?: boolean;
/** 是否使用手风琴模式 */
accordion?: boolean;
/**
* 树项的样式
*/
itemClassName?: SchemaClassName;
placeholder?: SchemaTpl;
placeholderExpr?: SchemaTpl;
optionsPlaceholder?: SchemaTpl;
/**
* 多选时, 限制最多选择数量
*/
maxLength?: number;
/**
* 多选时, 限制最少选择数量
*/
minLength?: number;
/**
* 隐藏选择框中已选择节点的祖先节点(ancestor)
*/
hideNodePathLabel?: boolean;
/** 是否可搜索 */
searchable?: boolean;
/** 搜索字段 */
searchFields?: string[];
/**
* 是否精确搜索, 默认是`undefined`, 启用后, 只显示匹配的节点, 不会将匹配的父节点的子节点显示出来
*/
searchExact?: boolean;
/** 搜索框的placeholder */
searchPlaceholder?: SchemaTpl;
/**
* `.cxd-Tree-itemDesc`元素的样式类
*/
itemDescClassName?: SchemaClassName;
/** 开启虚拟列表的阈值, 默认是100 */
virtualThreshold?: number;
/** 启用虚拟列表时, 每项的高度, 默认是32px */
itemHeight?: number;
virtualListClassName?: SchemaClassName;
virtualListHeight?: number;
virtualListWidth?: number;
virtualListStyle?: CSSProperties;
/**
* 单选/多选时, 选中一项后是否清空搜索条件
*/
autoClearSearchValue?: boolean;
/**
* 通过数据域来改变值时是否发出`change`事件, 默认是`false`
*/
emitChangeByScope?: boolean;
/** 是否可以切换选中 */
selectTogglable?: boolean;
/**
* 组件的顶部描述信息
*/
topDescInfo?: SchemaObject | SchemaTpl;
}
/**
* Tree 下拉选择框。
*/
export interface TreeControlSchema extends BaseTreeOptionsSchema {
type: 'tree-select' | 'input-tree';
/** 自定义菜单项 */
menuTpl?: SchemaTpl;
/**
* 是否以popover形式打开, 默认是 true
*/
popOverMode?: boolean;
popoverClassName?: SchemaClassName;
/**
* 选中项的显示模式, 默认是 list 列表模式, 也就是一项项单独显示
*/
selectedOptionViewMode?: 'list' | 'tree';
/**
* 选中值容器样式类
*/
valueWrapClassName?: SchemaClassName;
/**
* 选中值单项的样式类
*/
valueClassName?: SchemaClassName;
/** 项的标签元素`.cxd-Tree-itemLabel`的样式类 */
itemLabelClassName?: SchemaClassName;
/**
* 表单项value改变事件监听
*/
onChange?: (curr: any, prev: any, itemStore: IFormItemStore, formStore: IFormStore) => any;
}
export interface TreeSelectProps extends OptionsControlProps, Omit<TreeControlSchema, 'type' | 'options' | 'className' | 'descriptionClassName' | 'inputClassName' | 'onChange'> {
autoComplete?: Api;
}
export interface IDropIndicator {
left: number;
top: number;
width: number;
height?: number;
}
export interface TreeDropInfo {
/** 拖动的节点 */
dragNode: Option | null;
/** 放置的节点 */
node: Option;
/** 拖动的三种情况, 上/下/里面 */
position: 'top' | 'bottom' | 'self';
indicator: IDropIndicator;
}
export interface TreeCompProps extends ReactPropsBase, Pick<TreeControlSchema, 'createConfig' | 'editConfig' | 'removeConfig'> {
highlightTxt?: string;
showIcon?: boolean;
initiallyOpen?: boolean;
unfoldedLevel?: number;
showRadio?: boolean;
multiple?: boolean;
disabled?: boolean;
withChildren?: boolean;
onlyChildren?: boolean;
onlyLeaf?: boolean;
labelField?: string;
valueField?: string;
iconField?: string;
unfoldedField?: string;
foldedField?: string;
showOutline?: boolean;
className?: string;
itemClassName?: SchemaClassName;
itemLabelClassName?: SchemaClassName;
/**
* `.cxd-Tree-itemDesc`元素的样式类
*/
itemDescClassName?: SchemaClassName;
joinValues?: boolean;
extractValue?: boolean;
delimiter?: string;
options: Option[];
value?: any;
/**
* 同步修改结果到父组件, 返回`true`代表同步成功, `false`代表同步失败
*/
onChange: (value: any, changedOption?: Option) => Promise<boolean> | boolean | void;
placeholder?: string;
hideRoot?: boolean;
rootLabel?: string;
rootValue?: any;
enableNodePath?: boolean;
pathSeparator?: string;
nodePath?: any[];
cascade?: boolean;
/**
* ui级联关系,true代表级联选中,false代表不级联,默认为true
*/
autoCheckChildren?: boolean;
/**
* UI父子节点级联关系, true 代表选中子时自动选中父, false 代表不选中, 默认是 true
*/
autoCheckParent?: boolean;
/**
* 在多选情况下, 点击label时是否不选中, 默认是false
*/
clickLabelNoCheck?: boolean;
/** 点击label时的回调事件 */
dispatchEvent?: (eventName: 'click' | 'sort-asc' | 'sort-desc', value: Record<string, any>) => Promise<boolean>;
selfDisabledAffectChildren?: boolean;
minLength?: number;
maxLength?: number;
bultinCUD?: boolean;
/** @deprecated 请使用 `rootCreateConfig` */
rootCreatable?: boolean;
/** @deprecated 请使用 `rootCreateConfig` */
rootCreateTip?: string;
rootCreateConfig?: ActionSchema;
/** @deprecated 请使用 `createConfig` */
creatable?: boolean;
/** @deprecated 请使用 `createConfig` */
createTip?: string;
/** 是否可排序 */
sortable?: boolean;
/** @deprecated 请使用 `editConfig` */
editable?: boolean;
/** @deprecated 请使用 `editConfig` */
editTip?: string;
/** @deprecated 请使用 `removeConfig` */
removable?: boolean;
/** @deprecated 请使用 `removeConfig` */
removeTip?: string;
draggable?: boolean;
/** 是否使用手风琴模式 */
accordion?: boolean;
/** 开启虚拟列表的阈值, 默认是100 */
virtualThreshold?: number;
/** 启用虚拟列表时, 每项的高度, 默认是32px */
itemHeight?: number;
virtualListClassName?: SchemaClassName;
virtualListHeight?: CSSProperties['height'];
virtualListWidth?: CSSProperties['width'];
virtualListStyle?: CSSProperties;
enableDefaultIcon?: boolean;
checkAll?: boolean;
checkAllLabel?: string;
/**
* 搜索字段
*/
searchFields?: string[];
/** 是否可切换选中 */
selectTogglable?: boolean;
/** menu里的头部描述信息 */
topDescInfo?: string | JSX.Element | null;
onAdd?: (idx?: number | Array<number>, value?: any, skipForm?: boolean) => void;
onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
onDelete?: (value: Option) => void;
onDeferLoad?: (option: Option) => void;
onExpandTree?: (nodePathArr: any[]) => void;
onMove?: (dropInfo: TreeDropInfo) => void;
onSort?: (parent: Option | undefined, index: number, mode: 'asc' | 'desc') => void;
itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
render?: SchemaRenderFn;
}
export type TreeCompRef = {
clickItem: (value: any) => boolean;
syncUnFolded: (props: Pick<TreeCompProps, 'unfoldedLevel' | 'labelField' | 'valueField' | 'options' | 'initiallyOpen'>,
/**
* 传入默认展开层级需要重新初始化unfolded
*/
unfoldedLevel?: number) => any;
flattenOptions: (options: Option[], initial?: boolean) => Promise<Option[]>;
toggleUnfolded: (node: Option) => void;
};