cosmo-ui/dist/example/modal-example.js

Common React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:jsx-no-lambda */
var React = require("react");
var react_redux_1 = require("react-redux");
var modal_1 = require("../actions/modal");
var Reducers = require("../reducers");
var Constants = require("../constants");
var Modal = require("../web/modal");
var web_1 = require("../web");
var styles = require('../../src/styles/example/modal-example.scss');
var _ModalExample = (function (_super) {
    tslib_1.__extends(_ModalExample, _super);
    function _ModalExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    _ModalExample.prototype.render = function () {
        var _this = this;
        var showBasicModal = function () { return _this.props.showBasicModal('This is the basic modal, there is a close button & the background is active.'); };
        var showMessageModal = function () { return _this.props.showMessageModal('This is a showMessageModal modal'); };
        var showIconMessageModal = function () { return _this.props.showIconMessageModal('This is a showIconMessageModal modal', 'info'); };
        var showConfirmModal = function () { return _this.props.showModal(CUSTOM_CONFIRM_MODAL_KEY); };
        var showCustomModal = function () { return _this.props.showModal(RANDOM_CUSTOM_MODAL_KEY, {
            count: 1,
        }); };
        return (React.createElement(web_1.Column, { fullWidth: true },
            React.createElement(web_1.Row, null,
                React.createElement(web_1.ButtonBar, null,
                    React.createElement(web_1.Button, { onClick: showBasicModal, condensed: true }, "showBasicModal"),
                    React.createElement(web_1.Button, { onClick: showMessageModal, condensed: true }, "showMessageModal"),
                    React.createElement(web_1.Button, { onClick: showIconMessageModal, condensed: true }, "showIconMessageModal"),
                    React.createElement(web_1.Button, { onClick: showConfirmModal, condensed: true }, "Confirm Modal"),
                    React.createElement(web_1.Button, { onClick: showCustomModal, condensed: true }, "Custom Modal")))));
    };
    return _ModalExample;
}(React.Component));
var mapStateToProps = function (state) { return ({
    state: state[Reducers.MODAL_REDUCER_KEY],
}); };
var mapActionsToProps = {
    showModal: modal_1.showModal,
    hideModal: modal_1.hideModal,
    showBasicModal: modal_1.showBasicModal,
    showMessageModal: modal_1.showMessageModal,
    showIconMessageModal: modal_1.showIconMessageModal,
};
exports.ModalExample = react_redux_1.connect(mapStateToProps, mapActionsToProps)(_ModalExample);
// 2 EXAMPLES OF CUSTOM MODALS
var CUSTOM_CONFIRM_MODAL_KEY = 'CUSTOM_CONFIRM_MODAL_KEY';
var RANDOM_CUSTOM_MODAL_KEY = 'RANDOM_CUSTOM_MODAL_KEY';
var CustomConfirmModal = function () { return (React.createElement(web_1.ConfirmModal, { icon: "info", onConfirm: function () { return console.log('Confirming!'); }, onCancel: function () { return console.log('Cancelling!'); } }, "This is a confirm modal with an icon and some optional handlers.")); };
var _CustomModal = (function (_super) {
    tslib_1.__extends(_CustomModal, _super);
    function _CustomModal() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    _CustomModal.prototype.render = function () {
        var _this = this;
        var state = this.props.state;
        var props = state.modalProps;
        var count = props.count;
        var openAnotherModal = function () { return _this.props.showModal(RANDOM_CUSTOM_MODAL_KEY, {
            closeButton: true,
            backgroundActive: false,
            count: count + 1,
        }); };
        return (React.createElement(web_1.ModalPopup, null,
            React.createElement(web_1.ModalPopupContent, null,
                React.createElement(web_1.Column, { align: "center" },
                    React.createElement(web_1.Row, { tooltip: "POTATO POTATO" },
                        "This is a custom modal component. Number ",
                        count,
                        " in chain"),
                    React.createElement(web_1.Row, null,
                        React.createElement(web_1.Button, { onClick: openAnotherModal, condensed: true }, "Open Another Modal!")))),
            React.createElement(web_1.ButtonBar, null,
                React.createElement(web_1.Button, { onClick: this.props.closeModal }, "Close"))));
    };
    return _CustomModal;
}(React.Component));
var customStateToProps = function (state) { return ({}); };
var customActionsToProps = {
    showModal: modal_1.showModal,
};
var CustomModal = react_redux_1.connect(customStateToProps, customActionsToProps)(_CustomModal);
// NOT SURE ABOUT WHETHER THESE SHOULD BE PRE-REGISTERED
console.log('REGISTERING MODALS', web_1.BasicModal, web_1.MessageModal);
Modal.registerModalComponent(Constants.BASIC_MODAL_KEY, web_1.BasicModal);
Modal.registerModalComponent(Constants.MESSAGE_MODAL_KEY, web_1.MessageModal);
Modal.registerModalComponent(RANDOM_CUSTOM_MODAL_KEY, CustomModal);
Modal.registerModalComponent(CUSTOM_CONFIRM_MODAL_KEY, CustomConfirmModal);
/* tslint:enable:jsx-no-lambda */ 
//# sourceMappingURL=modal-example.js.map