kea-react/dist/grid2Base/components/grid.js

Componentes comunes de react

"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_rxk_1 = require("react-rxk");
var gridState_1 = require("../simpleGrid/gridState");
var filtros_1 = require("./filtros");
var busqueda_1 = require("./busqueda");
var filtrarOrdenar_1 = require("../simpleGrid/filtrarOrdenar");
var tableFiltro_1 = require("./tableFiltro");
var drillDowns_1 = require("../simpleGrid/drillDowns");
var reselect_1 = require("reselect");
var keautils_1 = require("keautils");
var csv_1 = require("../simpleGrid/csv");
var HOC_1 = require("../../HOC");
var createShallowSelector = reselect_1.createSelectorCreator(reselect_1.defaultMemoize, function (a, b) { return keautils_1.shallowEquals(a, b); });
var GridControlled = /** @class */ (function (_super) {
    __extends(GridControlled, _super);
    function GridControlled() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.items = function (props) { return props.items == undefined ? new Promise(function () { }) : props.items; };
        /**Columnas originales. Note que estas columnas pueden venir sin key */
        _this.originalColumns = function (props) { return props.columnas; };
        /**Asigna los keys por default */
        _this.columnSelector = reselect_1.createSelector(_this.originalColumns, function (cols) { return cols.map(function (x) { return (__assign({}, x, { key: x.key || x.title })); }); });
        _this.originalColumnMapSelector = reselect_1.createSelector(_this.columnSelector, function (cols) { return keautils_1.arrayToMap(cols, function (x) { return "" + x.key; }, function (x) { return x; }); });
        _this.originalGridState = function (props) { return props.gridState; };
        _this.columnKeys = reselect_1.createSelector(_this.columnSelector, function (x) { return x.map(function (y) { return y.key; }); });
        _this.gridState = reselect_1.createSelector(_this.originalGridState, _this.columnKeys, gridState_1.gridStateDefaultValues);
        _this.drillDownSelector = createShallowSelector(_this.gridState, function (x) { return x.drillDowns; });
        _this.effectiveColumnMap = createShallowSelector(_this.originalColumnMapSelector, _this.drillDownSelector, function (cols, dds) {
            console.log("Effective columns");
            return drillDowns_1.getEffectiveColumns(cols, dds);
        });
        _this.mapping = reselect_1.createSelector(_this.gridState, function (state) { return state.mapping; });
        _this.filtroOrdenColumnsSelector = reselect_1.createSelector(_this.effectiveColumnMap, _this.items, function (cols, items) { return keautils_1.promiseAllObj(keautils_1.mapObject(cols, function (value) { return filtrarOrdenar_1.gridColumnToFiltroOrdenColumn(items, value); })); });
        _this.itemsFiltroData = reselect_1.createSelector(_this.items, _this.filtroOrdenColumnsSelector, function (items, columnas) { return __awaiter(_this, void 0, void 0, function () {
            var _a, _b;
            return __generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        _a = filtrarOrdenar_1.getItemCellData;
                        return [4 /*yield*/, items];
                    case 1:
                        _b = [_c.sent()];
                        return [4 /*yield*/, columnas];
                    case 2: return [2 /*return*/, _a.apply(void 0, _b.concat([_c.sent()]))];
                }
            });
        }); });
        /**Obtiene todas las columnas efectivas del grid en el orden original */
        _this.effectiveColumns = reselect_1.createSelector(_this.effectiveColumnMap, _this.mapping, function (map, mapping) { return mapping.map(function (key) { return map[key]; }); });
        /**Obtiene los titulos de todas las columnas efectivas, en el orden original */
        _this.columnNames = reselect_1.createSelector(_this.effectiveColumnMap, function (cols) { return keautils_1.mapObject(cols, function (x) { return x.title; }); });
        _this.originalColumnCountSelector = reselect_1.createSelector(_this.columnSelector, function (x) { return x.length; });
        _this.filtroColumnasSelector = reselect_1.createSelector(_this.effectiveColumnMap, _this.items, function (columns, items) { return keautils_1.mapObject(columns, function (val) { return filtros_1.gridColumnToFiltroColumn(items, val); }); });
        _this.filtroColumnaValueSelector = reselect_1.createSelector(_this.gridState, function (state) { return state.filtroOrden.columna; });
        _this.onGridStateChangeSelector = function (props) { return props.onGridStateChange; };
        _this.filtroColumnaOnChangeSelector = reselect_1.createSelector(_this.onGridStateChangeSelector, _this.gridState, function (onGridStateChange, gridState) { return function (columna) { return onGridStateChange(__assign({}, gridState, { filtroOrden: __assign({}, gridState.filtroOrden, { columna: columna }) })); }; });
        _this.handleExportarCSV = function () { return __awaiter(_this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, csv_1.downloadCsv(this.items(this.props), this.gridState(this.props), this.effectiveColumnMap(this.props))];
                    case 1:
                        _a.sent();
                        return [2 /*return*/];
                }
            });
        }); };
        return _this;
    }
    GridControlled.prototype.render = function () {
        var props = this.props;
        var effectiveColumns = this.effectiveColumns(this.props);
        var originalColumnCount = this.originalColumnCountSelector(this.props);
        var filtros = React.createElement(filtros_1.FiltroListComponent, { columnas: this.filtroColumnasSelector(this.props), items: this.itemsFiltroData(props), value: this.filtroColumnaValueSelector(this.props), onChange: this.filtroColumnaOnChangeSelector(this.props) });
        var busqueda = React.createElement(busqueda_1.GridBusquedaComponent, { value: this.gridState(this.props), onChange: props.onGridStateChange, columnas: this.columnNames(this.props), onExpotar: this.handleExportarCSV });
        var grid = React.createElement(tableFiltro_1.GridTableFiltro, { effectiveColumns: this.effectiveColumnMap(props), getKey: props.getKey, gridState: this.gridState(this.props), items: this.itemsFiltroData(props), filtroOrdenColumnas: this.filtroOrdenColumnsSelector(props), onGridStateChange: props.onGridStateChange, sharedProps: props.sharedProps });
        return (React.createElement("div", null,
            filtros,
            !props.hideBusqueda && busqueda,
            grid));
    };
    return GridControlled;
}(React.PureComponent));
exports.Grid2 = react_rxk_1.componentToRx(HOC_1.MakeUncontrolledCookies("gridState", "onGridStateChange")(GridControlled));