@ucloud-pccl/react-components/lib/components/Select/Select.d.ts

UCloud pccl react components

import React, { HTMLAttributes, ReactNode } from 'react';
import { Override, Size } from 'src/type';
import { Key } from 'src/hooks/group';
import LOCALE from './locale/zh_CN';
export declare const deprecatedLogForPopover: () => void;
type PopoverProps = any;
export interface SelectProps {
    /** 当前值，controlled */
    value?: Key;
    /** 默认值，uncontrolled */
    defaultValue?: Key;
    /** 无选项时显示内容 */
    placeholder?: ReactNode;
    /** 修改时的回调 */
    onChange?: (value: Key | Key[]) => void;
    /** 快速设置选项 */
    options?: {
        /** 选项展示 */
        label?: ReactNode;
        /** 选项 value，不可重复 */
        value: Key;
    }[];
    /** 在尾部增加附加内容，会脱离选项流容器，超高度时不会一起滚动，如需在选项中嵌入附加内容，可使用 Select.Extra */
    extra?: {
        content: ReactNode;
    } | ReactNode | ((hidePopup: () => void) => ReactNode);
    /** 是否多选 */
    multiple?: boolean;
    /** 是否显示全选 */
    showSelectAll?: boolean;
    /** 是否禁用 */
    disabled?: boolean;
    /**
     * 如何渲染选中项的展示
     * @param value - 当前 select 的值
     * @param valueChild - 当前值对应的展示内容（为性能考虑，只提供前 20 个选项，如果需要获取所有，请自行拿 value 获取）
     */
    renderContent?: (value?: Key | Key[], valueChild?: ReactNode[]) => ReactNode;
    /**
     * 自定义渲染选择器
     * @param {node} content - 渲染的内容
     * @param {bool} visible - 当前的select下拉是否展示
     */
    renderSelector?: (content: ReactNode, visible: boolean) => ReactNode;
    /**
     * 自定义渲染弹出内容
     * @param {Object} options - 配置
     * @param {function} options.handleVisible - 处理弹出层的显示隐藏
     * @param {function} options.onChange -  value 变化回调
     * @param options.value - select 的当前值
     */
    renderPopup?: (options: {
        handleVisible: (visible: boolean) => void;
        onChange: (v: Key | Key[]) => void;
        value?: Key | Key[];
        /** @ignore */
        children?: ReactNode;
    } & Pick<SelectProps, 'multiple' | 'extra' | 'search' | 'options'>) => ReactNode;
    /**
     * - 是否展示搜索框，可以为 true 或者 Object
     * - 为 Object 时可传入 handleSearch 对搜索筛选进行自定义
     */
    search?: true | {
        /**
         * 自定义搜索
         * @argument searchValue - 搜索的值
         * @argument value - option的值
         */
        handleSearch?: (searchValue: string, value: Key, s: any) => boolean;
        /** 搜索值 受控 */
        searchValue?: string;
        /** 默认搜索值 非受控 */
        defaultSearchValue?: string;
        /** 搜索值变化回调 */
        onSearchValueChange?: (searchValue: string) => void;
    };
    /** 尺寸 */
    size?: Size;
    /**
     * 弹出层的popover props
     * @deprecated 请使用popoverProps替换
     */
    popover?: PopoverProps;
    /** 弹出层的popover props */
    popoverProps?: PopoverProps;
    /**
     * @deprecated 请勿使用
     * @ignore
     */
    onVisibleChange?: (visible?: boolean) => void;
    /** @ignore */
    locale?: typeof LOCALE;
    /**
     * 自定义样式
     */
    customStyle?: {
        /** 列表最大高度 */
        optionListMaxHeight?: number | string;
        /** 弹出菜单的最大宽度  */
        popupMaxWidth?: string;
        /** 弹出菜单的宽度 */
        popupWidth?: string;
    };
    /**
     * 可选性为空时展示内容
     */
    emptyContent?: ReactNode;
    /**
     * 启用虚拟列表，仅使用 options 时生效
     */
    virtualList?: boolean | {
        simple?: true;
        height?: number;
    };
    width?: number;
    /**
     * 支持清除功能
     */
    clearable?: boolean;
    /**
     * 清除icon一直展示，不是hover才显示
     */
    clearIconShow?: boolean;
    /** 自定义创建和搜索等其他内容 */
    extraChildren?: ReactNode;
}
declare const Select: ({ size, value: _value, defaultValue, onChange: _onChange, onVisibleChange, disabled, search, multiple, renderContent, renderSelector, placeholder, locale: _locale, options, children, emptyContent, showSelectAll, extra, customStyle, popover, popoverProps, renderPopup, virtualList, clearable, clearIconShow, extraChildren, ...rest }: SelectProps & Override<HTMLAttributes<HTMLDivElement>, SelectProps>) => React.JSX.Element;
export default Select;