kea-react/src/grid2Base/simpleGrid/tiposFiltros.ts

Componentes comunes de react

import { CellData, CellView } from "./baseTypes";
import React = require("react");
import { ObjMap } from "keautils";


export interface ItemRowData<T> {
    cell: ObjMap<{
        data: CellData,
        /**Texto ya sea para mostrar o el de la busqueda */
        string: string,
        /**Estilo que se va a aplicar al elemento de la celda */
        style?: (itemData: any) => React.CSSProperties,
          /**Función que obtiene los datos que se van a encerrar en la celda de la tabla o undefined para mostrar la vista por default.
         * La función toma los datos de la celda y los datos compartidos de los items.
         * 
         * Por default se utiliza la función defaultCellView la cual convierte la celda a texto o muestra un drill down en caso de que la celda sea un objecto.
         * Se incluyen las siguientes funciones: @see cellToText @see objectCell @see arrayCell
         * */
            view?: CellView<any, any>;
    }>,
    /**Fila original */
    original: T,
    /**Texto para la búsqueda de este item */
    textSearch: string
};

/**Función que filtra un elemento dados el elemento y los datos del filtro */
export interface FiltroFunc<TItem, FiltroData> {
    (item: TItem, data: Partial<FiltroData>, string: string): boolean
}
/**Un componente funcional que dibuja al filtro */
export type FiltroComponent<TData> =
    React.ComponentClass<GridColumnFilterComponentProps<any, TData>> | React.StatelessComponent<GridColumnFilterComponentProps<any, TData>>;
export interface GridColumnFilter<TData> {
    /**Componente que muestra los datos del filtro al usuario */
    component: ((props: GridColumnFilterComponentProps<any, TData>) => JSX.Element) | React.ComponentClass<GridColumnFilterComponentProps<any, TData>>;
    /**Función que realiza el filtrado */
    filter: FiltroFunc<CellData, TData>;
}

export interface GridColumnFilterComponentProps<TItem, TData> {
    /**Valores del filtro */
    value: TData | undefined;
    /**Cambio del filtro */
    onChange: (value: TData) => void;
    /**Titulo de la columna */
    titulo: string;
    /**Función para quitar este filtro */
    onQuitar: () => void;
    /**Función que dado un item obtiene los datos de la celda */
    column: string | number;
    /**Todos los items */
    items: ItemRowData<TItem>[];
}