jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
210 lines (209 loc) • 6.99 kB
TypeScript
import type { Api, RendererEvent, SchemaClassName, SchemaExpression } from 'jamis-core';
import type { CSSProperties } from 'react';
import type { AssociatedSelectionProps, ChainedSelectionProps, FormOptionsSchema, IFormItemStore, IFormStore, Option, OptionsControlProps, SchemaApi, SchemaObject, SchemaTpl, SizeUnit, TableSelectionProps, TooltipObject, TransferSelectMode, TreeCompProps } from '../types';
import type { BaseSelectionProps } from './components/types';
export type ISelectEvent = 'change' | 'blur' | 'focus' | 'addstart' | 'add' | 'editstart' | 'edit' | 'deletestart' | 'delete' | 'close';
/**
* Select 下拉选择框。
*
*/
export interface SelectControlSchema extends Omit<FormOptionsSchema, 'size'> {
type: 'select' | 'multi-select';
/**
* 自动完成 API，当输入部分文字的时候，会将这些文字通过 ${term} 可以取到，发送给接口。
* 接口可以返回匹配到的选项，帮助用户输入。
*/
autoComplete?: Api;
/**
* 是否初始发起一次autoComplete请求, 如果在autoComplete的api中开启了sendOn, 则会在sendOn校验通过时才发起
*/
autoCompleteLoadOnce?: boolean;
autoCompleteLoadOnceOn?: SchemaExpression;
/**
* 初始发起请求的模式, 默认是mounted后就发起, 可以设置聚焦时才发起
*/
autoCompleteLoadOnceMode?: 'mounted' | 'focus';
/**
* 可以自定义菜单展示。
*/
menuTpl?: SchemaTpl | SchemaObject;
/**
* 自定义选中值展示方式。
*/
valueTpl?: SchemaObject;
/**
* 当在value值未匹配到当前options中的选项时，是否value值对应文本飘红显示
*/
showInvalidMatch?: boolean;
/**
* 边框模式，全边框或者没边框。
*/
borderMode?: 'full' | 'half' | 'none';
/**
* 勾选展示模式
*/
selectMode?: TransferSelectMode;
groupConfig?: Partial<BaseSelectionProps>;
listConfig?: Partial<BaseSelectionProps>;
/**
* 当selectMode=tree时可配置项
*/
treeConfig?: Omit<TreeCompProps, 'type'>;
/**
* 当selectMode=table时可配置项
*/
tableConfig?: Partial<TableSelectionProps>;
/**
* 当selectMode=associated时可配置项
*/
associatedConfig?: Partial<AssociatedSelectionProps>;
chainedConfig?: Partial<ChainedSelectionProps>;
/**
* 当 selectMode 为 associated 时用来定义左侧的选项
* @deprecated 请使用`associatedConfig.leftOptions`替代
*/
leftOptions?: Array<Option>;
/**
* 当 selectMode 为 associated 时用来定义左侧的选择模式
* @deprecated 请使用`associatedConfig.leftMode`替代
*/
leftMode?: 'tree' | 'list';
/**
* 当 selectMode 为 associated 时, 用来定义右侧的选择模式, 右侧数据通过`ref`来关联左侧的value
* @deprecated 请使用`associatedConfig.rightMode`替代
*/
rightMode?: 'table' | 'list' | 'tree' | 'chained';
/**
* 搜索结果展示模式
*/
searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
/**
* 当 selectMode 为 table 时定义表格列信息。
*/
columns?: Array<any>;
/**
* 当 searchResultMode 为 table 时定义表格列信息。
*/
searchResultColumns?: Array<any>;
/**
* 可搜索？
*/
searchable?: boolean;
/**
* 开启搜索后, 搜索的字段名集合
*/
searchFields?: string[];
/**
* 搜索框占位文本
*/
searchPromptText?: string;
/**
* 搜索 API
*/
searchApi?: SchemaApi;
/**
* 单个选项的高度，主要用于虚拟渲染
*/
itemHeight?: number;
/**
* 在选项数量达到多少时开启虚拟渲染
*/
virtualThreshold?: number;
/**
* @deprecated 使用`slots.className`替代
*/
virtualListStyle?: CSSProperties;
/** @deprecated 使用`slots.className`替代 */
virtualListClassName?: SchemaClassName;
virtualListWidth?: number;
virtualListHeight?: number;
/**
* 可多选条件下，是否可全选
*/
checkAll?: boolean;
/**
* 可多选条件下，是否默认全选中所有值
*/
defaultCheckAll?: boolean;
/**
* 可多选条件下，全选项文案，默认 ”全选“
*/
checkAllLabel?: string;
/**
* 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
*/
maxTagCount?: number;
/**
* 收纳标签的Popover配置
*/
overflowTagPopover?: object;
/**
* 选项的自定义CSS类名
* @deprecated 使用`slots.className`替代
*/
optionClassName?: SchemaClassName;
/**
* 可排序？
*/
sortable?: boolean;
/**
* 是否在选中值后自动清空搜索条件, 用于多选场景, 默认为true
*/
autoClearSearchValue?: boolean;
/** @deprecated 使用`slots.className`替代 */
valueWrapClassName?: SchemaClassName;
valueWrapStyle?: React.CSSProperties;
/**
* 元素`.cxd-Select-value`的样式类
* @deprecated 使用`slots.className`替代
*/
valueClassName?: SchemaClassName;
/**
* 元素`.cxd-Select-valueLabel`的样式类
* @deprecated 使用`slots.className`替代
*/
valueLabelClassName?: SchemaClassName;
/** @deprecated 使用`slots.className`替代 */
popoverClassName?: SchemaClassName;
/** 是否平铺开 */
tiled?: boolean;
/**
* 组件的顶部描述信息
*/
topDescInfo?: SchemaObject | SchemaTpl;
/** 是否支持自动识别多个值搜索 */
searchMultiValues?: boolean;
/** 多值搜索的符号 */
searchMultiValuesSymbol?: ',' | ';';
/**
* 是否允许通过键盘删除按钮来删除选中项
*/
isBackspaceDelete?: boolean;
/**
* 通过数据域来改变值时是否发出`change`事件, 默认是`false`
*/
emitChangeByScope?: boolean;
size?: SizeUnit | SchemaExpression;
/**
* 搜索延迟, 在大数据量或者接口很缓慢时可优化体验
*/
searchDelay?: number | boolean;
/**
* 元素`.cxd-Select-menu`的样式类
* @deprecated 使用`slots.className`替代
*/
menuClassName?: SchemaClassName;
/**
* 表单项value改变事件监听
* @deprecated 监控`onEvent.change`事件通知
*/
onChange?: (curr: any, prev: any, itemStore: IFormItemStore, formStore: IFormStore) => any;
}
export interface SelectProps extends OptionsControlProps, Omit<SelectControlSchema, 'className' | 'descriptionClassName' | 'inputClassName' | 'options' | 'onChange' | 'size'> {
defaultOpen?: boolean;
maxTagCount?: number;
overflowTagPopover?: TooltipObject;
labelField: string;
valueField: string;
dispatchEvent: (event: ISelectEvent, data?: any) => Promise<RendererEvent>;
}