kea-react
Version:
Componentes comunes de react
341 lines (340 loc) • 13 kB
JavaScript
;
//Contiene la mayoria de la logica para el grid
//Todas estas funciones son puras
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var format_1 = require("./format");
var search_1 = require("../search");
var components_1 = require("./components");
function isGridColumnEx(x) {
var y = x;
return (typeof y.header == "function");
}
/**Convierte a GridColumnEx */
function toGridColumnEx(x) {
if (isGridColumnEx(x)) {
return x;
}
else if (typeof x === "string") {
return {
titulo: x,
header: function (props) { return React.createElement(components_1.GridHeaderComponent, __assign({}, props, { titulo: x })); }
};
}
else if (typeof x === "function") {
return { header: x, titulo: "" };
}
else {
return { header: function (props) { return x; }, titulo: "" };
}
}
exports.toGridColumnEx = toGridColumnEx;
/**
* Devuelve si un GridCell es un CellData
* @param x
*/
function isCellData(x) {
var ret = (typeof x === "string") ||
(typeof x === "number") ||
(typeof x === "boolean") ||
(x == null) ||
(x instanceof Date);
return ret;
}
/**Devuelve si un GridCell es un GridCellEx */
function isGridCellExEx(x) {
if (!x)
return false;
var y = x;
return isCellData(y.data) && React.isValidElement(y.view);
}
function isGridCellEx(x) {
if (!x)
return false;
var y = x;
return isCellData(y.data) && (typeof y.format == "string");
}
/**Normaliza un GridCell a un GridCellEx */
function toGridCellEx(x, index) {
if (isGridCellExEx(x)) {
return x;
}
else if (isGridCellEx(x)) {
return { data: x.data, view: React.createElement(components_1.GridCellComponent, { data: x.data, format: x.format }) };
}
else if (isCellData(x)) {
return { data: x, view: React.createElement(components_1.GridCellComponent, { data: x }) };
}
else {
return { data: undefined, view: x };
}
}
/**Determina si un GridRowEx o ExEx es un GridRowExEx */
function isGridRowExEx(x) {
var y = x;
return !!y.visual;
}
/**Normaliza un GridRow a un GridRowExEx */
function toGridRowExEx(x) {
if (Array.isArray(x)) {
var y = { data: x };
return toGridRowExEx(y);
}
else if (isGridRowExEx(x)) {
return x;
}
else {
var data_1 = x.data.map(function (y) { return getCellData(y); });
var ret = {
visual: function () { return x.data.map(function (x, i) { return toGridCellEx(x, i); }); },
data: function (i) { return data_1[i]; },
props: x.props
};
return ret;
}
}
exports.toGridRowExEx = toGridRowExEx;
/**Obtiene un arreglo que por cada columna, devuelve el tipo de dato que mas existe en esa columna */
function obtenerTiposColumnas(data, columnCount) {
//Tratamos de tomar una muestra de este tamaño:
var sampleSize = 100;
var step = Math.round(Math.max(data.length / sampleSize, 1));
var conteoTipos = {};
//Armamos el arreglo de conteo de tipos, tomando una muestra de las filas
for (var y = 0; y < data.length; y += step) {
var row = getRowCellData(data[y], columnCount);
for (var x = 0; x < row.length; x++) {
var cellData = row[x];
var columna = conteoTipos[x] = conteoTipos[x] || {};
var tipo = format_1.getCellDataType(cellData);
columna[tipo] = (columna[tipo] || 0) + 1;
}
}
//Cantidad de columnas:
var cantColumnas = 1 + Object.keys(conteoTipos).map(function (x) { return Number.parseInt(x); }).reduce(function (a, b) { return Math.max(a, b); }, 0);
//Por cada columna, el tipo que tiene mas cantidad de elementos o null si esa columna no tenia
var tiposColumnas = [];
var _loop_1 = function (i) {
var columna = conteoTipos[i] || {};
//Arreglo de {tipo, cantidad}
var conteosPorTipo = Object.keys(columna).map(function (x) { return x; }).map(function (x) { return ({ tipo: x, conteo: columna[x] }); });
//El tipo con el conteo maximo
var max = conteosPorTipo.sort(function (a, b) { return b.conteo - a.conteo; })[0];
var vacio = max == null;
tiposColumnas[i] = vacio ? "null" : max.tipo;
};
for (var i = 0; i < cantColumnas; i++) {
_loop_1(i);
}
return tiposColumnas;
}
exports.obtenerTiposColumnas = obtenerTiposColumnas;
function compare(a, b) {
return (a == b ? 0 :
a == null ? 1 :
b == null ? -1 :
a > b ? 1 :
a < b ? -1 : 0);
}
exports.compare = compare;
function enumerateThunk(dataThunk, count) {
var ret = new Array(count);
for (var i = 0; i < count; i++) {
ret[i] = dataThunk(i);
}
return ret;
}
/**Obtiene los datos que se deben de descargar en el CSV de un grid */
function ObtenerDatosCsv(rows, columns) {
var types = obtenerTiposColumnas(rows, columns.length);
var cabecera = columns.map(function (x) { return x.titulo; }).filter(function (x, i) { return types[i] && types[i] != "null"; });
var datos = rows.map(function (row) { return enumerateThunk(row.data, columns.length).filter(function (x, i) { return types[i] && types[i] != "null"; }); });
return __spread([cabecera], datos);
}
exports.ObtenerDatosCsv = ObtenerDatosCsv;
function busquedaCadena(busqueda, elemento) {
return elemento.toLocaleLowerCase().indexOf(busqueda.toLocaleLowerCase()) != -1;
}
function busquedaRango(min, max, valor) {
if (min == null && max == null)
return true;
if (valor == null)
return false;
return (!min || valor >= min) && (!max || valor <= max);
}
function busquedaRangoFecha(min, max, valor) {
return busquedaRango(min && min.valueOf(), max && max.valueOf(), valor && valor.valueOf());
}
function busquedaValoresUnicos(valores, valor) {
if (valores.length == 0)
return true;
return valores.indexOf(valor) != -1;
}
function aplicarFiltro(filtro, datos) {
switch (filtro.kind) {
case "busqueda":
return busquedaCadena(filtro.texto, format_1.formatCellData(datos));
case "rangoNumerico":
return busquedaRango(filtro.inicio, filtro.final, datos);
case "rangoFecha":
return busquedaRangoFecha(filtro.inicio || undefined, filtro.final || undefined, datos);
case "valorUnico":
return busquedaValoresUnicos(filtro.valores, datos);
}
}
/**Obtiene los datos de celda de un GridCell */
function getCellData(x) {
if (isGridCellExEx(x)) {
return x.data;
}
else if (isGridCellEx(x)) {
return x.data;
}
else if (isCellData(x)) {
return x;
}
else {
return undefined;
}
}
/**Obtiene los datos de celda de un GridRow */
function getRowCellData(row, cellCount) {
if (Array.isArray(row)) {
return row.map(function (x) { return getCellData(x); });
}
else if (isGridRowExEx(row)) {
return enumerateThunk(row.data, cellCount);
}
else {
return row.data.map(function (x) { return getCellData(x); });
}
}
/**Obtiene los datos de celda de un GridRow en cierta columna */
function getRowCellDataAt(row, index) {
if (Array.isArray(row)) {
return getCellData(row[index]);
}
else if (isGridRowExEx(row)) {
return row.data(index);
}
else {
return getCellData(row.data[index]);
}
}
exports.getRowCellDataAt = getRowCellDataAt;
/**Obtiene los valroes unicos de una columna */
function valoresUnicos(datos, columna) {
var valores = datos.map(function (fila) { return getRowCellDataAt(fila, columna); });
var set = new Set(valores);
return Array.from(set).sort(function (a, b) { return compare(a, b); });
}
exports.valoresUnicos = valoresUnicos;
function aplicarFiltroBusqueda(datos, getKey, filtro, columnCount) {
if (!filtro)
return datos;
var toStr = function (row) { return getRowCellData(row, columnCount).map(function (x) { return format_1.formatCellData(x); }).reduce(function (a, b) { return a + " " + b; }); };
return datos.filter(function (x) { return search_1.search(filtro, toStr(getKey(x))); });
}
exports.aplicarFiltroBusqueda = aplicarFiltroBusqueda;
/**Aplica un filtro a la información */
function aplicarFiltroColumna(datos, getKey, filtro) {
return datos.filter(function (x) { return aplicarFiltro(filtro.datos, getRowCellDataAt(getKey(x), filtro.indice)); });
}
exports.aplicarFiltroColumna = aplicarFiltroColumna;
/**Devuelve los datos en orden de los datos que se van a mostrar en un grid */
function filtrarOrdenar(data, orden, filtros, busqueda, columnCount) {
var ret = data;
//Aplicamos el orden:
if (orden) {
var sortFunc_1 = function (a, b) { return (compare(a, b)) * (orden.orden == "asc" ? 1 : -1); };
var getColumnData_1 = function (x) { return getRowCellDataAt(x, orden.columna); };
var rowSortFunc = function (a, b) { return sortFunc_1(getColumnData_1(a), getColumnData_1(b)); };
ret = __spread(ret).sort(rowSortFunc);
}
ret = filtrarItems(ret, function (x) { return x; }, filtros, busqueda, columnCount);
return ret;
}
exports.filtrarOrdenar = filtrarOrdenar;
/**
* Filtra una colección de elementos dado el filtro de un grid
* @param data
* @param getKey
* @param filtros
* @param busqueda
* @param columnCount
*/
function filtrarItems(data, getKey, filtros, busqueda, columnCount) {
var ret = data;
ret = filtros.reduce(function (a, b) { return aplicarFiltroColumna(a, getKey, b); }, ret);
ret = aplicarFiltroBusqueda(ret, getKey, busqueda, columnCount);
return ret;
}
exports.filtrarItems = filtrarItems;
/**
* Obtiene el elemento tr que sera la cabecera de la tabla
* @param columnas Columnas del grid
* @param orden Estado del ordenamiento del grid
* @param tiposFiltros Tipos de los filtros por columna
* @param stateFiltros Estado actual de los filtros
* @param handleOnOrdenar Funcion que toma el indice de la columna y que se ejecuta cuando el usuario quiera ordenar por esa columna
* @param handleOnFiltrar Funcion que toma el indice de la columna y el tipo de filtro y quita o agrega el filtro para esa columna
*/
function getGridHeader(columnas, orden, tiposFiltros, stateFiltros, handleOnOrdenar, handleOnFiltrar) {
var headerCells = columnas
.map(function (x, i) {
return x.header({
onOrdenar: function () { return handleOnOrdenar(i); },
onFiltrar: function () { return handleOnFiltrar(i, tiposFiltros[i]); },
orden: orden && orden.columna == i ? orden.orden : undefined,
puedeOrdenar: !!tiposFiltros[i],
puedeFiltrar: tiposFiltros[i] != null,
estaFiltrado: stateFiltros.map(function (x) { return x.indice; }).indexOf(i) != -1
});
});
return React.createElement.apply(React, __spread(["tr", {}], headerCells));
}
exports.getGridHeader = getGridHeader;
/**
* Devuelve una función que dado el visualProps crea un tr del Grid
* @param row Fila
* @param visualProps Propiedades visuales de la fila
* @param key Key
*/
function getGridRow(row, key, visualPropsThunk) {
return function () {
var visualProps = visualPropsThunk();
var x = toGridRowExEx(row);
var visualR = x.visual(visualProps);
var cells = visualR.map(function (cell) { return cell.view; });
return React.createElement.apply(React, __spread(["tr", __assign({}, x.props, { key: key })], cells));
};
}
exports.getGridRow = getGridRow;