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

UCloud react components

/**
 * TODO 需求时间比较紧、大部分时间用作兼容和考虑交互各种遗漏，代码未整合，有时间可以将 selector、popup 中的代码进行抽离
 */
import React, { CSSProperties, ReactNode } from 'react';
import { Size } from '../../type';
import { Key } from '../../hooks/group';
import LOCALE from './locale/zh_CN';
export declare const deprecatedLogForPopover: () => void;
declare type PopoverProps = any;
export interface SelectProps {
    /** 当前值，controlled */
    value?: Key | Key[];
    /** 默认值，uncontrolled */
    defaultValue?: Key | Key[];
    /** 无选项时显示内容 */
    placeholder?: ReactNode;
    /** 修改、清空时的回调，清空时回调值单选为 undefined、du px aun */
    onChange?: (value: Key | Key[] | undefined) => void;
    /** 快速设置选项，推荐使用以获得更好的性能 */
    options?: {
        /** 选项展示 */
        label?: ReactNode;
        /** 选项 value，不可重复 */
        value: Key;
    }[];
    /** 在尾部增加附加内容，会脱离选项流容器，超高度时不会一起滚动，如需在选项中嵌入附加内容，可使用 Select.Extra */
    extra?: {
        content: ReactNode;
    } | ReactNode | ((hidePopup: () => void) => ReactNode);
    /** 是否多选 */
    multiple?: boolean;
    /** 是否显示全选 */
    showSelectAll?: boolean;
    /** 是否禁用 */
    disabled?: boolean;
    /** 样式风格 */
    styleType?: 'list';
    /**
     * 如何渲染选中项的展示
     * @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;
    /** 状态 */
    status?: 'default' | 'error' | string;
    /** 展示变更为块占位 */
    block?: boolean;
    /** 是否可清空，仅单选可用 */
    clearable?: boolean;
    /**
     * 弹出层的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;
    };
    /**
    * 自定义styleType 'list'时Tag的样式
    */
    tagListCustomStyle?: CSSProperties;
    /**
     * 可选性为空时展示内容
     */
    emptyContent?: ReactNode;
    /**
     * 启用虚拟列表，仅使用 options 时生效
     */
    virtualList?: boolean | {
        simple?: true;
        height?: number;
    };
}
declare const _default: React.MemoExoticComponent<({ size, status: _status, value: _value, defaultValue, onChange: _onChange, onVisibleChange, disabled, search, multiple, renderContent, renderSelector, placeholder, locale: _locale, options, children, emptyContent, showSelectAll, extra, clearable, customStyle, popover, popoverProps, renderPopup, virtualList, block, styleType, tagListCustomStyle, ...htmlProps }: SelectProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof SelectProps>) => JSX.Element>;
export default _default;