UNPKG

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
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;