cosmo-ui - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

dist/example/modal-example.js

@@ -9,3 +9,5 @@ "use strict";
 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) {
@@ -39,2 +41,7 @@ tslib_1.__extends(_ModalExample, _super);
         var showInfoModal = function () { return _this.props.showInfoModal("This popup shows you some info!"); };
+        var showCustomModal = function () { return _this.props.showModal(CUSTOM_MODAL, {
+            closeButton: true,
+            backgroundActive: false,
+            count: 1,
+        }); };
         return (React.createElement(web_1.Column, null,
@@ -47,3 +54,4 @@ React.createElement(web_1.Row, { tooltip: "POTATO POTATO" },
                 React.createElement(web_1.Button, { onClick: showConfirmModal, condensed: true }, "Confirm Modal"),
-                React.createElement(web_1.Button, { onClick: showInfoModal, condensed: true }, "Info Modal"))));
+                React.createElement(web_1.Button, { onClick: showInfoModal, condensed: true }, "Info Modal"),
+                React.createElement(web_1.Button, { onClick: showCustomModal, condensed: true }, "Custom Modal"))));
     };
@@ -62,2 +70,34 @@ return _ModalExample;
 exports.ModalExample = ReactRedux.connect(mapStateToProps, mapActionsToProps)(_ModalExample);
+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(CUSTOM_MODAL, {
+            closeButton: true,
+            backgroundActive: false,
+            count: count + 1,
+        }); };
+        return (React.createElement("div", { className: styles.modalContent },
+            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!"))));
+    };
+    return _CustomModal;
+}(React.Component));
+var customStateToProps = function (state) { return ({}); };
+var customActionsToProps = {
+    showModal: ModalActions.showModal,
+};
+exports.CustomModal = ReactRedux.connect(customStateToProps, customActionsToProps)(_CustomModal);
+var CUSTOM_MODAL = 'CUSTOM_MODAL';
+Modal.registerModalComponent(CUSTOM_MODAL, exports.CustomModal);
 //# sourceMappingURL=modal-example.js.map

dist/reducers/modal.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var actions_1 = require("../actions");
+var tslib_1 = require("tslib");
+var ModalActions = require("../actions/modal");
 var initialModalState = {
     modalType: '',
-    modalProps: {}
+    modalProps: {},
+    modalHistory: [],
 };
@@ -11,9 +13,6 @@ exports.modalReducer = function (state, action) {
     switch (action.type) {
-        case actions_1.SHOW_MODAL:
-            return {
-                modalType: action.modalType,
-                modalProps: action.modalProps
-            };
-        case actions_1.HIDE_MODAL:
-            return initialModalState;
+        case ModalActions.SHOW_MODAL:
+            return showModal(state, action);
+        case ModalActions.HIDE_MODAL:
+            return hideModal(state, action);
         default:
@@ -23,2 +22,21 @@ return state;
 };
+var showModal = function (state, action) {
+    if (state === void 0) { state = initialModalState; }
+    var modalHistory = state.modalHistory.slice(0);
+    if (state.modalType !== '') {
+        modalHistory.push({ modalType: state.modalType, modalProps: state.modalProps });
+    }
+    return tslib_1.__assign({}, state, { modalType: action.modalType, modalProps: action.modalProps, modalHistory: modalHistory });
+};
+var hideModal = function (state, action) {
+    if (state === void 0) { state = initialModalState; }
+    var modalHistory = state.modalHistory.slice(0);
+    var oldState = (modalHistory.length > 0) ? modalHistory.pop() : null;
+    if (oldState) {
+        return tslib_1.__assign({}, state, { modalType: oldState.modalType, modalProps: oldState.modalProps, modalHistory: modalHistory });
+    }
+    else {
+        return initialModalState;
+    }
+};
 //# sourceMappingURL=modal.js.map

package.json

 {
   "name": "cosmo-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Common React components",
@@ -5,0 +5,0 @@ "main": "./index.js",

src/actions/modal.ts

@@ -24,10 +24,10 @@ import * as Constants from '../constants'
 
-export const showConfirmModal = (message :string, callback: ()=> any) => {
-    const props = {message, buttons: [{ label: "ok", callback: callback}, { label: "cancel" }], backgroundActive: false }
+export const showConfirmModal = (message: string, callback: () => any) => {
+    const props = { message, buttons: [{ label: "ok", callback: callback }, { label: "cancel" }], backgroundActive: false }
     return showModal(Constants.MODAL_MESSAGE, props)
 }
 
-export const showInfoModal = (message :string) => {
-    const props = {message, buttons: [{ label: "ok"}], backgroundActive: false, iconClass:"info" }
+export const showInfoModal = (message: string) => {
+    const props = { message, buttons: [{ label: "ok" }], backgroundActive: false, iconClass: "info" }
     return showModal(Constants.MODAL_ICON_MESSAGE, props)
 }

src/data/modal.ts

@@ -1,2 +0,6 @@
-export interface ModalState {
+export interface ModalState extends ModalHistory {
+    modalHistory: ModalHistory[],
+}
+
+export interface ModalHistory {
     modalType: string,
@@ -3,0 +7,0 @@ modalProps: any,

src/reducers/modal.ts

@@ -1,2 +0,2 @@
-import { ModalAction, SHOW_MODAL, HIDE_MODAL } from '../actions'
+import * as ModalActions from '../actions/modal'
 import { ModalState } from '../data'
@@ -6,17 +6,36 @@
     modalType: '',
-    modalProps: {}
+    modalProps: {},
+    modalHistory: [],
 }
 
-export const modalReducer = (state = initialModalState, action: ModalAction): ModalState => {
+export const modalReducer = (state = initialModalState, action: ModalActions.ModalAction): ModalState => {
     switch (action.type) {
-        case SHOW_MODAL:
-            return {
-                modalType: action.modalType,
-                modalProps: action.modalProps
-            } as ModalState
-        case HIDE_MODAL:
-            return initialModalState
+        case ModalActions.SHOW_MODAL:
+            return showModal(state, action)
+        case ModalActions.HIDE_MODAL:
+            return hideModal(state, action)
         default:
             return state
     }
+}
+
+const showModal = (state = initialModalState, action: ModalActions.ShowModalAction) => {
+    let modalHistory = state.modalHistory.slice(0)
+
+    if (state.modalType !== '') {
+        modalHistory.push({ modalType: state.modalType, modalProps: state.modalProps })
+    }
+
+    return { ...state, modalType: action.modalType, modalProps: action.modalProps, modalHistory }
+}
+
+const hideModal = (state = initialModalState, action: ModalActions.HideModalAction) => {
+    let modalHistory = state.modalHistory.slice(0)
+    let oldState = (modalHistory.length > 0) ? modalHistory.pop() : null
+
+    if (oldState) {
+        return { ...state, modalType: oldState.modalType, modalProps: oldState.modalProps, modalHistory }
+    } else {
+        return initialModalState
+    }
 }

No alert changes

Improved metrics

Total package byte prevSize

776912

increased by2.22%

Number of package files

350

increased by0.29%

Lines of code

4891

increased by2.34%

No dependency changes