shineout/lib/Cascader/Props.d.ts

Shein 前端组件库

import React, { ReactNode } from 'react';
import { KeygenResult, ObjectKey, RegularAttributes, KeygenType, ObjectType, StandardProps } from '../@types/common';
import { GetInputableProps } from '../Form/Props';
import DatumTree, { TreeDatumOptions } from '../Datum/Tree';
import { GetInputBorderProps } from '../hoc/Props';
import { AbsoluteProps, GetAbsoluteProps } from '../AnimationList/Props';
import { GetTableConsumerProps } from '../Table/Props';
import { InputTitleProps } from '../InputTitle/Props';
/**
 * @title CascaderRef
 * @isDetail true
 */
interface ComponentRef {
    /**
     * @en Close the drop-down box
     * @cn 关闭下拉框
     */
    close: (e?: MouseEvent) => void;
}
export declare type CascaderBaseValue = (string | number)[];
/** ------ filterHoc ------ * */
export interface FilterProps<DataItem> extends Pick<TreeDatumOptions<DataItem>, 'mode'> {
    /**
     * @en the key of the children data name
     * @cn 指定子数据的属性名
     * @default 'children'
     */
    childrenKey?: ObjectKey<DataItem>;
    data: DataItem[];
    /**
     * @en The delay in milliseconds before the filter event is triggered by user input.
     * @cn 用户输入触发 fitler 事件的延时，单位为毫秒。
     * @default 'children'
     */
    filterDelay?: number;
    keygen: KeygenType<DataItem>;
    /**
     *
     * @en When the onFilter is not empty, you can filter data by input.
     * If the onFilter returns a function, use this function as a front-end filter.
     * If return undefined, you can do your own backend filtering.
     * support in single selection state
     *
     * @cn onFilter 不为空时，可以输入过滤数据
     * onFilter 如果返回一个函数，使用这个函数做前端过滤
     * 如果不返回，可以自行做后端过滤
     * 单选状态下支持
     */
    onFilter?: (text: string) => ((data: DataItem) => boolean) | undefined | void;
}
export declare type GetFilterProps<Props, DataItem> = Omit<Props, 'filterText' | 'filterDataChange' | 'firstMatchNode' | 'onFilter' | 'childrenKey' | 'sourceData'> & Pick<FilterProps<DataItem>, 'onFilter' | 'childrenKey' | 'filterDelay'>;
export interface OriginCascaderProps<DataItem, Value extends CascaderBaseValue> extends Pick<AbsoluteProps, 'absolute' | 'zIndex'>, Pick<InputTitleProps, 'innerTitle'>, Pick<TreeDatumOptions<DataItem>, 'mode'>, Pick<StandardProps, 'style'> {
    /**
     * @inner 源数据
     */
    sourceData?: DataItem[];
    /**
     * @en Form field, used with Form
     * @cn 表单字段, 配合 Form 使用
     */
    name?: string;
    /**
     * @en Only the last node can be selected
     * @cn 单选只支持选末级节点
     */
    final?: boolean;
    /**
     * @en Custom render dropdown
     * @cn 自定义渲染下拉列表
     */
    renderOptionList?: (list: React.ReactElement, info: {
        loading: boolean;
    }) => React.ReactElement;
    /**
     * @en Custom rendering unmatched values
     * @cn 渲染未匹配值的方式
     */
    renderUnmatched?: (data: any) => ReactNode;
    inputFocus: boolean;
    /**
     * @en Set visible of cascader popup
     * @cn 控制浮层显隐
     */
    open?: boolean;
    /**
     * @en Selected key (controlled)
     * @cn 选中的 key （受控)
     */
    value?: Value;
    /**
     * @en data. The child node is children. If the children value is null or its length is 0, it is render as a leaf node
     * @cn 数据，子节点为children，如果 children 值为 null 或 长度为 0 时，视为叶子节点
     * @override any[]
     */
    data?: DataItem[];
    /**
     * @en height of dropdown options
     * @cn 下拉列表高度
     * @default 300
     */
    height?: number;
    /**
     * @en render unmatch value
     * @cn 是否展示data中不存在的值
     * @default true
     */
    unmatch?: boolean;
    /**
     * @en If clearable is true, show clear value icon
     * @cn 是否显示清除数据图标
     * @default true
     */
    clearable?: boolean;
    /**
     * @en Allows all possible matching options to be choosed
     * @cn 开启 wideMatch 后，将筛选出所有可能的匹配项目
     * @default false
     */
    wideMatch?: boolean;
    /**
     * @en show dropdown arrow, only single select
     * @cn 是否显示下拉箭头，仅针对单选情况
     * @default true
     */
    showArrow?: boolean;
    /**
     * @en close options after chose the final node
     * @cn 选择末级节点后是否关闭选项列表
     * @default false
     */
    finalDismiss?: boolean;
    /**
     * @en Support single node deletion
     * @cn 支持单个节点删除
     */
    singleRemove?: boolean;
    /**
     * @en when compressed is True,the comptessedBound can limit the numbers of multiple selected item's label
     * @cn 开启多选后，指定允许展示标签数量，超过后将折叠
     */
    compressedBound?: number;
    /**
     *  @en dropdown list loading state
     *  @cn 下拉列表加载状态
     *  @override boolean | ReactNode
     *
     */
    loading?: boolean | ReactNode;
    /**
     * @en size
     * @cn 尺寸
     * @override union
     * @default 'default'
     */
    size?: RegularAttributes.Size;
    /**
     * @en the key of the children data name
     * @cn 指定子数据的属性名
     * @default 'children'
     */
    childrenKey: ObjectKey<DataItem>;
    /**
     * @en Merges selected values; the repeat value will not appear in the Popover when it is'no-repeat'
     * @cn 将选中值合并。为'no-repeat'时弹出框中不重复展示值
     * @default false
     */
    compressed?: boolean | 'no-repeat';
    /**
     * @en options collapse callback
     * @cn 下拉列表展开/收起回调
     */
    onCollapse?: (collapse: boolean) => void;
    /**
     * @en If the loader attribute is a function, the node with no children is regarded as dynamically loaded node. Click expanded button to trigger the loader event. The children property is null or its length is 0 will be regarded as a leaf node.
     * @cn 设置 loader 属性后，未定义 children 的节点视为动态加载节点，点击展开触发 loader 事件，children 为 null 或者长度为 0 视为叶子节点
     */
    loader?: (key: KeygenResult, data: DataItem) => void;
    /**
     * @en When it is true, all nodes disable the selection; when it is a function, it determines whether it is disabled according to the return result of the function.
     * @cn 当 disabled 为 true 时，禁用整个选择框。如果 disabled 为函数，根据函数反回结果禁用选项
     * @default false
     */
    disabled?: ((data: DataItem) => boolean) | boolean;
    /**
     * @en Expand mode
     * @cn 节点展开触发方式
     * @default 'click'
     */
    expandTrigger?: 'click' | 'hover' | 'hover-only';
    /**
     * @en When the onChange property is set, the selection box is displayed. The parameter is the current selected value, which is related to the mode property.
     * @cn 设置 onChange 属性时，显示 选择框。参数为当前选中值，和 mode 属性相关
     */
    onChange: (value: Value, selected?: DataItem) => void;
    /**
     * @en When the onFilter is not empty, you can filter data by input.If the onFilter returns a function, use this function as a front-end filter.If return undefined, you can do your own backend filtering.support in single selection state.
     * @cn onFilter 不为空时，可以输入过滤数据;onFilter 如果返回一个函数，使用这个函数做前端过滤;如果不返回，可以自行做后端过滤;单选状态下支持
     */
    onFilter?: (text: string) => void;
    /**
     * @en Auxiliary method for generating key. When it is a function, use the return value of this function. When it is a string, use the data value corresponding to this string. For example, 'id' is the same thing as (d) => d.id.
     * @cn 生成 key 的辅助方法, 为函数时，使用此函数返回值, 为 string 时，使用这个 string 对应的数据值。如 'id'，相当于 (d) => d.id
     * @default index
     */
    keygen: ((data: DataItem, parentKey?: KeygenResult) => KeygenResult) | ObjectKey<DataItem>;
    /**
     *  @en A reference to the binding component, you can call some component methods
     *  @cn 绑定组件的引用, 可以调用某些组件的方法
     *
     */
    getComponentRef?: ((comp: ComponentRef) => void) | {
        current: ComponentRef | undefined;
    };
    /**
     * @en When 'renderItem' is a string, it returns DataItem[string]. If it's a function, it returns the result of the function.
     * @cn 当 renderItem 为 string 时，返回 DataItem\\[string]。 若为函数时，则返回函数结果
     * @default d => d
     */
    renderItem: ObjectKey<DataItem> | ((data: DataItem, active?: boolean, id?: Value[0]) => React.ReactNode);
    /**
     * @en The content displayed in the result after selecting, if not set, use renderItem. not show while return null, result is current selected
     * @cn 选中后在结果中显示的内容，默认和 renderItem 相同
     * @default renderItem
     */
    renderResult?: ObjectKey<DataItem> | ((data: DataItem, row: DataItem[]) => React.ReactNode);
    /**
     * @inner 弹出位置
     */
    position?: 'drop-up' | 'drop-down';
    firstMatchNode: DataItem;
    filterText: string;
    filterDataChange: (data: DataItem) => boolean;
    /**
     * @en blur event
     * @cn 失焦事件
     */
    onBlur: (e?: MouseEvent) => void;
    /**
     * @en focus event
     * @cn 聚焦事件
     */
    onFocus: (e?: FocusEvent) => void;
    /**
     * @en placeholder
     * @cn 占位符
     */
    placeholder?: ReactNode;
    /**
     * @inner 内部属性
     */
    trim?: boolean;
    /**
     * @en empty input after select value
     * @cn 选中后是否清空输入框内容
     * @default true
     */
    emptyAfterSelect?: boolean;
}
/** ------ filterList ------ * */
export interface FilterListProps<DataItem, Value extends CascaderBaseValue> extends Pick<OriginCascaderProps<DataItem, Value>, 'wideMatch' | 'onFilter' | 'filterText' | 'zIndex' | 'data' | 'childrenKey' | 'renderItem' | 'filterDataChange' | 'height' | 'loading' | 'expandTrigger' | 'placeholder' | 'renderOptionList'> {
    shouldFinal: boolean;
    fixed: string;
    focus: boolean;
    parentElement: HTMLElement;
    'data-id': string;
    datum: DatumTree<DataItem>;
    getRef: () => void;
    onChange: (value: Value, Data?: DataItem) => void;
    onPathChange: (key: Value[0], item: DataItem | null, keys: Value, is?: boolean) => void;
}
export interface FilterItemProps<DataItem, Value extends CascaderBaseValue> extends Omit<FilterListProps<DataItem, Value>, 'data' | 'childrenKey' | 'height' | 'loading' | 'wideMatch'> {
    data: DataItem[];
}
export declare class FilterList<DataItem, Value extends CascaderBaseValue> extends React.Component<GetAbsoluteProps<FilterListProps<DataItem, Value>>, any> {
    render(): JSX.Element;
}
export declare type FilterListType = typeof FilterList;
/** ------ CascaderList ------ * */
export interface CascaderListProps<DataItem, Value extends CascaderBaseValue> extends Pick<OriginCascaderProps<DataItem, Value>, 'renderItem' | 'keygen' | 'loader' | 'expandTrigger' | 'childrenKey' | 'data'> {
    shouldFinal: boolean;
    datum: FilterListProps<DataItem, Value>['datum'];
    onChange: FilterListProps<DataItem, Value>['onChange'];
    onPathChange: FilterListProps<DataItem, Value>['onPathChange'];
    multiple: boolean;
    text?: ObjectType;
    id: Value[0];
    parentId: Value[0];
    path: Value;
}
/** ------ Node ------ * */
export interface NodeProps<DataItem, Value extends CascaderBaseValue> extends Omit<CascaderListProps<DataItem, Value>, 'data'> {
    active: boolean;
    data: DataItem;
}
/** ------ result ------ * */
export interface ResultProps<DataItem, Value extends CascaderBaseValue> extends Omit<OriginCascaderProps<DataItem, Value>, 'disabled'> {
    datum: DatumTree<DataItem>;
    onPathChange: FilterListProps<DataItem, Value>['onPathChange'];
    showList: () => void;
    focus: boolean;
    handleRemove: (data: DataItem) => void;
    onClear: () => void;
    multiple: boolean;
    bindInput: (Input: any) => void;
    selectId: string;
    emptyAfterSelect?: boolean;
}
export interface ResultItemProps<DataItem> {
    children: ReactNode;
    close: (data: DataItem, isPopover: boolean, e: Event) => void;
    className: string;
    data: DataItem;
    isPopover: boolean;
    singleRemove?: boolean;
    click: (data: DataItem, isPopover: boolean) => void;
    only: boolean;
    isDisabled: boolean;
}
/** ------ CascaderProps ------ * */
declare type CascaderPropsWithTableConsumber<Item, Value extends CascaderBaseValue> = GetTableConsumerProps<OriginCascaderProps<Item, Value>>;
declare type CascaderPropsWithFilter<Item, Value extends CascaderBaseValue> = GetFilterProps<CascaderPropsWithTableConsumber<Item, Value>, Item>;
declare type CascaderPropsWithBorder<Item, Value extends CascaderBaseValue> = Omit<GetInputBorderProps<CascaderPropsWithFilter<Item, Value>>, 'autoFocus'>;
declare type CascaderPropsWithInput<Item, Value extends CascaderBaseValue> = GetInputableProps<CascaderPropsWithBorder<Item, Value>, Value>;
/**
 * @title Cascader
 */
export declare type CascaderProps<Item, Value extends CascaderBaseValue> = CascaderPropsWithInput<Item, Value>;
export declare class CascaderClass<Item, Value extends CascaderBaseValue> extends React.Component<CascaderProps<Item, Value>, {}> {
    render(): JSX.Element;
}
export declare type CascaderType = typeof CascaderClass;
export {};