@gpa-gemstone/react-interactive
Version:
Interactive UI Components for GPA products
88 lines (87 loc) • 2.75 kB
TypeScript
import * as React from 'react';
interface IProps<T> {
/**
* List of available fields to be searched/filtered by
*/
CollumnList: Search.IField<T>[];
/**
* Optional list of current filters, this will act as the source of truth if provided ignoring filters from StorageID.
*/
Filters?: Search.IFilter<T>[];
/**
* Called whenever internal filters change, if Filters props is provided this must update the Filters prop to keep in sync.
* @param filters current filters
* @returns
*/
SetFilter: (filters: Search.IFilter<T>[]) => void;
/**
* Optional default column to be used for searching via the input box
*/
defaultCollumn?: Search.IField<T>;
/**
* Optional direction to control where filter popover is placed
*/
Direction?: 'left' | 'right';
/**
* Optional width to be used on the search bar
*/
Width?: string | number;
/**
* Optional label to used for search filter
*/
Label?: string;
/**
* Optional function used to populate enum-type filter options dynamically, will be called when enum filter is being added or edited.
*/
GetEnum?: EnumSetter<T>;
/**
* Optional flag to render a loading icon in quick search input box
*/
ShowLoading?: boolean;
/**
* Optional note to be used under quick search input
*/
ResultNote?: string;
/**
* If provided, component stores and loads filters to/from localStorage using this key
*/
StorageID?: string;
/**
* Optional class to apply to outer div
*/
Class?: string;
/**
* Optional disabled flag
*/
Disabled?: boolean;
/**
* Optional help message for the filter button
*/
Help?: string;
}
export interface IOptions {
Value: string;
Label: string;
}
export type EnumSetter<T> = (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void;
export declare namespace Search {
type FieldType = ('string' | 'number' | 'enum' | 'integer' | 'datetime' | 'boolean' | 'date' | 'time' | "query");
interface IField<T> {
label: string;
key: string;
type: FieldType;
enum?: IOptions[];
isPivotField: boolean;
}
type OperatorType = ('=' | '<>' | '>' | '<' | '>=' | '<=' | 'LIKE' | 'NOT LIKE' | 'IN' | 'NOT IN');
interface IFilter<T> {
FieldName: string;
SearchText: string;
Operator: Search.OperatorType;
Type: Search.FieldType;
IsPivotColumn: boolean;
}
}
export default function SearchBar<T>(props: React.PropsWithChildren<IProps<T>>): JSX.Element;
export declare const GetStoredFilters: (storageID: string) => any[];
export {};