flipper-plugin
Version:
Flipper Desktop plugin SDK and components
126 lines • 4.72 kB
TypeScript
/**
* 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, { RefObject, CSSProperties } from 'react';
import { Percentage } from '../../utils/widthUtils';
import { DataSourceVirtualizer, DataSource, DataSourceView } from '../../data-source/index';
import { DataTableManager } from './DataTableWithPowerSearchManager';
import { Formatter } from '../DataFormatter';
import { OperatorConfig, SearchExpressionTerm, EnumLabels } from '../PowerSearch';
type DataTableBaseProps<T = any> = {
columns: DataTableColumn<T>[];
enableSearchbar?: boolean;
enableAutoScroll?: boolean;
enableHorizontalScroll?: boolean;
enableColumnHeaders?: boolean;
enableMultiSelect?: boolean;
enableContextMenu?: boolean;
enablePersistSettings?: boolean;
enableMultiPanels?: boolean;
scrollable?: boolean;
actionsRight?: React.ReactElement;
actionsTop?: React.ReactElement;
/** @deprecated **/
extraActions?: React.ReactElement;
onSelect?(record: T | undefined, records: T[]): void;
onRowStyle?(record: T): CSSProperties | undefined;
tableManagerRef?: RefObject<DataTableManager<T> | undefined>;
virtualizerRef?: RefObject<DataSourceVirtualizer | undefined>;
onCopyRows?(records: T[]): string;
onContextMenu?: (selection: undefined | T) => React.ReactElement;
onRenderEmpty?: null | ((dataView?: DataSourceView<T, T[keyof T]>) => React.ReactElement);
powerSearchInitialState?: SearchExpressionTerm[];
onSearchExpressionChange?: (searchExpression: SearchExpressionTerm[]) => void;
/**
* Adds a special power search entry to search through the entire row (mathching a substring in it after stringifying it as a JSON)
* @default true
*/
enablePowerSearchWholeRowSearch?: boolean;
/** If set to `true` and row[columnKey] is undefined, then it is going to pass filtering (search).
* @default false
*/
treatUndefinedValuesAsMatchingFiltering?: boolean;
};
export type ItemRenderer<T> = (item: T, selected: boolean, index: number) => React.ReactNode;
type DataTableInput<T = any> = {
dataSource: DataSource<T, T[keyof T]>;
viewId?: string;
records?: undefined;
recordsKey?: undefined;
} | {
records: readonly T[];
recordsKey?: keyof T;
viewId?: string;
dataSource?: undefined;
};
type PowerSearchSimplifiedConfig = {
type: 'enum';
enumLabels: EnumLabels;
inferEnumOptionsFromData?: false;
allowFreeform?: boolean;
} | {
type: 'enum';
enumLabels?: never;
inferEnumOptionsFromData: true;
allowFreeform?: boolean;
} | {
type: 'int';
} | {
type: 'float';
} | {
type: 'string';
} | {
type: 'date';
} | {
type: 'dateTime';
} | {
type: 'object';
};
type PowerSearchExtendedConfig = {
operators: OperatorConfig[];
useWholeRow?: boolean;
/**
* Auto-generate enum options based on the data.
* Requires the column to be set as a secondary "index" (single column, not a compound multi-column index).
* See https://fburl.com/code/0waicx6p
*/
inferEnumOptionsFromData?: boolean;
/**
* Allows freeform entries for enum column types. Makes most sense together with `inferEnumOptionsFromData`.
* If `inferEnumOptionsFromData=true`, then it is `true` by default.
* See use-case https://fburl.com/workplace/0kx6fkhm
*/
allowFreeform?: boolean;
};
export type DataTableColumn<T = any> = {
key: keyof T & string;
onRender?: (row: T, selected: boolean, index: number) => React.ReactNode;
formatters?: Formatter[] | Formatter;
title?: string;
width?: number | Percentage | undefined;
wrap?: boolean;
align?: 'left' | 'right' | 'center';
visible?: boolean;
inversed?: boolean;
sortable?: boolean;
powerSearchConfig?: PowerSearchSimplifiedConfig | OperatorConfig[] | false | PowerSearchExtendedConfig;
};
export interface TableRowRenderContext<T = any> {
columns: DataTableColumn<T>[];
onMouseEnter(e: React.MouseEvent<HTMLDivElement>, item: T, itemId: number): void;
onMouseDown(e: React.MouseEvent<HTMLDivElement>, item: T, itemId: number): void;
onRowStyle?(item: T): React.CSSProperties | undefined;
onContextMenu?(): React.ReactElement;
}
export type DataTableProps<T> = DataTableInput<T> & DataTableBaseProps<T>;
export declare function DataTable<T extends object>(props: DataTableProps<T>): React.ReactElement;
export declare namespace DataTable {
var defaultProps: Partial<DataTableProps<any>>;
}
export {};
//# sourceMappingURL=DataTableWithPowerSearch.d.ts.map