flipper-plugin/lib/ui/data-table/DataTableManager.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 type { DataTableColumn } from './DataTable';
import { Percentage } from '../../utils/widthUtils';
import { MutableRefObject, Reducer, RefObject } from 'react';
import { DataSource, DataSourceView, DataSourceVirtualizer } from '../../data-source/index';
export type OnColumnResize = (id: string, size: number | Percentage) => void;
export type Sorting<T = any> = {
    key: keyof T;
    direction: Exclude<SortDirection, undefined>;
};
export type SearchHighlightSetting = {
    highlightEnabled: boolean;
    color: string;
};
export type SortDirection = 'asc' | 'desc' | undefined;
export type Selection = {
    items: ReadonlySet<number>;
    current: number;
};
type AddColumnFilterOptions = {
    /**
     * The filter is strict by default
     * All entries that are missing this value(undefined) will be filtered out.
     * By disabling this option you make filter include rows that don't have this value ie undefined
     */
    strict?: boolean;
    /**
     * By default, the filter is matched as a substring: rowValue.toLowerCase().includes(filter).
     * With this flag the filter is going to be matched by exact equality: rowValue === filter
     */
    exact?: boolean;
    disableOthers?: boolean;
};
type Action<Name extends string, Args = {}> = {
    type: Name;
} & Args;
type DataManagerActions<T> = 
/** Reset the current table preferences, including column widths an visibility, back to the default */
Action<'reset'>
/** Disable the current column filters */
 | Action<'resetFilters'>
/** Resizes the column with the given key to the given width */
 | Action<'resizeColumn', {
    column: keyof T;
    width: number | Percentage;
}>
/** Sort by the given column. This toggles statefully between ascending, descending, none (insertion order of the data source) */
 | Action<'sortColumn', {
    column: keyof T;
    direction: SortDirection;
}>
/** Show / hide the given column */
 | Action<'toggleColumnVisibility', {
    column: keyof T;
}> | Action<'setSearchValue', {
    value: string;
    addToHistory: boolean;
}> | Action<'selectItem', {
    nextIndex: number | ((currentIndex: number) => number);
    addToSelection?: boolean;
    allowUnselect?: boolean;
}> | Action<'selectItemById', {
    id: string;
    addToSelection?: boolean;
}> | Action<'addRangeToSelection', {
    start: number;
    end: number;
    allowUnselect?: boolean;
}> | Action<'clearSelection', {}>
/** Changing column filters */
 | Action<'addColumnFilter', {
    column: keyof T;
    value: string;
    options: AddColumnFilterOptions;
}> | Action<'removeColumnFilter', {
    column: keyof T;
    index: number;
    label?: never;
} | {
    column: keyof T;
    index?: never;
    label: string;
}> | Action<'toggleColumnFilter', {
    column: keyof T;
    index: number;
    label?: never;
} | {
    column: keyof T;
    index?: never;
    label: string;
}> | Action<'setColumnFilterInverse', {
    column: keyof T;
    inversed: boolean;
}> | Action<'setColumnFilterFromSelection', {
    column: keyof T;
}> | Action<'setFilterExceptions', {
    exceptions: string[] | undefined;
}> | Action<'appliedInitialScroll'> | Action<'toggleUseRegex'> | Action<'toggleAutoScroll'> | Action<'setAutoScroll', {
    autoScroll: boolean;
}> | Action<'toggleSearchValue'> | Action<'clearSearchHistory'> | Action<'toggleHighlightSearch'> | Action<'setSearchHighlightColor', {
    color: string;
}> | Action<'toggleFilterSearchHistory'> | Action<'toggleSideBySide'> | Action<'showSearchDropdown', {
    show: boolean;
}> | Action<'setShowNumberedHistory', {
    showNumberedHistory: boolean;
}>;
type DataManagerConfig<T> = {
    dataSource: DataSource<T, T[keyof T]>;
    dataView: DataSourceView<T, T[keyof T]>;
    defaultColumns: DataTableColumn<T>[];
    scope: string;
    onSelect: undefined | ((item: T | undefined, items: T[]) => void);
    virtualizerRef: MutableRefObject<DataSourceVirtualizer | undefined>;
    autoScroll?: boolean;
    enablePersistSettings?: boolean;
};
export type DataManagerState<T> = {
    config: DataManagerConfig<T>;
    usesWrapping: boolean;
    storageKey: string;
    initialOffset: number;
    columns: DataTableColumn[];
    sorting: Sorting<T> | undefined;
    selection: Selection;
    useRegex: boolean;
    filterSearchHistory: boolean;
    showSearchHistory: boolean;
    showNumberedHistory: boolean;
    autoScroll: boolean;
    searchValue: string;
    filterExceptions: string[] | undefined;
    /** Used to remember the record entry to lookup when user presses ctrl */
    previousSearchValue: string;
    searchHistory: string[];
    highlightSearchSetting: SearchHighlightSetting;
    sideBySide: boolean;
};
export type DataTableReducer<T> = Reducer<DataManagerState<T>, DataManagerActions<T>>;
export type DataTableDispatch<T = any> = React.Dispatch<DataManagerActions<T>>;
export declare const dataTableManagerReducer: (state: DataManagerState<any>, args_0: DataManagerActions<any>) => DataManagerState<any>;
/**
 * Public only imperative convienience API for DataTable
 */
export type DataTableManager<T> = {
    reset(): void;
    resetFilters(): void;
    selectItem(index: number | ((currentSelection: number) => number), addToSelection?: boolean, allowUnselect?: boolean): void;
    addRangeToSelection(start: number, end: number, allowUnselect?: boolean): void;
    setAutoScroll(autoScroll: boolean): void;
    selectItemById(id: string, addToSelection?: boolean): void;
    clearSelection(): void;
    getSelectedItem(): T | undefined;
    getSelectedItems(): readonly T[];
    toggleColumnVisibility(column: keyof T): void;
    sortColumn(column: keyof T, direction?: SortDirection): void;
    setSearchValue(value: string, addToHistory?: boolean): void;
    dataView: DataSourceView<T, T[keyof T]>;
    stateRef: RefObject<Readonly<DataManagerState<T>>>;
    toggleSearchValue(): void;
    toggleHighlightSearch(): void;
    setSearchHighlightColor(color: string): void;
    toggleSideBySide(): void;
    showSearchDropdown(show: boolean): void;
    setShowNumberedHistory(showNumberedHistory: boolean): void;
    addColumnFilter(column: keyof T, value: string, options?: AddColumnFilterOptions): void;
    removeColumnFilter(column: keyof T, label: string): void;
    setFilterExceptions(exceptions: string[] | undefined): void;
};
export declare function createDataTableManager<T>(dataView: DataSourceView<T, T[keyof T]>, dispatch: DataTableDispatch<T>, stateRef: MutableRefObject<DataManagerState<T>>): DataTableManager<T>;
export declare function createInitialState<T>(config: DataManagerConfig<T>): DataManagerState<T>;
export declare function getSelectedItem<T>(dataView: DataSourceView<T, T[keyof T]>, selection: Selection): T | undefined;
export declare function getSelectedItems<T>(dataView: DataSourceView<T, T[keyof T]>, selection: Selection): T[];
export declare function savePreferences(state: DataManagerState<any>, scrollOffset: number): void;
/**
 * A somewhat primitive and unsafe way to access nested fields an object.
 * @param obj keys should only be strings
 * @param keyPath dotted string path, e.g foo.bar
 * @returns value at the key path
 */
export declare function getValueAtPath(obj: Record<string, any>, keyPath: string): any;
export declare function computeDataTableFilter(searchValue: string, useRegex: boolean, columns: DataTableColumn[]): ((item: any) => boolean) | undefined;
export declare function safeCreateRegExp(source: string): RegExp | undefined;
export declare function computeSetSelection(base: Selection, nextIndex: number | ((currentIndex: number) => number), addToSelection?: boolean, allowUnselect?: boolean): Selection;
export declare function computeAddRangeToSelection(base: Selection, start: number, end: number, allowUnselect?: boolean): Selection;
export {};
//# sourceMappingURL=DataTableManager.d.ts.map