@alifd/next/types/select/index.d.ts

/// <reference types="react" />

import * as React from 'react';
import CommonProps from '../util';
import { PopupProps } from '../overlay';
import { MenuProps } from '../menu';
import { InputProps } from '../input';
import { data } from '../checkbox';

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement>, InputProps {
    defaultValue?: any;
    onChange?: any;
    onBlur?: any,
    onFocus?: any,
    onKeyDown?: any,
}

type item = {
    value?: string | number;
    label?: React.ReactNode;
    [propName: string]: any;
}

export interface AutoCompleteProps extends HTMLAttributesWeak, CommonProps {
    /**
     * 选择器尺寸
     */
    size?: 'small' | 'medium' | 'large';

    /**
     * 当前值，用于受控模式
     */
    value?: string | number;

    /**
     * 初始化的默认值
     */
    defaultValue?: string | number;

    /**
     * 没有值的时候的占位符
     */
    placeholder?: string;

    /**
     * 下拉菜单是否与选择器对齐
     */
    autoWidth?: boolean;

    /**
     * 自定义内联 label
     */
    label?: React.ReactNode;

    /**
     * 是否有清除按钮（单选模式有效）
     */
    hasClear?: boolean;

    /**
     * 校验状态
     */
    state?: 'error' | 'loading';

    /**
     * 是否只读，只读模式下可以展开弹层但不能选
     */
    readOnly?: boolean;

    /**
     * 是否禁用选择器
     */
    disabled?: boolean;

    /**
     * 当前弹层是否显示
     */
    visible?: boolean;

    /**
     * 弹层初始化是否显示
     */
    defaultVisible?: boolean;

    /**
     * 弹层显示或隐藏时触发的回调
     */
    onVisibleChange?: (visible: boolean, type: string) => void;

    /**
     * 弹层挂载的容器节点
     */
    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);

    /**
     * 弹层的 className
     */
    popupClassName?: string;

    /**
     * 弹层的内联样式
     */
    popupStyle?: React.CSSProperties;

    /**
     * 添加到弹层上的属性
     */
    popupProps?: PopupProps;

    /**
     * 自定义弹层的内容
     */
    popupContent?: React.ReactNode;

    /**
     * 是否跟随滚动
    */
    followTrigger?: boolean;

    /**
     * 是否使用本地过滤，在数据源为远程的时候需要关闭此项
     */
    filterLocal?: boolean;

    /**
     * 本地过滤方法，返回一个 Boolean 值确定是否保留
     */
    filter?: (key:string, item: any) => boolean;

    /**
     * 键盘上下键切换菜单高亮选项的回调
     */
    onToggleHighlightItem?: () => void;

    /**
     * 是否开启虚拟滚动模式
     */
    useVirtual?: boolean;

    /**
     * 传入的数据源，可以动态渲染子项
     */
    dataSource?: Array<any>;

    /**
     * 渲染 MenuItem 内容的方法
     */
    itemRender?: (item: item) => React.ReactNode;

    /**
     * Select发生改变时触发的回调
     */
    onChange?: (value: any, actionType: string, item: any) => void;

    /**
     * 填充到选择框里的值的 key，默认是 value
     */
    fillProps?: string;

    /**
     * 自动高亮第一个选项
     */
    autoHighlightFirstItem?: boolean;

    /**
     * 高亮key
     */
    highlightKey?: string;

    /**
     *  默认高亮key
     */
    defaultHighlightKey?: string;
}

export class AutoComplete extends React.Component<AutoCompleteProps, any> {}

export interface OptionGroupProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
    /**
     * 设置分组的文案
     */
    label?: React.ReactNode;
}

export class OptionGroup extends React.Component<OptionGroupProps, any> {}

export interface OptionProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
    /**
     * 选项值
     */
    value: any;

    /**
     * 是否禁用
     */
    disabled?: boolean;
}

export class Option extends React.Component<OptionProps, any> {}
interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
    defaultValue?: any;
    onChange?: any;
}

export interface SelectProps extends Omit<HTMLAttributesWeak, 'renderPreview'>, CommonProps {
    /**
     * 选择器尺寸
     */
    size?: 'small' | 'medium' | 'large';

    /**
     * name
     */
    name?: string;

    /**
     * 当前值，用于受控模式
     */
    value?: any;

    /**
     * 初始的默认值
     */
    defaultValue?: any;

    /**
     * 没有值的时候的占位符
     */
    placeholder?: string;

    /**
     * 下拉菜单是否与选择器对齐
     */
    autoWidth?: boolean;

    /**
     * 自定义内联 label
     */
    label?: React.ReactNode;

    /**
     * 是否有清除按钮（单选模式有效）
     */
    hasClear?: boolean;

    /**
     * 校验状态
     */
    state?: 'error' | 'loading';

    /**
     * 是否只读，只读模式下可以展开弹层但不能选
     */
    readOnly?: boolean;

    /**
     * 是否禁用选择器
     */
    disabled?: boolean;

    /**
     * 当前弹层是否显示
     */
    visible?: boolean;

    /**
     * 弹层初始化是否显示
     */
    defaultVisible?: boolean;

    /**
     * 弹层显示或隐藏时触发的回调
     */
    onVisibleChange?: (visible: boolean) => void;

    /**
     * 弹层挂载的容器节点
     */
    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);

    /**
     * 弹层的 className
     */
    popupClassName?: string;

    /**
     * 弹层的内联样式
     */
    popupStyle?: React.CSSProperties;

    /**
     * 添加到弹层上的属性
     */
    popupProps?: PopupProps;

    /**
     * 是否跟随滚动
    */
    followTrigger?: boolean;

    /**
     * 自定义弹层的内容
     */
    popupContent?: React.ReactNode;
    menuProps?: MenuProps;

    /**
     * 是否使用本地过滤，在数据源为远程的时候需要关闭此项
     */
    filterLocal?: boolean;

    /**
     * 本地过滤方法，返回一个 Boolean 值确定是否保留
     */
    filter?: (key:string, item: any) => boolean;

    /**
     * 键盘上下键切换菜单高亮选项的回调
     */
    onToggleHighlightItem?: () => void;

    /**
     * 是否开启虚拟滚动模式
     */
    useVirtual?: boolean;

    /**
     * 传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)
     */
    dataSource?: Array<any>;

    /**
     * 渲染 MenuItem 内容的方法
     */
    itemRender?: (item: item, searchValue: string) => React.ReactNode;

    /**
     * 选择器模式
     */
    mode?: 'single' | 'multiple' | 'tag';

    /**
     * 弹层内容为空的文案
     */
    notFoundContent?: React.ReactNode;

    /**
     * Select发生改变时触发的回调
     */
    onChange?: (value: any, actionType: string, item: any) => void;

    /**
     * 是否有边框
     */
    hasBorder?: boolean;

    /**
     * 是否有下拉箭头
     */
    hasArrow?: boolean;

    /**
     * 展开后是否能搜索（tag 模式下固定为true）
     */
    showSearch?: boolean;

    /**
     * 当搜索框值变化时回调
     */
    onSearch?: (value: string) => void;

    /**
     * 当搜索框值被清空时候的回调
     */
    onSearchClear?: (actionType: string) => void;

    /**
     * 多选模式下是否有全选功能
     */
    hasSelectAll?: boolean | string;

    /**
     * 填充到选择框里的值的 key
     */
    fillProps?: string;

    /**
     * onChange 返回的 value 使用 dataSource 的对象
     */
    useDetailValue?: boolean;

    /**
     * dataSource 变化的时是否保留已选的内容
     */
    cacheValue?: boolean;

    /**
     * 渲染 Select 展现内容的方法
     */
    valueRender?: (item: any) => React.ReactNode;

    /**
     * 受控搜索值，一般不需要设置
     */
    searchValue?: string;
    /**
     * 是否一行显示，仅在 mode 为 multiple 的时候生效
     */
    tagInline?: boolean;
    /**
     * 最多显示多少个 tag
     */
    maxTagCount?: number;
    /**
     * tag 尺寸是否和 select 尺寸保持一致，仅在 multiple/tag 模式下有用
     */
    adjustTagSize?: boolean;
    /**
     * 隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用
     * @param {object} selectedValues 当前已选中的元素
     * @param {object} totalValues 总待选元素
     */
    maxTagPlaceholder?: (selectedValues?: any[], totalValues?: any[]) => React.ReactNode | HTMLElement;

    /**
     * 选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)
     */
    hiddenSelected?: boolean;
    /**
     * 是否展示 dataSource 中 children
     */
    showDataSourceChildren?: boolean;
    /**
     * tag 删除回调
     */
    onRemove?: (item: {}) => void;

    /**
     * 焦点事件
     */
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;

    /**
     * 失去焦点事件
     */
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    isPreview?: boolean;
    renderPreview?: (values: number | string | data | Array<number | string | data>, props: any) => any;
    /**
     * 自动高亮第一个选项
     */
    autoHighlightFirstItem?: boolean;

    /**
     * 高亮key
     */
    highlightKey?: string;

    /**
     *  默认高亮key
     */
    defaultHighlightKey?: string;

    /**
     * 展开下拉菜单时是否自动焦点到弹层	
     */
    popupAutoFocus?: boolean;
}

export default class Select extends React.Component<SelectProps, any> {
    static AutoComplete: typeof AutoComplete;
    static OptionGroup: typeof OptionGroup;
    static Option: typeof Option;
}