cosmo-ui - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/actions/modal.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var Constants = require("../constants");
 exports.SHOW_MODAL = '@@cosmo-ui/SHOW_MODAL';
@@ -12,2 +13,10 @@ exports.HIDE_MODAL = '@@cosmo-ui/HIDE_MODAL';
 };
+exports.showConfirmModal = function (message, callback) {
+    var props = { message: message, buttons: [{ label: "ok", callback: callback }, { label: "cancel" }], backgroundActive: false };
+    return exports.showModal(Constants.MODAL_MESSAGE, props);
+};
+exports.showInfoModal = function (message) {
+    var props = { message: message, buttons: [{ label: "ok" }], backgroundActive: false, iconClass: "info" };
+    return exports.showModal(Constants.MODAL_ICON_MESSAGE, props);
+};
 //# sourceMappingURL=modal.js.map

dist/constants/index.js

@@ -12,2 +12,3 @@ "use strict";
 __export(require("./row"));
+__export(require("./modal"));
 //# sourceMappingURL=index.js.map

dist/example/index.js

@@ -9,2 +9,3 @@ "use strict";
 __export(require("./dropdown-example"));
+__export(require("./modal-example"));
 //# sourceMappingURL=index.js.map

dist/example/modal-example.js

@@ -5,68 +5,56 @@ "use strict";
 var React = require("react");
+var ReactRedux = require("react-redux");
+var ModalActions = require("../actions/modal");
+var Reducers = require("../reducers");
+var Constants = require("../constants");
 var web_1 = require("../web");
-var doNothing = function (e) { return e.preventDefault(); };
-var TestModal = (function (_super) {
-    tslib_1.__extends(TestModal, _super);
-    function TestModal(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleInputChange = function (e) {
-            console.log('changing', e.currentTarget.value);
-            e.preventDefault();
-            _this.setState({ inputVal: e.currentTarget.value });
-        };
-        _this.state = {
-            inputVal: '',
-        };
-        return _this;
+var _ModalExample = (function (_super) {
+    tslib_1.__extends(_ModalExample, _super);
+    function _ModalExample() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    /* tslint:disable:max-line-length */
-    TestModal.prototype.render = function () {
-        return (React.createElement(web_1.Modal, null,
-            React.createElement(web_1.Column, null,
-                React.createElement("p", null,
-                    "Are you sure you want to ",
-                    React.createElement("br", null),
-                    "Un-Allocate the ",
-                    React.createElement("strong", null, "Smart Allocated"),
-                    " job from this courier? "),
-                React.createElement("p", null, "or"),
-                React.createElement("p", null,
-                    React.createElement("strong", null, "Re-allocate"),
-                    " to new driver"),
-                React.createElement(web_1.Row, null,
-                    React.createElement("input", { placeholder: "Enter Courier CallSign", value: this.state.inputVal, onChange: this.handleInputChange })),
-                React.createElement("p", null,
-                    React.createElement("textarea", { placeholder: "Please enter the reason for Un-Allocating the job." })))));
-    };
-    /* tslint:enable:max-line-length */
-    TestModal.prototype.isValid = function () {
-        var inputVal = this.state.inputVal;
-        return inputVal.toLowerCase() === 'a074';
-    };
-    return TestModal;
-}(React.Component));
-var ModalExample = (function (_super) {
-    tslib_1.__extends(ModalExample, _super);
-    function ModalExample(props) {
-        var _this = _super.call(this, props) || this;
-        _this.showModal = function () {
-            _this.setState({ showModal: true });
+    _ModalExample.prototype.render = function () {
+        var _this = this;
+        var showModal2Validate = function () {
+            return false;
         };
-        _this.hideModal = function () {
-            _this.setState({ showModal: false });
+        var showModal2Click = function () {
+            _this.props.hideModal();
         };
-        _this.state = {
-            showModal: false,
-        };
-        return _this;
-    }
-    ModalExample.prototype.render = function () {
+        var showModal1 = function () { return _this.props.showModal(Constants.MODAL_MESSAGE, {
+            message: "Hello this is MODAL_MESSAGE 1. It has 0 buttons, the close button & the background is inactive.",
+            closeButton: true,
+            backgroundActive: false,
+        }); };
+        var showModal2 = function () { return _this.props.showModal(Constants.MODAL_MESSAGE, {
+            message: "Hello this is MODAL_MESSAGE 2. It has 3 buttons, no close button & the background is inactive.",
+            buttons: [{ label: "ok", callback: showModal2Click, validate: showModal2Validate }, { label: "close", callback: showModal2Click }, { label: "close no callback" }],
+            backgroundActive: false,
+        }); };
+        var showModal3 = function () { return _this.props.showModal(Constants.MODAL_MESSAGE, {
+            message: "Hello this is MODAL_MESSAGE 3. It has no buttons, no close button & the background is active.",
+        }); };
+        var showConfirmModal = function () { return _this.props.showConfirmModal("Would you like to proceed?", showModal2Click); };
+        var showInfoModal = function () { return _this.props.showInfoModal("This popup shows you some info!"); };
         return (React.createElement(web_1.Column, null,
             React.createElement(web_1.Row, { tooltip: "POTATO POTATO" },
-                React.createElement(web_1.Button, { onClick: this.showModal, condensed: true }, "Show Modal")),
-            React.createElement(TestModal, { show: this.state.showModal, onHide: this.hideModal })));
+                React.createElement(web_1.Button, { onClick: showModal1, condensed: true }, "Show Modal 1"),
+                React.createElement(web_1.Button, { onClick: showModal2, condensed: true }, "Show Modal 2"),
+                React.createElement(web_1.Button, { onClick: showModal3, condensed: true }, "Show Modal 3")),
+            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"))));
     };
-    return ModalExample;
+    return _ModalExample;
 }(React.Component));
-exports.ModalExample = ModalExample;
+var mapStateToProps = function (state) { return ({
+    state: state[Reducers.MODAL_REDUCER_KEY],
+}); };
+var mapActionsToProps = {
+    showModal: ModalActions.showModal,
+    hideModal: ModalActions.hideModal,
+    showConfirmModal: ModalActions.showConfirmModal,
+    showInfoModal: ModalActions.showInfoModal,
+};
+exports.ModalExample = ReactRedux.connect(mapStateToProps, mapActionsToProps)(_ModalExample);
 //# sourceMappingURL=modal-example.js.map

dist/index.js

 "use strict";
-var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var React = require("react");
+var redux_1 = require("redux");
 var ReactDOM = require("react-dom");
-var redux_1 = require("redux");
 var redux_logger_1 = require("redux-logger");
 var react_redux_1 = require("react-redux");
-var reducers_1 = require("reducers");
+var reducers_1 = require("./reducers");
 var web_1 = require("./web");
 var example_1 = require("./example");
-var store = redux_1.createStore(redux_1.combineReducers(tslib_1.__assign({}, reducers_1.cosmoUiReducers)), redux_1.applyMiddleware(redux_logger_1.default));
+var redux_devtools_extension_1 = require("redux-devtools-extension");
+var composeEnhancers = redux_devtools_extension_1.composeWithDevTools({});
+var store = redux_1.createStore(redux_1.combineReducers(tslib_1.__assign({}, reducers_1.cosmoUiReducers)), composeEnhancers(redux_1.applyMiddleware(redux_logger_1.default)));
+console.log('INITIALIZE STORE', store.getState());
 var App = (function (_super) {
@@ -20,17 +22,14 @@ tslib_1.__extends(App, _super);
     App.prototype.render = function () {
+        console.log("RENDER APP", store);
         return (React.createElement(react_redux_1.Provider, { store: store },
             React.createElement(web_1.Container, null,
+                React.createElement(web_1.ModalRoot, null),
                 React.createElement(example_1.TrayExample, null),
                 React.createElement(example_1.DropdownExample, null),
-                React.createElement(example_1.FormExample, null))));
+                React.createElement(example_1.FormExample, null),
+                React.createElement(example_1.ModalExample, null))));
     };
     return App;
 }(React.Component));
-var initialize = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-    return tslib_1.__generator(this, function (_a) {
-        ReactDOM.render(React.createElement(App, null), document.getElementById('mount'));
-        return [2 /*return*/];
-    });
-}); };
-initialize();
+ReactDOM.render(React.createElement(App, null), document.getElementById('mount'));
 //# sourceMappingURL=index.js.map

dist/web/modal.js

@@ -7,30 +7,94 @@ "use strict";
 var ModalActions = require("../actions/modal");
+var ModalConstants = require("../constants/modal");
+var reducers_1 = require("../reducers");
+var icon_1 = require("./icon");
 var styles = require('../../src/styles/components/modal.scss');
-var _Modal = (function (_super) {
-    tslib_1.__extends(_Modal, _super);
-    function _Modal() {
+var MessageModal = (function (_super) {
+    tslib_1.__extends(MessageModal, _super);
+    function MessageModal() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MessageModal.prototype.render = function () {
+        var state = this.props.state;
+        var props = state.modalProps;
+        return (React.createElement("div", { className: styles.modalContent }, props.message));
+    };
+    return MessageModal;
+}(React.Component));
+var IconMessageModal = (function (_super) {
+    tslib_1.__extends(IconMessageModal, _super);
+    function IconMessageModal() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconMessageModal.prototype.render = function () {
+        var state = this.props.state;
+        var props = state.modalProps;
+        return (React.createElement("div", { className: styles.modalContent },
+            React.createElement("div", { className: styles.modalIcon },
+                React.createElement(icon_1.Icon, { size: 32, icon: props.iconClass })),
+            React.createElement("div", { className: styles.modalMessage },
+                " ",
+                props.message,
+                " ")));
+    };
+    return IconMessageModal;
+}(React.Component));
+var MODAL_COMPONENTS = {};
+exports.registerModalComponent = function (id, component) {
+    MODAL_COMPONENTS[id] = component;
+};
+exports.registerModalComponent(ModalConstants.MODAL_MESSAGE, MessageModal);
+exports.registerModalComponent(ModalConstants.MODAL_ICON_MESSAGE, IconMessageModal);
+var _ModalRoot = (function (_super) {
+    tslib_1.__extends(_ModalRoot, _super);
+    function _ModalRoot() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.handleContainerClick = function (e) {
-            _this.props.closeModal();
+            var isActive = (_this.props.state.modalProps.backgroundActive === undefined || _this.props.state.modalProps.backgroundActive);
+            if (isActive) {
+                e.stopPropagation();
+                _this.props.closeModal();
+            }
         };
+        _this.renderButton = function (button) {
+            if (!button.validate)
+                button.validate = function () { return (true); };
+            var fullCallback = function () {
+                button.callback();
+                _this.props.closeModal();
+            };
+            var callback = (button.callback) ? fullCallback : _this.props.closeModal;
+            return (React.createElement("button", { key: button.label, onClick: callback, disabled: !button.validate() }, button.label.toUpperCase()));
+        };
         return _this;
     }
-    _Modal.prototype.render = function () {
+    _ModalRoot.prototype.render = function () {
+        var _this = this;
         var state = this.props.state;
-        if (state.modalType === '')
+        var props = state.modalProps;
+        if (!state || state.modalType === '')
             return null;
-        return (React.createElement("div", { className: styles.container, onClick: this.handleContainerClick },
-            React.createElement("div", { className: styles.popup },
-                React.createElement("div", { className: styles.content }, "content"),
-                React.createElement("div", { className: styles.footer }, "buttons"))));
+        var SpecificModal = MODAL_COMPONENTS[state.modalType];
+        if (!SpecificModal)
+            return null;
+        var buttons = (props.buttons) ? props.buttons : [];
+        var buttonsNode = (buttons.length > 0) ? React.createElement("div", { className: styles.modalButtons }, buttons.map(function (button) { return _this.renderButton(button); }))
+            : null;
+        var closeButtonNode = (props.closeButton) ? React.createElement("a", { className: styles.close, onClick: this.props.closeModal },
+            React.createElement("span", null, '\u00D7')) : null;
+        return (React.createElement("div", { className: styles.modalContainer, onClick: this.handleContainerClick },
+            React.createElement("div", { className: styles.modalPopup },
+                closeButtonNode,
+                React.createElement(SpecificModal, tslib_1.__assign({}, this.props)),
+                buttonsNode)));
     };
-    return _Modal;
+    return _ModalRoot;
 }(React.Component));
 var mapStateToProps = function (state) { return ({
-    state: state.modal,
+    state: state[reducers_1.MODAL_REDUCER_KEY],
 }); };
 var mapActionsToProps = {
-    closeModalPopup: ModalActions.hideModal,
+    closeModal: ModalActions.hideModal,
 };
-exports.Modal = ReactRedux.connect(mapStateToProps, mapActionsToProps)(_Modal);
+exports.ModalRoot = ReactRedux.connect(mapStateToProps, mapActionsToProps)(_ModalRoot);
 //# sourceMappingURL=modal.js.map

index.d.ts

@@ -25,3 +25,3 @@ import { Component } from 'react'
 export class ListItem extends Component<I.ListItemProps, any>{ }
-export class Modal extends Component<I.ModalProps, any>{ }
+export class ModalRoot extends Component<I.ModalRootProps, any>{ }
 export class NumberInput extends Component<I.NumberInputProps, any>{ }
@@ -28,0 +28,0 @@ export class RadioButton extends Component<I.RadioButtonProps, any>{ }

package.json

 {
   "name": "cosmo-ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Common React components",
@@ -65,3 +65,3 @@ "main": "./index.js",
     "raw-loader": "^0.5.1",
-    "react": "^15.4.0",
+    "react": "15.4.0",
     "react-dom": "15.4.0",
@@ -73,2 +73,3 @@ "react-hot-loader": "^1.3.1",
     "redux": "^3.6.0",
+    "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.6",
@@ -75,0 +76,0 @@ "resolve-url-loader": "^2.0.0",

src/actions/modal.ts

@@ -0,1 +1,3 @@
+import * as Constants from '../constants'
+
 export interface ShowModalAction {
@@ -21,1 +23,11 @@ type: "@@cosmo-ui/SHOW_MODAL",
     ({ type: HIDE_MODAL })
+
+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" }
+    return showModal(Constants.MODAL_ICON_MESSAGE, props)
+}

src/constants/index.ts

@@ -7,1 +7,2 @@ export * from './column'
 export * from './row'
+export * from './modal'

src/data/modal.ts

@@ -5,1 +5,13 @@ export interface ModalState {
 }
+
+export interface ModalCommonProps {
+    buttons?: ModalButton[],
+    backgroundActive?: boolean,
+    closeButton?: boolean,
+}
+
+export interface ModalButton {
+    label: string
+    validate?: () => any
+    callback?: () => any
+}

src/example/index.ts

 export * from './form-example'
 export * from './tray-example'
-export * from './dropdown-example'
+export * from './dropdown-example'
+export * from './modal-example'

src/interfaces/modal.ts

@@ -17,1 +17,6 @@ import { StylableComponent } from '.'
 }
+
+export interface ModalRootProps {
+    state: ModalState
+    closeModal: () => any
+}

No alert changes

Improved metrics

Total package byte prevSize

760036

increased by9.79%

Worsened metrics

Dev dependency count

63

increased by1.61%

Number of package files

349

decreased by-3.86%

Lines of code

4779

decreased by-0.31%

No dependency changes