shineout/css/DataList/Props.d.ts

Shein 前端组件库

import * as React from 'react';
import { StandardProps, RegularAttributes, ObjectKey, KeygenType } from '../@types/common';
import ListDatum from '../Datum/List';
import { GetPagableProps } from '../hoc/Props';
import { GetDatumListProps } from '../Datum/Props';
export interface BaseListProps<DataItem, Value> extends StandardProps {
    /**
     * @en Multi-column display
     * @cn 多列展示
     * @default 1
     */
    colNum?: number;
    /**
     * @en render data
     * @cn 渲染数据
     * @override any[]
     */
    data: DataItem[];
    /**
     * @en Generate a auxiliary method for each key\nIf not filled, index will be used (not recommended, in some cases there may be problems)\nWhen it is a function, use its return value.\nWhen it is a string，ues the value of the string.For example, 'id' is the same thing as (d) => d.id .
     * @cn 生成每一项key的辅助方法\n为 true 时，以数据项本身作为 key，相当于 (d => d)\n为函数时，使用此函数返回值\n为 string 时，使用这个 string 对应的数据值。如 'id'，相当于 (d => d.id)
     */
    keygen: KeygenType<DataItem>;
    /**
     * @inner 内部属性
     */
    datum: ListDatum<DataItem, Value>;
    /**
     * @en render item
     * @cn 需要渲染成列表的数据
     */
    renderItem?: ObjectKey<DataItem> | ((d: DataItem, index: number) => React.ReactNode);
    /**
     * @en The current selected value.
     * @cn 当前选中值，格式和 onChange 返回值一致
     * @override any[]
     */
    value?: Value;
    /**
     * @en virtualized list
     * @cn 是否启用虚拟列表
     * @default false
     */
    fixed?: boolean;
    /**
     * @en list height
     * @cn 列表高度
     */
    height?: number;
    /**
     * @en show border
     * @cn 是否显示边框
     * @default false
     */
    bordered?: boolean;
    /**
     * @en height of item
     * @cn 列表项高度
     * @default 32
     */
    lineHeight?: number;
    /**
     * @en Number of list items displayed at the same time
     * @cn 同时展示的列表项数量
     * @default 10
     */
    rowsInView?: number;
    /**
     * @en What to display when no data
     * @cn 无数据时展示的内容
     */
    empty?: string | React.ReactNode;
    /**
     * @en Triggered when scrolling to the bottom
     * @cn 滚动到底部时触发
     */
    scrollLoading?: () => void;
    /**
     * @en size
     * @cn 尺寸
     * @default 'default'
     * @override union
     */
    size?: RegularAttributes.Size;
    /**
     * @en loading
     * @cn 加载中
     * @default false
     */
    loading?: boolean | React.ReactNode;
    /**
     * @en The content at the bottom
     * @cn 底部内容
     */
    footer?: (() => React.ReactNode) | React.ReactNode;
    /**
     * @en Select the row ,rowData is the selected data, rowIndex is the selected row number. If the data needs to be formatted, it is recommended to configure format
     * @cn 选择行。rowData 为选中的数据，rowIndex 为选中行号。如果需要数据需要格式化的处理，建议配置 format。
     */
    onChange?: (rowData: Value, index: number) => void;
    /**
     * @en custom row className
     * @cn 自定义行 className
     */
    rowClassName?: ((rowData: DataItem, index: number) => string | undefined) | string;
}
/**
 * @title List.BaseItem
 */
export interface ListBaseItemProps {
    /**
     * @en describe
     * @cn 描述
     */
    desc?: string;
    /**
     * @en The title of the list
     * @cn 列表元素的标题
     */
    title?: string;
    /**
     * @en Item className
     * @cn Item 容器的 className
     */
    className?: string;
    /**
     * @en Content area on the right side of the list
     * @cn 列表右侧内容
     */
    extra?: Array<React.ReactNode> | React.ReactNode;
    /**
     * @en List images
     * @cn 列表元素的图标
     */
    avatar?: string | React.ReactNode | (() => React.ReactNode);
    /**
     * @en list content
     * @cn 列表内容
     */
    content?: string | React.ReactNode | (() => React.ReactNode);
}
export declare type ListPropsWithPagination<Item, Value> = GetPagableProps<BaseListProps<Item, Value>>;
export declare type DataListDatumKey = 'disabled' | 'limit' | 'format' | 'prediction' | 'distinct';
/**
 * @title List
 */
export declare type ListProps<Item, Value> = GetDatumListProps<ListPropsWithPagination<Item, Value>, Item, Value, Exclude<DataListDatumKey, 'limit'>>;
export declare class BaseItemClass extends React.Component<ListBaseItemProps, {}> {
    render(): JSX.Element;
}
export declare class ListClass<Item, Value> extends React.Component<ListProps<Item, Value>, {}> {
    static BaseItem: typeof BaseItemClass;
    render(): JSX.Element;
}
export declare type ListType = typeof ListClass;