@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
70 lines (69 loc) • 3.35 kB
TypeScript
import * as React from 'react';
import { ReactNode } from 'react';
export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
options: OPTION_TYPE[];
value: ID_TYPE[];
onChange: (selected: ID_TYPE[], selectedMap: Map<ID_TYPE, OPTION_TYPE>) => void;
allowReorder?: boolean | ((option: OPTION_TYPE) => boolean);
filter?: null | ((o: OPTION_TYPE, searchValue: string) => boolean);
/**
* To show the filter input, filter needs also to be defined.
*/
showFilterInput?: boolean;
filterPlaceholder?: string;
/** Tighter rows and inline search with Select All (layout wizard). */
compact?: boolean;
/** Matches Visibility list: checkbox then label (default: label inside checkbox). */
optionLayout?: 'label-in-checkbox' | 'label-beside-checkbox';
/** Hides "Show Selected Only" in the header (e.g. Visibility-style Select All + search row). */
hideShowSelectedOnly?: boolean;
/** Extra classes on the compact header row (e.g. wider gap between controls). */
compactHeaderClassName?: string;
/**
* Search field classes in compact mode. When set without `flex-1`, a spacer keeps
* the search narrow (layout wizard column lists).
*/
compactFilterClassName?: string;
singleSelect?: boolean;
toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
/**
* Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
*/
toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
/** Rendered at the end of the row, outside the checkbox label (e.g. sort direction toggle). */
renderOptionTrailing?: (option: OPTION_TYPE) => ReactNode;
/** Clicking the row toggles inclusion; checkbox clicks do not double-toggle. */
toggleSelectionOnRowClick?: boolean;
showSelectedOnlyLabel?: ReactNode;
onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
isOptionDisabled?: (option: OPTION_TYPE) => boolean;
disabled?: boolean;
optionClassName?: string;
className?: string;
style?: React.CSSProperties;
};
export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
export declare const renderSelectionSection: (props: {
value: ValueSelectorProps<any, any>["value"];
options: ValueSelectorProps<any, any>["options"];
showOnlySelectedCheckbox?: ReactNode;
disabled?: ValueSelectorProps<any, any>["disabled"];
isOptionDisabled?: ValueSelectorProps<any, any>["isOptionDisabled"];
singleSelect?: ValueSelectorProps<any, any>["singleSelect"];
toIdentifier: ValueSelectorProps<any, any>["toIdentifier"];
toLabel: ValueSelectorProps<any, any>["toLabel"];
onChange: ValueSelectorProps<any, any>["onChange"];
onSelectAll: () => void;
onClear: () => void;
onClearOption: (id: any) => void;
compact?: boolean;
showFilterInput?: boolean;
filter?: null | ((o: any, searchValue: string) => boolean);
searchInputValue?: string;
setSearchInputValue?: (value: string) => void;
filterPlaceholder?: string;
hideShowSelectedOnly?: boolean;
compactHeaderClassName?: string;
compactFilterClassName?: string;
}) => React.JSX.Element;