kea-react
Version:
Componentes comunes de react
103 lines (102 loc) • 6.58 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var column_1 = require("./column");
var reselect_1 = require("reselect");
var drillDowns_1 = require("../simpleGrid/drillDowns");
var keautils_1 = require("keautils");
function gridColumnToColumnHeader(value) {
return {
titulo: value.title,
puedeFiltrar: true
};
}
exports.gridColumnToColumnHeader = gridColumnToColumnHeader;
var GridHeaderComponent = /** @class */ (function (_super) {
__extends(GridHeaderComponent, _super);
function GridHeaderComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onChangeSelector = function (props) { return props.onChange; };
_this.valueSelector = function (props) { return props.value; };
_this.filtroOrdenSelector = reselect_1.createSelector(_this.valueSelector, function (value) { return value.filtroOrden; });
_this.onFiltroOrdenChangeSelector = reselect_1.createSelector(_this.onChangeSelector, _this.valueSelector, function (onChange, value) { return function (filtroOrden) { return onChange(__assign({}, value, { filtroOrden: filtroOrden })); }; });
_this.onColumnaChangeSelector = reselect_1.createSelector(_this.onFiltroOrdenChangeSelector, _this.filtroOrdenSelector, function (onChange, value) { return function (columna) { return onChange(__assign({}, value, { columna: columna })); }; });
_this.onOrdenChangeSelector = reselect_1.createSelector(_this.onFiltroOrdenChangeSelector, _this.filtroOrdenSelector, function (onChange, value) { return function (orden) { return onChange(__assign({}, value, { orden: orden })); }; });
_this.ordenSelector = reselect_1.createSelector(_this.filtroOrdenSelector, function (x) { return x.orden; });
_this.filtrosColumnaSelector = reselect_1.createSelector(_this.filtroOrdenSelector, function (x) { return x.columna; });
_this.estaFiltradaSelector = reselect_1.createSelector(_this.filtrosColumnaSelector, function (filtros) { return function (i) { return filtros[i] != null; }; });
_this.getOrdenColumnaSelector = reselect_1.createSelector(_this.ordenSelector, function (orden) { return function (i) {
return (orden && orden.columna == i) ? orden.orden : undefined;
}; });
_this.onQuitarColumnMappingSelector = reselect_1.createSelector(_this.onChangeSelector, _this.valueSelector, function (onChange, value) { return function (index) { return onChange(__assign({}, value, { mapping: (value.mapping || []).filter(function (x) { return x != index; }) })); }; });
_this.onQuitarColumna = function (index) {
var newValue = drillDowns_1.quitarColumna(index, _this.valueSelector(_this.props));
_this.props.onChange(newValue);
};
_this.columnasSelector = function (props) { return props.columnas; };
_this.mappingSelector = function (props) { return props.value.mapping; };
/**Columnas ordenadas con el orden establecido por el usuario */
_this.columnasOrdenadasSelector = reselect_1.createSelector(_this.columnasSelector, _this.mappingSelector, function (columnas, mapping) { return mapping.map(function (i) { return ({ key: i, columna: columnas[i] }); }); });
_this.columnasComponentSelector = reselect_1.createSelector(_this.columnasOrdenadasSelector, _this.estaFiltradaSelector, _this.getOrdenColumnaSelector, function (columnas, estaFiltrada, getOrdenColumna) {
return columnas.map(function (col) {
return React.createElement(column_1.GridColumnComponent, { key: col.key, puedeOrdenar: true, puedeFiltrar: col.columna.puedeFiltrar, estaFiltrado: estaFiltrada(col.key), onFiltrar: function () { return _this.onFiltrar(col.key); }, onOrdenar: function () { return _this.onOrdenar(col.key); }, orden: getOrdenColumna(col.key), titulo: col.columna.titulo, onQuitar: function () { return _this.onQuitarColumna(col.key); } });
});
});
_this.onFiltrar = function (index) {
var filtros = _this.filtrosColumnaSelector(_this.props);
var existe = filtros[index] != null;
var nuevo;
if (existe) {
//Quitar el filtro:
nuevo = keautils_1.omit(filtros, [index]);
}
else {
//Poner el filtro, iniciamos con los datos del filtro como indefinidos
nuevo = __assign({}, filtros, (_a = {}, _a[index] = { datos: undefined }, _a));
}
_this.onColumnaChangeSelector(_this.props)(nuevo);
var _a;
};
_this.onOrdenar = function (index) {
var orden = _this.ordenSelector(_this.props);
var nuevaDireccion;
if (orden == undefined || orden.columna != index) {
nuevaDireccion = "asc";
}
else if (orden.orden == "asc") {
nuevaDireccion = "desc";
}
else {
nuevaDireccion = undefined;
}
var nuevoOrden = nuevaDireccion ? { columna: index, orden: nuevaDireccion } : undefined;
_this.onOrdenChangeSelector(_this.props)(nuevoOrden);
};
return _this;
}
GridHeaderComponent.prototype.render = function () {
var estaFiltrada = this.estaFiltradaSelector(this.props);
var ordenColumna = this.getOrdenColumnaSelector(this.props);
return (React.createElement("tr", null, this.columnasComponentSelector(this.props)));
};
return GridHeaderComponent;
}(React.PureComponent));
exports.GridHeaderComponent = GridHeaderComponent;