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>
292 lines (291 loc) • 9.11 kB
TypeScript
import * as React from "react";
import PropTypes from "prop-types";
import OptGroup from "./OptGroup";
import Option from "./Option";
import { IconNames } from "../icon";
import { Placement } from "../pop-trigger";
import "./style";
export interface ISelect {
forcePopupAlign?: () => void;
getRootDomNode?: () => HTMLElement;
onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
setInputValue?: (value?: string) => void;
getPopupDOMNode: () => HTMLElement;
}
type ValueType = React.ReactText;
export interface ISelectProps<T extends ValueType = ValueType> {
[key: string]: any;
/**
* 是否提供清除功能
*/
allowClear?: boolean;
/**
* 下拉框底部显示的自定义元素
*/
bottomContent?: React.ReactNode;
/**
* 子节点
*/
children?: React.ReactNode;
/**
* 附加类名
*/
className?: string;
/**
* 内部驱动:是否展开
*/
defaultOpen?: boolean | null;
/**
* 内部驱动:当前选中项的值
*/
defaultValue?: T | null;
/**
* 下拉列表是否和选择器同宽
*/
dropdownMatchSelectWidth?: boolean;
/**
* 指定弹出层的父级,默认为 document.body
*/
getPopupContainer?: null | ((node: HTMLElement) => HTMLElement);
/**
* 下拉列表显示变化时的 handler,参数:bool
*/
onDropdownVisibleChange?: (open: boolean) => void;
/**
* 下拉列表滚动时的 handler, 参数:e
*/
onPopupScroll?: (e: React.MouseEvent<HTMLDivElement>) => void;
/**
* 搜索时的 handler, 参数:string
*/
onSearch?: (val: string) => void;
/**
* 搜索 CompositionStart 的 handler, 参数:string
*/
onSearchCompositionStart?: (val: string) => void;
/**
* 搜索 CompositionUpdate 的 handler, 参数:string
*/
onSearchCompositionUpdate?: (val: string) => void;
/**
* 搜索 CompositionEnd 的 handler, 参数:string
*/
onSearchCompositionEnd?: (val: string) => void;
/**
* 更多自定义 search input 的 Prop
*/
searchInputProps?: {
[key: string]: any;
};
/**
* 选择时的 handler,参数:(value, option)
*/
onSelect?: (value: T, option: React.ReactElement<any>) => void;
/**
* 外部控制:是否展开
*/
open?: null | boolean;
/**
* 可直接传入 options,替代手动构造 children jsx 的方式,需传入每项的 label 和 value
*/
options?: {
[key: string]: any;
className?: string;
disabled?: boolean;
label: React.ReactNode;
value: T;
}[];
/**
* 选择框默认文字
*/
placeholder?: React.ReactNode;
/**
* 选择框默认文字的颜色
*/
placeholderColor?: string;
/**
* 设置 placement
*/
placement?: Placement;
/**
* 设置右图标
*/
rightIcon?: IconNames;
/**
* 搜索框默认文字
*/
searchable?: boolean;
/**
* 是否需要内嵌搜索
*/
searchPlaceholder?: string;
/**
* 设置尺寸,跟着 button 走
*/
size?: "mini" | "small" | "medium" | "large";
/**
* 设置主题
*/
theme?: null | "light";
/**
* 下拉框顶部显示的自定义元素
*/
topContent?: React.ReactNode;
/**
* 外部控制:当前选中项的值
*/
value?: T | null;
}
export interface ISelectState<T extends ValueType = ValueType> {
open?: boolean;
placeholderShow?: boolean;
placeholderText?: string;
value?: T | null;
selectId?: string;
}
/**
* 选择器用于选择某项内容。
* 选择器对比单选 Radio 的优势是,当选项过多时,选择器可对内容收起,并更关注于已选项。
* 通常,当用户能够通过已选项,轻易得知其余选项的规律时(如年份、城市等),选择器 Select 是比较好的选择。
*/
declare class Select<T extends ValueType = ValueType> extends React.Component<ISelectProps<T>, ISelectState<T>> {
static type: string;
static Option: typeof Option;
static OptGroup: typeof OptGroup;
static propTypes: {
/**
* 是否提供清除功能
*/
allowClear: PropTypes.Requireable<boolean>;
/**
* 下拉框底部显示的自定义元素
*/
bottomContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* 子节点
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* 附加类名
*/
className: PropTypes.Requireable<string>;
/**
* 内部驱动:是否展开
*/
defaultOpen: PropTypes.Requireable<boolean>;
/**
* 内部驱动:当前选中项的值
*/
defaultValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
/**
* 下拉列表是否和选择器同宽
*/
dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
/**
* 指定弹出层的父级,默认为 document.body
*/
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 下拉列表显示变化时的 handler,参数:bool
*/
onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 下拉列表滚动时的 handler, 参数:e
*/
onPopupScroll: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索时的 handler, 参数:string
*/
onSearch: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索 CompositionStart 的 handler, 参数:string
*/
onSearchCompositionStart: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索 CompositionUpdate 的 handler, 参数:string
*/
onSearchCompositionUpdate: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 搜索 CompositionEnd 的 handler, 参数:string
*/
onSearchCompositionEnd: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 更多自定义 search input 的 Prop
*/
searchInputProps: PropTypes.Requireable<any>;
/**
* 选择时的 handler,参数:(value, option)
*/
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
/**
* 外部控制:是否展开
*/
open: PropTypes.Requireable<boolean>;
/**
* 可直接传入 options,替代手动构造 children jsx 的方式,需传入每项的 label 和 value
*/
options: PropTypes.Requireable<any[]>;
/**
* 选择框默认文字
*/
placeholder: PropTypes.Requireable<any>;
/**
* 选择框默认文字的颜色
*/
placeholderColor: PropTypes.Requireable<string>;
/**
* 设置 placement
*/
placement: PropTypes.Requireable<string>;
/**
* 设置右图标
*/
rightIcon: PropTypes.Requireable<any>;
/**
* 搜索框默认文字
*/
searchPlaceholder: PropTypes.Requireable<string>;
/**
* 是否需要内嵌搜索
*/
searchable: PropTypes.Requireable<boolean>;
/**
* 设置尺寸,跟着 button 走
*/
size: PropTypes.Requireable<string>;
/**
* 设置主题
*/
theme: PropTypes.Requireable<string | null>;
/**
* 下拉框顶部显示的自定义元素
*/
topContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* 外部控制:当前选中项的值
*/
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
};
static defaultProps: ISelectProps;
static getDerivedStateFromProps: ({ open, value }: ISelectProps) => ISelectState<React.ReactText> | null;
hash: string;
locked: boolean;
select: ISelect;
search: HTMLInputElement;
menu: JSX.Element;
constructor(props: ISelectProps<T>);
saveSelect: (node: ISelect) => void;
saveSearch: (node: HTMLInputElement) => void;
onDropdownVisibleChange: (open: boolean) => void;
onSelect: (value: T, option: any) => void;
handleDropdownRender: (menu: JSX.Element) => JSX.Element;
handleSearchStart: React.CompositionEventHandler<HTMLInputElement>;
handleSearchUpdate: React.CompositionEventHandler<HTMLInputElement>;
handleSearchEnd: React.CompositionEventHandler<HTMLInputElement>;
handleSearch: (e?: React.ChangeEvent<HTMLInputElement>) => void;
handleSearchKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
preventVisibleChange: () => void;
render(): JSX.Element;
}
export default Select;