kea-react/dist/botones.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 async = require("./async");
var promiseEx_1 = require("./promiseEx");
var swal = require("sweetalert");
var react_rxk_1 = require("react-rxk");
var keautils_1 = require("keautils");
/**Boton que acepta un metodo asíncrono en el on-click y que se deshabilita mientras se esta
 * ejecutando la promesa
 */
var PromiseAction = /** @class */ (function (_super) {
    __extends(PromiseAction, _super);
    function PromiseAction(props) {
        var _this = _super.call(this, props) || this;
        _this.handleRequest = function () { return __awaiter(_this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.setState({ Promise: this.click() });
                return [2 /*return*/];
            });
        }); };
        _this.map = function () { return _this.props.buttonFactory(_this.handleRequest); };
        _this.state = { Promise: undefined };
        return _this;
    }
    PromiseAction.prototype.click = function () {
        return __awaiter(this, void 0, void 0, function () {
            var error_1;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        _a.trys.push([0, 3, , 9]);
                        if (!this.props.onClick) return [3 /*break*/, 2];
                        return [4 /*yield*/, this.props.onClick()];
                    case 1:
                        _a.sent();
                        _a.label = 2;
                    case 2: return [3 /*break*/, 9];
                    case 3:
                        error_1 = _a.sent();
                        //Espera que evita un bug del swal, si dos swals se lanzan uno seguido despues del otro la UI se queda pegada
                        return [4 /*yield*/, promiseEx_1.Delay(100)];
                    case 4:
                        //Espera que evita un bug del swal, si dos swals se lanzan uno seguido despues del otro la UI se queda pegada
                        _a.sent();
                        if (!(error_1 == 401)) return [3 /*break*/, 6];
                        return [4 /*yield*/, new Promise(function (resolve) { return swal({
                                title: "No autorizado",
                                text: "Su usuario no esta autorizado para realizar esta operación",
                                type: "error"
                            }, resolve); })];
                    case 5:
                        _a.sent();
                        return [3 /*break*/, 8];
                    case 6: return [4 /*yield*/, new Promise(function (resolve) { return swal({
                            title: "Error en la operación",
                            text: "Hubo un problema con la operación",
                            type: "error"
                        }, resolve); })];
                    case 7:
                        _a.sent();
                        _a.label = 8;
                    case 8: throw error_1;
                    case 9: return [2 /*return*/];
                }
            });
        });
    };
    PromiseAction.prototype.render = function () {
        var _this = this;
        var error = this.props.errorFactory && (function (error) { return _this.props.errorFactory(error, _this.handleRequest); });
        return (async.async(this.state.Promise, this.map, {
            cargando: this.props.cargandoComponent,
            error: error,
            delay: 0
        }));
    };
    return PromiseAction;
}(React.PureComponent));
exports.PromiseAction = PromiseAction;
;
/**Vista del botón de bootstrap, no soporta promesa */
var BootstrapButtonSync = /** @class */ (function (_super) {
    __extends(BootstrapButtonSync, _super);
    function BootstrapButtonSync() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BootstrapButtonSync.prototype.render = function () {
        var className = "btn btn-" +
            (this.props.style || "default") +
            (this.props.disabled ? " disabled" : "") +
            (this.props.block ? " btn-block" : "");
        return (React.createElement("button", { type: "button", className: className, title: this.props.tooltip, onClick: this.props.disabled ? undefined : this.props.onClick },
            this.props.iconClass && React.createElement("i", { className: this.props.iconClass }),
            " ",
            this.props.children));
    };
    return BootstrapButtonSync;
}(React.PureComponent));
var ButtonNoRx = /** @class */ (function (_super) {
    __extends(ButtonNoRx, _super);
    function ButtonNoRx() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.errorFactory = function (error, onClick) {
            return React.createElement(BootstrapButtonSync, { style: "danger", block: _this.props.block, onClick: onClick, iconClass: "fa fa-times", children: "Error", tooltip: error });
        };
        _this.buttonFactory = function (onClick, cargando) { return React.createElement(BootstrapButtonSync, { children: _this.props.children, disabled: _this.props.disabled || cargando, iconClass: cargando ? "fa fa-circle-o-notch fa-spin" : _this.props.iconClass, onClick: onClick, style: _this.props.style, block: _this.props.block, tooltip: _this.props.tooltip }); };
        return _this;
    }
    ButtonNoRx.prototype.render = function () {
        var _this = this;
        return (React.createElement(PromiseAction, { buttonFactory: function (onClick) { return _this.buttonFactory(onClick, false); }, errorFactory: this.errorFactory, cargandoComponent: this.buttonFactory(null, true), onClick: this.props.onClick }));
    };
    return ButtonNoRx;
}(React.PureComponent));
var ButtonRx = react_rxk_1.componentToRx(ButtonNoRx);
exports.Button = function (props) { return React.createElement(ButtonRx, __assign({}, props, { disabled: keautils_1.toObservable(props.disabled).startWith(true) })); };
var BootstrapButton = /** @class */ (function (_super) {
    __extends(BootstrapButton, _super);
    function BootstrapButton(props) {
        var _this = _super.call(this, props) || this;
        console.warn("BootstrapButton esta obsoleto. Utilice Button");
        return _this;
    }
    BootstrapButton.prototype.render = function () {
        return React.createElement(exports.Button, this.props, this.props.children);
    };
    return BootstrapButton;
}(React.PureComponent));
exports.BootstrapButton = BootstrapButton;
/**Botón de agregar*/
var AgregarButton = /** @class */ (function (_super) {
    __extends(AgregarButton, _super);
    function AgregarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    AgregarButton.prototype.render = function () {
        return (React.createElement(exports.Button, { disabled: this.props.disabled, onClick: this.props.onClick, block: this.props.block, style: "primary", iconClass: "fa fa-plus" }, "Agregar"));
    };
    return AgregarButton;
}(React.PureComponent));
exports.AgregarButton = AgregarButton;
/**Boton de guardar*/
var GuardarButton = /** @class */ (function (_super) {
    __extends(GuardarButton, _super);
    function GuardarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    GuardarButton.prototype.render = function () {
        return (React.createElement(exports.Button, { disabled: this.props.disabled, onClick: this.props.onClick, block: this.props.block, style: "success", iconClass: "fa fa-floppy-o" }, "Guardar"));
    };
    return GuardarButton;
}(React.PureComponent));
exports.GuardarButton = GuardarButton;
/**Boton de borrar*/
var BorrarButton = /** @class */ (function (_super) {
    __extends(BorrarButton, _super);
    function BorrarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BorrarButton.prototype.render = function () {
        return (React.createElement(exports.Button, { disabled: this.props.disabled, onClick: this.props.onClick, block: this.props.block, style: "danger", iconClass: "fa fa-trash-o" }, "Borrar"));
    };
    return BorrarButton;
}(React.PureComponent));
exports.BorrarButton = BorrarButton;
/**Boton de cancelar*/
var CancelarButton = /** @class */ (function (_super) {
    __extends(CancelarButton, _super);
    function CancelarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CancelarButton.prototype.render = function () {
        return (React.createElement(exports.Button, { disabled: this.props.disabled, onClick: this.props.onClick, block: this.props.block, style: "default", iconClass: "fa fa-ban" }, "Cancelar"));
    };
    return CancelarButton;
}(React.PureComponent));
exports.CancelarButton = CancelarButton;
/**Botón para buscar */
var BuscarButton = /** @class */ (function (_super) {
    __extends(BuscarButton, _super);
    function BuscarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BuscarButton.prototype.render = function () {
        return (React.createElement(exports.Button, __assign({}, this.props, { style: "info", iconClass: "fa fa-search" }), "Buscar"));
    };
    return BuscarButton;
}(React.PureComponent));
exports.BuscarButton = BuscarButton;
/**Boton para ir hacia atras en la navegación, si no se establece el on click, viaja hacia atras en la navegación
 * por default
 */
var RegresarButton = /** @class */ (function (_super) {
    __extends(RegresarButton, _super);
    function RegresarButton() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.handleOnClick = function () {
            window.history.back();
        };
        return _this;
    }
    RegresarButton.prototype.render = function () {
        return (React.createElement(exports.Button, { onClick: this.props.onClick || this.handleOnClick, block: this.props.block, style: "default", iconClass: "fa fa-chevron-left" }, "Regresar"));
    };
    return RegresarButton;
}(React.PureComponent));
exports.RegresarButton = RegresarButton;
/**Un botón con forma de un icono */
var Link = /** @class */ (function (_super) {
    __extends(Link, _super);
    function Link() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.buttonFactory = function (onClick, cargando) {
            var style = { margin: 3, cursor: "pointer", color: Link.colors[_this.props.style || "default"] };
            return (cargando ?
                React.createElement("a", { style: { margin: 3 } },
                    React.createElement("i", { className: "fa fa-circle-o-notch fa-spin" }))
                :
                    React.createElement("a", { onClick: onClick, title: _this.props.tooltip, style: style },
                        _this.props.iconClass && React.createElement("i", { className: _this.props.iconClass }),
                        " ",
                        _this.props.children));
        };
        _this.errorFactory = function (error, onClick) {
            return React.createElement("a", { onClick: onClick, title: "Error: " + error, style: { color: "red" } },
                React.createElement("i", { className: "fa fa-times" }));
        };
        return _this;
    }
    Link.prototype.render = function () {
        var _this = this;
        return (React.createElement(PromiseAction, { buttonFactory: function (onClick) { return _this.buttonFactory(onClick, false); }, cargandoComponent: this.buttonFactory(undefined, true), errorFactory: this.errorFactory, onClick: this.props.onClick }));
    };
    Link.colors = {
        default: undefined,
        primary: "#26b",
        success: "#1a5",
        info: "#26b",
        warning: "#dd2",
        danger: "#d22",
        link: "#26b",
    };
    return Link;
}(React.PureComponent));
exports.Link = Link;
var IconButton = /** @class */ (function (_super) {
    __extends(IconButton, _super);
    function IconButton(props) {
        var _this = _super.call(this, props) || this;
        console.warn("IconButton esta obsoleto, utilice la clase Link");
        return _this;
    }
    IconButton.prototype.render = function () {
        return React.createElement(Link, this.props, this.props.children);
    };
    return IconButton;
}(React.PureComponent));
exports.IconButton = IconButton;
/**Boton para borrar un elemento de un listado. Tiene el icono del bote de basura */
var BorrarIcon = /** @class */ (function (_super) {
    __extends(BorrarIcon, _super);
    function BorrarIcon() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BorrarIcon.prototype.render = function () {
        return React.createElement(Link, { onClick: this.props.onClick, iconClass: "fa fa-trash-o", tooltip: "Eliminar", style: "danger" });
    };
    return BorrarIcon;
}(React.PureComponent));
exports.BorrarIcon = BorrarIcon;
/**Boton para editar un elemento de un listado. Tiene el icono del lapiz */
var EditButton = /** @class */ (function (_super) {
    __extends(EditButton, _super);
    function EditButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    EditButton.prototype.render = function () {
        return React.createElement(Link, { onClick: this.props.onClick, iconClass: "fa fa-pencil", tooltip: "Editar", style: "primary" });
    };
    return EditButton;
}(React.PureComponent));
exports.EditButton = EditButton;
/**Botón para ver un elemento de un listado. Tiene el icono del ojo */
var VerButton = /** @class */ (function (_super) {
    __extends(VerButton, _super);
    function VerButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    VerButton.prototype.render = function () {
        return React.createElement(Link, { onClick: this.props.onClick, iconClass: "fa fa-eye", tooltip: "Ver", style: "primary" });
    };
    return VerButton;
}(React.PureComponent));
exports.VerButton = VerButton;
/**Botones de una fila de un catalogo, que son el de editar y el de borrar */
var RowButtons = /** @class */ (function (_super) {
    __extends(RowButtons, _super);
    function RowButtons() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    RowButtons.prototype.render = function () {
        return (React.createElement("span", null,
            this.props.onEdit && React.createElement(EditButton, { onClick: this.props.onEdit }),
            this.props.onDelete && React.createElement(BorrarIcon, { onClick: this.props.onDelete })));
    };
    return RowButtons;
}(React.PureComponent));
exports.RowButtons = RowButtons;