@sms-frontend/components
Version:
SMS Design React UI Library.
182 lines (181 loc) • 5.6 kB
TypeScript
import { ReactNode, CSSProperties } from 'react';
import { TreeDataType, NodeProps, TreeProps } from '../Tree/interface';
import { TriggerProps } from '../Trigger';
import { SelectViewCommonProps } from '../_class/select-view';
export declare type TreeSelectDataType = TreeDataType & {
value?: string;
};
export declare type LabelValue = {
label: ReactNode;
value: string;
disabled?: boolean;
};
/**
* @title TreeSelect
*/
export interface TreeSelectProps extends SelectViewCommonProps {
/**
* @zh 是否多选
* @en Whether to select multiple
*/
multiple?: boolean;
/**
* @zh 选择框的默认值
* @en The key of node selected by default
*/
defaultValue?: string | string[] | {
label: ReactNode;
value: string;
disabled?: boolean;
} | {
label: ReactNode;
value: string;
disabled?: boolean;
}[];
/**
* @zh 选中值
* @en The key of the selected node
*/
value?: string | string[] | {
label: ReactNode;
value: string;
disabled?: boolean;
} | {
label: ReactNode;
value: string;
disabled?: boolean;
}[];
/**
* @zh 指定 key，title，isLeaf，disabled，children 对应的字段
* @en Custom field name for key, title, isLeaf, disabled and children
* @defaultValue DefaultFieldNames
* @version 2.11.0
*/
fieldNames?: TreeProps['fieldNames'];
/**
* @zh 数据
* @en The data of tree
*/
treeData?: TreeSelectDataType[];
/**
* @zh 设置 value 格式。默认是 `string`，设置为 `true` 时候，value 格式为： `{ label: string, value: string }`
* @en Setting value format.The default is `string`, when set to `true`, the value format will turn to: `{ label: string, value: string }`
*/
labelInValue?: boolean;
/**
* @zh 是否在隐藏之后销毁 DOM 结构
* @en Whether to destroy the DOM after hiding
*/
unmountOnExit?: boolean;
/**
* @zh 是否展示复选框
* @en Whether to show checkbox
*/
treeCheckable?: boolean;
/**
* @zh 父子节点是否关联
* @en Whether the parent and child nodes are related
*/
treeCheckStrictly?: boolean;
/**
* @zh 定制回显方式
* @en Customize the return value
* @defaultValue all
*/
treeCheckedStrategy?: TreeProps['checkedStrategy'];
/**
* @zh 可以接受所有 [Tree](/react/components/tree) 组件的参数
* @en The props of the [Tree](/react/components/tree) component
*/
treeProps?: Partial<TreeProps>;
/**
* @zh 可以接受所有 Trigger 组件的参数
* @en The props of the `Trigger` component
*/
triggerProps?: Partial<TriggerProps>;
/**
* @zh 自定义上方显示元素
* @en Customize the trigger element
*/
triggerElement?: ReactNode;
/**
* @zh 是否显示边框
* @en Whether show border
* @defaultValue true
*/
bordered?: boolean;
/**
* @zh 没有数据时显示的内容
* @en The content display when no data
*/
notFoundContent?: ReactNode;
/**
* @zh 控制下拉框的展开收起
* @en Whether the popup is visible or not
*/
popupVisible?: boolean;
/**
* @zh 设置下拉框样式
* @en The additional css style for dropdown menu
* @version 2.3.0
*/
dropdownMenuStyle?: CSSProperties;
/**
* @zh 自定义下拉框展示
* @en Customize dropdown rendering
* @version 2.3.0
*/
dropdownRender?: (dom: ReactNode) => ReactNode;
/**
* @zh 选中值改变的回调
* @en Callback when the selection changed
*/
onChange?: (value: any) => void;
/**
* @zh 弹出框挂载的父节点
* @en The parent node of the popup
*/
getPopupContainer?: (node: HTMLElement) => Element;
/**
* @zh 下拉框收起展开时触发
* @en Callback when the visibility of the popup is changed
*/
onVisibleChange?: (visible: boolean) => void;
/**
* @zh
* 根据输入的值筛选数据。接收 `inputText` 和 `treeNode` 两个参数，当 `option` 符合筛选条件时，返回 `true`，反之返回 `false`。treeNode 是树节点。
* @en
* Filter data based on entered value. Accepted two parameters, inputText and treeNode.
* When the option matches the filter conditions, it returns true, otherwise it returns false. treeNode is the tree node.
*/
filterTreeNode?: (inputText: any, treeNode: any) => boolean | void;
/**
* @zh 动态加载数据
* @en Callback when loaded data asynchronously
*/
loadMore?: (treeNode: NodeProps, dataRef: any) => void;
/**
* @zh 自定义搜索方法。未定义的时候将会在已经在数据中进行搜索
* @en Callback when searching data. When undefined, it will search in the data already
*/
onSearch?: (inputValue: string) => void;
/**
* @zh 点击清除时触发，参数是当前下拉框的展开状态。
* @en Callback when clicked clear, the parameter is the visible state of current dropdown
*/
onClear?: (visible: boolean) => void;
}
export declare type RefTreeSelectType = {
focus: () => void;
blur: () => void;
};
export declare const DefaultFieldNames: {
key: string;
title: string;
children: string;
selectable: string;
disabled: string;
disableCheckbox: string;
checkable: string;
isLeaf: string;
};