Merge in ConfirmDialog changes

Author: eturner

README.md

@@ -28,6 +28,10 @@ Display complex data with our pie chart's drill in/out functionality, hover anim
 
 A simple single page modal that renders in it's own DOM tree and operates outside the render cycles of an application.
 
+#### [Confirm Dialog Component](./docs/confirmdialog.md)
+
+A page level component that displays a confirmation dialog to the user with OK/Cancel buttons.
+
 #### [Page Message Component](./docs/pagemessage.md)
 
 A page level component that animates in and out for success, error, warning, info, and custom messages.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-components",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "main": "dist/react-components.css",
   "keywords": [
     "react-component"
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/dataminr/react-components",
   "devDependencies": {
-    "expanded-react-test-utils": "0.1.0",
+    "expanded-react-test-utils": "0.2.0",
     "jasmine-expect": "1.22.3",
     "react-router": "0.13.3"
   },

dist/react-components.css

@@ -0,0 +1,79 @@
+# ConfirmDialog Component
+
+### Usage
+
+##### This component is not meant to be used directly. This leverages the portalMixins and is accessed by using the confirmDialog utility function.
+
+```
+title
+    type: string
+    required: false
+    description: The title to display in the modal dialog
+    
+subTitle
+    type: string
+    required: false
+    description: The subtitle to display within the dialog
+
+okHandler
+    type: function
+    required: false
+    description: Function handler to call when ok button is clicked. After this function is run the dialog will automatically be closed unless this method explicitly returns false.
+
+cancelHandler
+    type: function
+    required: false
+    description: Function handler to call when cancel button is clicked. After this function is run the dialog will automatically be closed unless this method explicitly returns false.
+    
+options
+    type: object
+    required: false
+    definition: Configuration overrides for button icons and labels.
+    
+    okButtonText
+        type: string
+        default: 'OK'
+        description: The label to display for the OK button
+
+    cancelButtonText
+        type: string
+        default: 'Cancel'
+        description: The label to display for the cancel button
+
+    okIconClasses
+        type: string
+        default: 'okButton fa fa-check'
+        description: The class names to use for the OK button icon. Set to null to remove icon.
+
+    cancelIconClasses
+        type: string
+        default: 'cancelButton fa fa-ban'
+        description: The class names to use for the cancel button icon. Set to null to remove icon.
+```
+
+#### Example Usage
+
+```javascript
+var Utils = require('drc/utils/Utils');
+
+Utils.confirmDialog('Confirm Delete', 'Are you sure you want to delete this?', function(){
+    //handle OK Click
+});
+
+Utils.confirmDialog('Are you sure you want to delete this?', null, function(){
+    //handle OK Click
+}, function(){
+    //handle cancel Click
+});
+
+Utils.confirmDialog('Are you sure you want to delete this?', null, function(){
+    //handle OK Click
+}, function(){
+    //handle cancel Click
+}, {
+    okButtonText: 'Confirm',
+    cancelButtonText: 'Nope',
+    okIconClasses: 'okButton fa fa-check-circle',
+    cancelIconClasses: null //Clear cancel icon
+});
+```

docs/confirmdialog.md

@@ -19,6 +19,12 @@ backgroundClickToClose
     default: true
     description: Used to control whether or not a click outside the modal will cause it to close
 
+showCloseIcon
+    type: boolean  
+    required: false
+    default: true
+    description: Used to control whether the modal should show a close text and icon in the top right. Also disables using the escape key to close the modal.
+
 iconClasses
     type: object
     required: false

docs/modal.md

@@ -11,7 +11,7 @@ var jasmineConfig = {
     compiledDir: 'src/compiled',
     paths: {
         'drc/lib/EventEmitter': '../../src/compiled/lib/EventEmitter',
-        ExpandedTestUtils: '../../bower_components/expanded-react-test-utils/dist/ExpandedTestUtils.min',
+        ExpandedTestUtils: '../../bower_components/expanded-react-test-utils/dist/ExpandedTestUtils',
         RequestHandler: '../../src/compiled/utils/RequestHandler'
     }
 };
@@ -54,7 +54,7 @@ module.exports = function(grunt, options) {
                             lines: 98,
                             statements: 98,
                             branches: 98,
-                            functions: 98
+                            functions: 97
                         } : {},
                         template: require('grunt-template-jasmine-requirejs'),
                         templateOptions: {
@@ -93,6 +93,7 @@ module.exports = function(grunt, options) {
             target: [
                 'src/**/*.js',
                 '!src/compiled/**/*.js',
+                '!src/js/examples/*.js',
                 '!src/js/tests/*.js',
                 '!src/js/lib/EventEmitter.js',
                 '!src/**/*.test.js'

grunt/test.js

@@ -1,6 +1,6 @@
 {
     "name": "react-components",
-    "version": "0.3.5",
+    "version": "0.4.0",
     "keywords": [
         "react-component"
     ],

package.json

@@ -144,6 +144,13 @@ define(function(require) {
                         )
                         );
                     break;
+                case 'confirmDialog':
+                    componentSet = (
+                        React.createElement("div", {className: "component modal"}, 
+                            React.createElement("button", {type: "button", onClick: this.showConfirmDialog}, "Confirm Dialog")
+                        )
+                    );
+                    break;
                 case 'pageMessage':
                     componentSet = (
                         React.createElement("div", {className: "component"}, 
@@ -201,7 +208,9 @@ define(function(require) {
                     React.createElement("div", {className: "sidebar"}, 
                         React.createElement("ul", {className: "nav no-select"}, 
                             React.createElement("li", {className: this.state.selectedComponentSet === 'modal' ? 'active' : null, 
-                            onClick: this.handleLinkClick.bind(this, 'modal')}, "Modal"), 
+                                onClick: this.handleLinkClick.bind(this, 'modal')}, "Modal"), 
+                            React.createElement("li", {className: this.state.selectedComponentSet === 'confirmDialog' ? 'active' : null, 
+                                onClick: this.handleLinkClick.bind(this, 'confirmDialog')}, "Confirm Dialog"), 
                             React.createElement("li", {className: this.state.selectedComponentSet === 'pageMessage' ? 'active' : null, 
                             onClick: this.handleLinkClick.bind(this, 'pageMessage')}, "Page Message"), 
                             React.createElement("li", {className: this.state.selectedComponentSet === 'piechart' ? 'active' : null, 
@@ -231,6 +240,10 @@ define(function(require) {
             );
         },
 
+        showConfirmDialog: function(){
+            Utils.confirmDialog('Confirm Delete', 'Are you sure you want to delete this?');
+        },
+
         handleBulkActionClick: function() {
             /* eslint-disable no-alert */
             alert('You have selected the following items from the table:\n\n' + TableStore.getSelectedItems('tableId'));

src/compiled/examples/App.js

@@ -15,12 +15,14 @@ define(function(require) {
             closeModalCallback: React.PropTypes.func,
             backgroundClickToClose: React.PropTypes.bool,
             iconClasses: React.PropTypes.object,
+            showCloseIcon: React.PropTypes.bool,
             title: React.PropTypes.string
         },
 
         getDefaultProps: function() {
             return {
-                backgroundClickToClose: true
+                backgroundClickToClose: true,
+                showCloseIcon: true
             };
         },
 
@@ -38,15 +40,29 @@ define(function(require) {
             this.refs.content.getDOMNode().focus();
         },
 
+        /**
+         * Gets markup to display close icon in upper right corner. Only returns markup if
+         * the showCloseIcon prop is set.
+         * @return {null|ReactElement} Icon markup or null
+         */
+        getCloseIconMarkup: function(){
+            if(!this.props.showCloseIcon){
+                return null;
+            }
+            return (
+                React.createElement("span", {className: "close", onClick: this.closeModalHandler}, 
+                    React.createElement("span", {className: "close-text"}, "esc to close"), " | ", React.createElement("i", {className: this.iconClasses.close})
+                )
+            );
+        },
+
         render: function() {
             return (
                 React.createElement("div", {onClick: this.backgroundClickHandler, id: "modal-container", 'data-clickcatcher': "true"}, 
                     React.createElement("div", {ref: "content", className: "content", tabIndex: "-1", onKeyDown: this.keyDownHandler}, 
                         React.createElement("div", {className: "header"}, 
                             React.createElement("span", {className: "title"}, this.props.title), 
-                            React.createElement("span", {className: "close", onClick: this.closeModalHandler}, 
-                                React.createElement("span", {className: "close-text"}, "esc to close"), " | ", React.createElement("i", {className: this.iconClasses.close})
-                            )
+                            this.getCloseIconMarkup()
                         ), 
                         React.createElement("div", {className: "body"}, 
                             this.props.children
@@ -57,12 +73,12 @@ define(function(require) {
         },
 
         /**
-         * If the key pressed is the escape key, the close modal handler will be called.
+         * If the key pressed is the escape key and the close icon is being shown, the close modal handler will be called.
          * @param {object} e - The simulated React event.
          */
         keyDownHandler: function(e) {
             // escape key pressed
-            if (e.keyCode === 27) {
+            if (e.keyCode === 27 && this.props.showCloseIcon) {
                 this.closeModalHandler(e);
             }
         },

src/compiled/modal/Modal.js

@@ -53,6 +53,20 @@ define(function(require) {
             });
         });
 
+        describe('getCloseIconMarkup', function(){
+            it('returns null when not showing icon', function(){
+                modal = React.render(React.createElement(Modal, React.__spread({},  props, {showCloseIcon: false}), React.createElement("span", {id: "text"}, "Text")), node);
+
+                expect(modal.getCloseIconMarkup()).toBeNull();
+            });
+
+            it('returns ReactElement for close content', function(){
+                modal = React.render(React.createElement(Modal, React.__spread({},  props), React.createElement("span", {id: "text"}, "Text")), node);
+
+                expect(modal.getCloseIconMarkup()).toBeObject();
+            });
+        });
+
         describe('keyDownHandler function', function() {
             it('should close the modal if the escape key is pressed', function() {
                 spyOn(modal.props, 'closeModalCallback');
@@ -65,6 +79,16 @@ define(function(require) {
 
                 expect(modal.props.closeModalCallback.calls.count()).toEqual(1);
             });
+
+            it('should do nothing if not showing close icon', function(){
+                modal = React.render(React.createElement(Modal, React.__spread({},  props, {showCloseIcon: false}), React.createElement("span", {id: "text"}, "Text")), node);
+
+                spyOn(modal, 'closeModalHandler');
+
+                TestUtils.Simulate.keyDown(document.activeElement, {keyCode: 27});
+
+                expect(modal.closeModalHandler).not.toHaveBeenCalled();
+            });
         });
 
         describe('backgroundClickHandler function', function() {

src/compiled/modal/tests/Modal.test.js

@@ -0,0 +1,92 @@
+define(function(require) {
+    'use strict';
+
+    var PortalMixins = require('drc/mixins/PortalMixins');
+    var React = require('react');
+    var _ = require('lodash');
+
+    var ConfirmDialog = React.createClass({displayName: 'ConfirmDialog',
+        propTypes: {
+            message: React.PropTypes.string,
+            okButtonText: React.PropTypes.string,
+            cancelButtonText: React.PropTypes.string,
+            okButtonClickHandler: React.PropTypes.func,
+            cancelButtonClickHandler: React.PropTypes.func,
+            okIconClasses: React.PropTypes.string,
+            cancelIconClasses: React.PropTypes.string
+        },
+
+        getDefaultProps: function() {
+            return {
+                okButtonText: 'OK',
+                cancelButtonText: 'Cancel',
+                okButtonClickHandler: function(){},
+                cancelButtonClickHandler: function(){},
+                okIconClasses: 'okButton fa fa-check',
+                cancelIconClasses: 'cancelButton fa fa-ban'
+            };
+        },
+
+        /**
+         * Closes the portal, but using async defer to delay the unmounting that happens. It does
+         * this because of this bug - https://github.com/facebook/react/issues/3298
+         */
+        closePortal: function(){
+            _.defer(function(){
+                PortalMixins.closePortal();
+            });
+        },
+
+        /**
+         * Handler for when OK button is clicked. Invokes the handler prop and if it doesn't
+         * return false, closes the portal.
+         */
+        handleOkClick: function(){
+            if(this.props.okButtonClickHandler() !== false){
+                this.closePortal();
+            }
+        },
+
+        /**
+         * Handler for when cancel button is clicked. Invokes the handler prop and if it doesn't
+         * return false, closes the portal.
+         */
+        handleCancelClick: function(){
+            if(this.props.cancelButtonClickHandler() !== false){
+                this.closePortal();
+            }
+        },
+
+        /**
+         * Gets markup for inner content of OK button with optional icon and
+         * button text.
+         * @param  {String} icon Classes for icon. No icon will be added if not set
+         * @param  {String} text Text label for button
+         * @return {Array}       Markup for button content
+         */
+        getButtonText: function(icon, text){
+            var markup = [];
+            if(icon){
+                markup.push(React.createElement("i", {className: icon, key: "icon"}));
+            }
+            markup.push(React.createElement("span", {key: "label"}, text));
+            return markup;
+        },
+
+        render: function() {
+            return (
+                React.createElement("div", {className: "confirm-dialog"}, 
+                    React.createElement("div", {className: "message"}, 
+                        this.props.message
+                    ), 
+                    React.createElement("div", {className: "confirm-buttons"}, 
+                        React.createElement("button", {className: "button", onClick: this.handleOkClick}, this.getButtonText(this.props.okIconClasses, this.props.okButtonText)), 
+                        React.createElement("button", {className: "button", onClick: this.handleCancelClick}, this.getButtonText(this.props.cancelIconClasses, this.props.cancelButtonText))
+                    )
+                )
+            );
+        }
+    });
+
+    return ConfirmDialog;
+});