kea-react/src/grid/tipos.ts

Componentes comunes de react

export type CellData = string | number | boolean | Date | null | undefined;
export type DataTypes = "number" | "string" | "Date" | "boolean" | "null";

/**Una celda del grid que separa la información del grid de la vista de la información */
export interface GridCellExEx {
    data: CellData;
    view: JSX.Element;
}

export interface GridCellEx {
    data: CellData;
    format?: GridDataFormat;
}

/**Una celda de un grid */
export type GridCell = CellData | JSX.Element | GridCellExEx | GridCellEx;

export type GridDataFormat = "currency" | "number" | "date" | "datetime" | "yesno" | "tostring" | "empty";

/**La definición de una fila del grid */
export interface GridRowEx {
    /**Datos de la fila */
    data: GridCell[];
    /**Propiedades que se le pasaran al tr generado para esta fila */
    props?: React.HTMLProps<HTMLTableRowElement>
}

/**La definición tratada de una fila del grid */
export interface GridRowExEx {
    /**Celdas que contienene a los datos de la fila */
    visual: (visualProps: any)  => GridCellExEx[];
    /**Función que se usará para filtrar y ordenar, devuelve el dato de la celda dado el numero de columna, el hecho de estar representado como función y no como un arreglo
     * nos permite hacer optimizaciones que dependen de no tener disponble un dato pero aún asi poder leer otros datos
    */
    data: (index: number) => CellData;
    /**Propiedades que se le pasaran al tr generado para esta fila */
    props?: React.HTMLProps<HTMLTableRowElement>;
}

/**Un arreglo de celdas */
export type GridRow = GridCell[] | GridRowEx | GridRowExEx;

/**Determina el orden de un grid */
export interface OrdenGrid {
    /**Indice de la columna por la que se esta ordenando */
    columna: number;
    /**Dirección del orden */
    orden: "asc" | "desc";
}

export interface ColumnaProps {
    onOrdenar?: () => void;
    /**Se llama para poner o quitar el filtro */
    onFiltrar?: () => void;
    orden?: "asc" | "desc";
    puedeOrdenar: boolean;
    puedeFiltrar: boolean;
    /**True si la columna esta filtrada */
    estaFiltrado: boolean;
}

/**
 * Información de una columna del grid
 */
export interface GridColumnEx {
    /**
     * Cabecera de la columna
     */
    header: (props: ColumnaProps) => JSX.Element;
    /**Titulo de la columna */
    titulo: string;
    /**Formato de la columna */
    format?: GridDataFormat;
};

/**La definición de una columna de un grid */
export type GridColumn = GridColumnEx | JSX.Element | string | ((props: ColumnaProps) => JSX.Element);

export type filtroKind = "rangoNumerico" | "rangoFecha" | "valorUnico" | "busqueda";

export interface BaseFiltro {
    kind: filtroKind;
}

/**Un filtro de rango numerico */
export interface FiltroRangoNumerico extends BaseFiltro {
    kind: "rangoNumerico";
    inicio?: number;
    final?: number;
}

export interface FiltroRangoFechas extends BaseFiltro {
    kind: "rangoFecha";
    inicio?: Date | null;
    final?: Date | null;
}

export interface FiltroPorValorUnico extends BaseFiltro {
    kind: "valorUnico";
    valores: CellData[];
}

export interface FiltroPorBusqueda extends BaseFiltro {
    kind: "busqueda";
    texto: string;
}


export type Filtro = FiltroRangoNumerico | FiltroRangoFechas | FiltroPorValorUnico | FiltroPorBusqueda

export interface FiltroColumna {
    /**Datos del filtro */
    datos: Filtro;
    /**Indice de la columna */
    indice: number;
}