kea-react
Version:
Componentes comunes de react
161 lines (160 loc) • 8.05 kB
JavaScript
"use strict";
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;
};
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 logic_1 = require("../grid/logic");
var components_1 = require("../grid/components");
var grid_1 = require("../grid/grid");
var React = require("react");
var checkbox_1 = require("../fields/checkbox");
var async_1 = require("../async");
var memoize = require("memoizeref");
var HOC_1 = require("../HOC");
var ControlledSyncMultiSelectGrid = /** @class */ (function (_super) {
__extends(ControlledSyncMultiSelectGrid, _super);
function ControlledSyncMultiSelectGrid(props) {
var _this = _super.call(this, props) || this;
_this.handleAllCheckbox = function (value) {
if (_this.props.onChange) {
var todos = _this.itemsFiltrados;
var idsFiltrados_1 = new Set(todos.map(function (x) { return x.id; }));
var viejos = _this.props.value;
if (value) {
//Agregamos todos los ids a los ids actuales, quitando los repetidos con el set
var nuevos = __spread(new Set(__spread(viejos, idsFiltrados_1)));
_this.props.onChange(nuevos);
}
else {
//Quitamos los ids filtrados:
var nuevos = viejos.filter(function (x) { return !idsFiltrados_1.has(x); });
_this.props.onChange(nuevos);
}
_this.setState(function (prev) { return ({ allCheckboxValue: !prev.allCheckboxValue }); });
}
};
_this.handleSelectionChange = function (id, value) {
if (_this.props.onChange) {
var old = _this.props.value;
var exists = old.indexOf(id) != -1;
var newValue = (exists && !value) ? old.filter(function (x) { return x != id; }) : //quitarlo
(!exists && value) ? __spread(old, [id]) : //agregarlo
old; //queda igual
_this.props.onChange(newValue);
}
};
_this.getRows = memoize(function (items, seleccion) {
var mappedItems = items.map(function (x, i) { return ({ row: logic_1.toGridRowExEx(x.row), id: x.id }); });
return mappedItems.map(function (x) { return _this.createRow(x.row, x.id, seleccion); });
});
_this.state = {
allCheckboxValue: false
};
return _this;
}
Object.defineProperty(ControlledSyncMultiSelectGrid.prototype, "itemsFiltrados", {
get: function () {
var _this = this;
//Todos los items filtrados:
var seleccion = this.props.value;
//Tenemos que agregar la columna del checkbox para que se comporte bien con los filtros:
var todosCheck = this.props.items.map(function (x) { return ({ id: x.id, row: _this.createRow(logic_1.toGridRowExEx(x.row), x.id, seleccion) }); });
//Se le suma 1 para incluir la columna del checkbox
var columnCount = this.props.columns.length + 1;
var todos = logic_1.filtrarItems(todosCheck, function (x) { return x.row; }, this.props.gridState.filtros, this.props.gridState.busqueda, columnCount);
return todos;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ControlledSyncMultiSelectGrid.prototype, "columns", {
get: function () {
var _this = this;
var allCheck = {
header: function (props) {
return React.createElement("td", { key: "select_all_check" },
React.createElement("span", null,
React.createElement(checkbox_1.Checkbox, { value: _this.state.allCheckboxValue, onChange: _this.handleAllCheckbox }),
React.createElement(components_1.GridCellControls, __assign({}, props))));
},
titulo: "Selección"
};
return __spread([allCheck], this.props.columns);
},
enumerable: true,
configurable: true
});
ControlledSyncMultiSelectGrid.prototype.createRow = function (row, id, seleccion) {
var _this = this;
var creatCheckCell = function (selected, value) { return ({
data: selected,
view: React.createElement("td", { key: "multiselect_checkbox" },
React.createElement(checkbox_1.Checkbox, { value: selected, onChange: function (x) { return _this.handleSelectionChange(value, x); } }))
}); };
return {
props: row.props,
data: function (index) { return index == 0 ? (seleccion.indexOf(id) != -1) : row.data(index - 1); },
visual: function (visualProps) { return __spread([creatCheckCell(visualProps.indexOf(id) != -1, id)], row.visual(_this.props.visualProps)); },
};
};
Object.defineProperty(ControlledSyncMultiSelectGrid.prototype, "rows", {
get: function () {
return this.getRows(this.props.items, this.props.value);
},
enumerable: true,
configurable: true
});
ControlledSyncMultiSelectGrid.prototype.render = function () {
var columns = this.columns;
var rows = this.rows;
return (React.createElement(grid_1.Grid, { columns: columns, rows: this.rows, visualProps: this.props.value, gridState: this.props.gridState, onGridStateChange: this.props.onGridStateChange }));
};
return ControlledSyncMultiSelectGrid;
}(React.PureComponent));
var ControlledMultiSelectGrid = /** @class */ (function (_super) {
__extends(ControlledMultiSelectGrid, _super);
function ControlledMultiSelectGrid() {
return _super !== null && _super.apply(this, arguments) || this;
}
ControlledMultiSelectGrid.prototype.render = function () {
var _this = this;
return async_1.async(Promise.all([this.props.items, this.props.columns, this.props.value]), function (all) { return React.createElement(ControlledSyncMultiSelectGrid, { items: all[0], columns: all[1], value: all[2], onChange: _this.props.onChange, gridState: _this.props.gridState || { busqueda: "", filtros: [] }, onGridStateChange: _this.props.onGridStateChange }); });
};
return ControlledMultiSelectGrid;
}(React.PureComponent));
exports.MultiSelectGrid = HOC_1.MakeUncontrolledCookies("gridState", "onGridStateChange")(ControlledMultiSelectGrid);