flipper-plugin/lib/ui/DataList.d.ts

Flipper Desktop plugin SDK and components

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */
import React from 'react';
import { DataTableProps, ItemRenderer } from './data-table/DataTable';
import { DataSource } from '../data-source/index';
type DataListBaseProps<Item> = {
    /**
     * Defines the styling of the component. By default shows a list, but alternatively the items can be displayed in a drop down
     */
    type?: 'default';
    /**
     * By default the data list will take all available space and scroll if items aren't otherwise visible.
     * By setting `scrollable={false}` the list will only take its natural size
     */
    scrollable?: boolean;
    /**
     * Handler that is fired if selection is changed
     */
    selection?: string | undefined;
    onSelect?(id: string | undefined, value: Item | undefined): void;
    className?: string;
    style?: React.CSSProperties;
    /**
     * Items to display. Per item at least a title and unique id should be provided
     */
    items: DataSource<Item, Item[keyof Item]> | readonly Item[];
    /**
     * Custom render function. By default the component will render the `title` in bold and description (if any) below it
     */
    onRenderItem?: ItemRenderer<Item>;
    /**
     * The attributes that will be picked as id/title/description for the default rendering.
     * Defaults to id/title/description, but can be customized
     */
    titleAttribute?: keyof Item & string;
    descriptionAttribute?: keyof Item & string;
    /**
     * Show a right arrow by default
     */
    enableArrow?: boolean;
} & (Item extends {
    id: string;
} ? {
    idAttribute?: keyof Item & string;
} : {
    idAttribute: keyof Item & string;
});
export type DataListProps<Item> = DataListBaseProps<Item> & Omit<DataTableProps<Item>, 'records' | 'dataSource' | 'columns' | 'onSelect'>;
export declare const DataList: (<T extends object>(props: DataListProps<T>) => React.ReactElement) & {
    Item: React.FC<DataListItemProps>;
};
type DataListItemProps = {
    title?: string | React.ReactElement;
    description?: string | React.ReactElement;
    enableArrow?: boolean;
};
export {};
//# sourceMappingURL=DataList.d.ts.map