kea-react
Version:
Componentes comunes de react
112 lines (111 loc) • 6.65 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 __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 reselect_1 = require("reselect");
var keautils_1 = require("keautils");
var botones_1 = require("../../botones");
var table_1 = require("../../table");
var ColumnMappingComponent = /** @class */ (function (_super) {
__extends(ColumnMappingComponent, _super);
function ColumnMappingComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.value = function (props) { return props.value; };
_this.count = reselect_1.createSelector(_this.value, function (x) { return x.length; });
_this.columnas = function (props) { return props.columnas; };
/**Indices y titulos de las columnas que NO estan mapeadas */
_this.columnasDisponibles = reselect_1.createSelector(_this.value, _this.columnas, function (mapping, columnas) {
return keautils_1.pipe(columnas, function (cols) { return keautils_1.enumObject(cols); }, function (cols) { return cols.filter(function (x) { return !keautils_1.contains(mapping, x.key); }); });
});
/**Indices y titulos de las columnas que SI estan mapeadas, en el orden de mapeo */
_this.columnasAgregadas = reselect_1.createSelector(_this.value, _this.columnas, function (mapping, columnas) { return mapping.map(function (key) { return ({ key: key, value: columnas[key] }); }); });
_this.agregarColumna = function (col) {
var newValue = __spread(_this.props.value, [col]);
_this.props.onChange(newValue);
};
_this.moverColumna = function (indiceMapping, direccion) {
var newValue = keautils_1.upDownItem(_this.props.value, indiceMapping, direccion);
_this.props.onChange(newValue);
};
_this.quitarColumna = function (indice) {
var newValue = _this.props.value.filter(function (x) { return x != indice; });
_this.props.onChange(newValue);
};
_this.handleTodas = function () {
_this.props.onChange(undefined);
};
_this.handleNinguna = function () {
_this.props.onChange([]);
};
return _this;
}
ColumnMappingComponent.prototype.render = function () {
var _this = this;
var columnasDisponibles = this.columnasDisponibles(this.props).map(function (col) {
return React.createElement("tr", { key: col.key },
React.createElement("td", null,
React.createElement(botones_1.Link, { iconClass: "fa fa-plus fa-fw", onClick: function () { return _this.agregarColumna(col.key); }, style: "success" })),
React.createElement("td", null, col.value ? col.value : React.createElement("i", null, col.key)));
});
var columnasAgregadas = this.columnasAgregadas(this.props).map(function (col, indiceMapping) {
return React.createElement("tr", { key: col.key },
React.createElement("td", null,
React.createElement(botones_1.Link, { iconClass: "fa fa-times fa-fw", onClick: function () { return _this.quitarColumna(col.key); }, style: "danger" }),
React.createElement(botones_1.Link, { iconClass: "fa fa-arrow-up fa-fw", onClick: function () { return _this.moverColumna(indiceMapping, "up"); } }),
React.createElement(botones_1.Link, { iconClass: "fa fa-arrow-down fa-fw", onClick: function () { return _this.moverColumna(indiceMapping, "down"); } })),
React.createElement("td", null, col.value ? col.value : React.createElement("i", null, col.key)));
});
var ninguna = React.createElement(botones_1.Button, { iconClass: "fa fa-square-o", style: "danger", onClick: this.handleNinguna }, "Ninguna");
var todas = React.createElement(botones_1.Button, { iconClass: "fa fa-check-square-o fa-fw", style: "success", onClick: this.handleTodas }, "Todas");
return (React.createElement("div", { style: { display: "flex", flexDirection: "column" } },
React.createElement("div", { style: { flex: "0 1 auto" } },
React.createElement("div", { className: "btn-group pull-right" },
ninguna,
todas)),
React.createElement("div", { style: { display: "flex", flex: 1 } },
React.createElement("div", { style: { flex: 1 } },
React.createElement("label", null, "Disponibles"),
React.createElement(table_1.Table, { header: React.createElement("tr", null,
React.createElement("td", null),
React.createElement("td", null)), items: columnasDisponibles })),
React.createElement("div", { style: { flex: 1 } },
React.createElement("label", null, "Seleccionadas"),
React.createElement(table_1.Table, { header: React.createElement("tr", null,
" ",
React.createElement("td", null),
" ",
React.createElement("td", null),
" "), items: columnasAgregadas })))));
};
return ColumnMappingComponent;
}(React.PureComponent));
exports.ColumnMappingComponent = ColumnMappingComponent;