adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
233 lines (232 loc) • 8.1 kB
TypeScript
import * as React from "react";
import RcTreeSelect, { TreeNode } from "rc-tree-select";
import PropTypes from "prop-types";
import { IPopoverProps } from "../popover";
import "./style";
export type TreeNodeValue = React.ReactText[] | null;
export interface ITreeNode {
value: string;
label: string;
key: string;
disabled: boolean;
}
export interface DataNode {
[key: string]: any;
value?: React.ReactText;
title?: React.ReactNode;
label?: React.ReactNode;
key?: React.ReactText;
disabled?: boolean;
disableCheckbox?: boolean;
checkable?: boolean;
popover?: React.ReactNode;
popoverProps?: IPopoverProps;
children?: DataNode[];
}
export interface BaseOptionType {
disabled?: boolean;
checkable?: boolean;
disableCheckbox?: boolean;
children?: BaseOptionType[];
[name: string]: any;
}
export interface DefaultOptionType extends BaseOptionType {
value?: React.ReactText;
title?: React.ReactNode;
label?: React.ReactNode;
key?: React.Key;
children?: DefaultOptionType[];
}
export type TreeData = DataNode[] | undefined;
export interface ITreeSelectProps {
[key: string]: any;
autoClearSearchValue?: boolean;
bottomContent?: React.ReactNode;
className?: string;
defaultValue?: TreeNodeValue;
disabled?: boolean;
filterTreeNode?: boolean | ((inputValue: string, treeNode: DefaultOptionType) => boolean);
filterCaseSensitive?: boolean;
getPopupContainer?: null | ((node: HTMLElement) => HTMLElement);
intent?: "normal" | "primary" | "success" | "warning" | "danger";
maxTagCount?: null | number;
multiple?: boolean;
onChange?: (value: TreeNodeValue, titleList: React.ReactNode[]) => void;
onDropdownVisibleChange?: (visible: boolean) => void;
onSearchEnter?: (e: KeyboardEvent) => void;
onSearch?: (value: string, nodes: DataNode[]) => void;
resultRender?: null | ((values: ITreeNode[]) => JSX.Element);
resultVisible?: boolean;
sameValueEnabled?: boolean;
selectAll?: boolean;
showCheckedStrategy?: "show-all" | "show-child" | "show-parent";
topContent?: React.ReactNode;
treeData?: TreeData;
value?: TreeNodeValue;
}
export interface ITreeSelectState {
hash: string;
bottomContentPortalTarget?: HTMLDivElement;
topContentPortalTarget?: HTMLDivElement;
value?: TreeNodeValue;
}
export interface ITreeNodeProps {
[key: string]: any;
className?: string;
checkable?: boolean;
disabled?: boolean;
disableCheckbox?: boolean;
title?: string | React.ReactNode;
key?: string;
eventKey?: string;
isLeaf?: boolean;
checked?: boolean;
expanded?: boolean;
loading?: boolean;
selected?: boolean;
selectable?: boolean;
children?: React.ReactNode;
}
/**
* 树形选择
*/
declare class TreeSelect extends React.Component<ITreeSelectProps, ITreeSelectState> {
static propTypes: {
/**
* 值被选择后,是否需要清空搜索框
*/
autoClearSearchValue: PropTypes.Requireable<boolean>;
/**
* 下拉框底部显示的自定义元素
*/
bottomContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* 附加类名
*/
className: PropTypes.Requireable<string>;
/**
* 默认选中的 key
*/
defaultValue: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
/**
* 是否禁用
*/
disabled: PropTypes.Requireable<boolean>;
/**
* 自定义树节点过滤函数
*/
filterTreeNode: PropTypes.Requireable<any>;
/**
* 是否开启大小写敏感搜索,默认为 false
*/
filterCaseSensitive: PropTypes.Requireable<boolean>;
/**
* 指定弹出层的父级,默认为 document.body
*/
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 类型
*/
intent: PropTypes.Requireable<string>;
/**
* 最多显示多少个 tag,如果超过了则以收起的形式出现
*/
maxTagCount: PropTypes.Requireable<number>;
/**
* 是否多选模式
*/
multiple: PropTypes.Requireable<boolean>;
/**
* 值变化时的回调,参数: value
*/
onChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 下拉 visible 变化时的回调,参数: boolean
*/
onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索时的回调,参数: value
*/
onSearch: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索回车时的回调,参数: e
*/
onSearchEnter: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 设置输入框的默认内容
*/
placeholder: PropTypes.Requireable<string>;
/**
* 设置自定义的结果渲染
*/
resultRender: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 输入框内的标签是否显示,此 Prop 用于想要将结果区展示在别的地方的需求
*/
resultVisible: PropTypes.Requireable<boolean>;
/**
* 定制树形选择器的icon
*/
rightIcon: PropTypes.Requireable<string>;
/**
* 是否允许相同值,使用情况:如同一个人可能存在于两个组织架构中,如果使用此 Prop,请同时使用 resultVisible={false}
*/
sameValueEnabled: PropTypes.Requireable<boolean>;
/**
* 是否开启全选功能
*/
selectAll: PropTypes.Requireable<boolean>;
/**
* 定义选中项回填的方式:
* 1. show-all:显示包括父节点的所有选中节点;
* 2. show-parent:只显示父节点;
* 3. show-child:只显示子节点。默认值:show-parent
*/
showCheckedStrategy: PropTypes.Requireable<string>;
/**
* 下拉框顶部显示的自定义元素
*/
topContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* treeNodes 数据,格式参照 interface DataNode
*/
treeData: PropTypes.Requireable<any[]>;
/**
* 外部控制:选中的 key
*/
value: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
};
static defaultProps: ITreeSelectProps;
static getDerivedStateFromProps: ({ value }: ITreeSelectProps) => {
value: React.ReactText[] | undefined;
} | null;
static TreeNode: typeof TreeNode;
select: typeof RcTreeSelect;
portal: React.ReactNode;
wrapper: HTMLDivElement;
treeData: DataNode[];
treeValueAll: any[];
treeValueFlatten: any[];
constructor(props: ITreeSelectProps);
shouldComponentUpdate: (nextProps: ITreeSelectProps, nextState: ITreeSelectState) => boolean;
saveSelect: (node: React.ReactNode) => void;
saveWrapper: (node: HTMLDivElement) => void;
renderSwitcherIcon: ({ isLeaf, loading }: ITreeNodeProps) => React.JSX.Element | null;
handleVisibleChange: (visible: boolean) => void;
handleChange: (value: TreeNodeValue, titleList: React.ReactNode[]) => void;
getFilteredTreeData: (searchValue: string) => DataNode[];
handleSearch: (val: string) => void;
filterTreeNode: (input: string, treeNode: any) => boolean;
getMaxTagCount: () => 0 | null;
handleSelectAll: () => void;
getMaxTagPlaceholder: (nodes: ITreeNode[]) => React.JSX.Element | null;
convertChildrenToData: (nodes: any) => DataNode[];
convertTreeData: (dataNodeParam: TreeData, options?: {
selectAll?: boolean;
}) => TreeData;
listenInputChange: (e: any) => void;
componentDidMount: () => void;
componentDidUpdate: () => void;
render(): React.JSX.Element;
}
export default TreeSelect;