Fixes #241 - Allow for custom dialog actions

docs/src/app/components/pages/components/dialog.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var mui = require('mui');
 var Dialog = mui.Dialog;
+var FlatButton = mui.FlatButton;
 var RaisedButton = mui.RaisedButton;
 var ComponentDoc = require('../../component-doc.jsx');
 
@@ -9,20 +10,29 @@ var DialogPage = React.createClass({
   render: function() {
 
     var code = 
-      'var dialogActions = [\n' +
-      '  { text: \'CANCEL\' },\n' +
-      '  { text: \'SUBMIT\', onClick: this._onDialogSubmit }\n' +
+      '//Standard Actions\n' +
+      'var standardActions = [\n' +
+      '  { text: \'Cancel\' },\n' +
+      '  { text: \'Submit\', onClick: this._onDialogSubmit }\n' +
       '];\n\n' +
-      '<Dialog title="Title" actions={dialogActions}>\n' +
-      '  This is an example of a dialog component built with Facebook\'s React and following \n' +
-      '  Google\'s Material Design principles.\n' +
+      '<Dialog title="Dialog With Standard Actions" actions={standardActions}>\n' +
+      '  The actions in this window are created from the json that\'s passed in. \n' +
+      '</Dialog>\n\n' +
+      '//Custom Actions\n' +
+      'var customActions = [\n' +
+      '  <FlatButton\n' +
+      '    label="Cancel"\n' +
+      '    secondary={true}\n' +
+      '    onTouchTap={this._handleCustomDialogCancel} />,\n' +
+      '  <FlatButton\n' +
+      '    label="Submit"\n' +
+      '    primary={true}\n' +
+      '    onTouchTap={this._handleCustomDialogSubmit} />\n' +
+      '];\n\n' +
+      '<Dialog title="Dialog With Custom Actions" actions={customActions}>\n' +
+      '  The actions in this window were passed in as an array of react objects.\n' +
       '</Dialog>\n';
 
-    var dialogActions = [
-      { text: 'CANCEL' },
-      { text: 'SUBMIT', onClick: this._onDialogSubmit }
-    ];
-
     var componentInfo = [
       {
         name: 'Props',
@@ -31,7 +41,7 @@ var DialogPage = React.createClass({
             name: 'actions',
             type: 'array',
             header: 'optional',
-            desc: 'JSON data representing the button actions to render.'
+            desc: 'This prop can be either a JSON object containing the actions to render, or an array of react objects.'
           },
           {
             name: 'contentClassName',
@@ -85,29 +95,65 @@ var DialogPage = React.createClass({
       }
     ];
 
+    var standardActions = [
+      { text: 'Cancel' },
+      { text: 'Submit', onClick: this._onDialogSubmit }
+    ];
+
+    var customActions = [
+      <FlatButton
+        label="Cancel"
+        secondary={true}
+        onTouchTap={this._handleCustomDialogCancel} />,
+      <FlatButton
+        label="Submit"
+        primary={true}
+        onTouchTap={this._handleCustomDialogSubmit} />
+    ];
+
     return (
       <ComponentDoc
         name="Dialog"
         code={code}
         componentInfo={componentInfo}>
 
-        <RaisedButton label="DEMO" onTouchTap={this._showDialog} />
+        <RaisedButton label="Standard Actions" onTouchTap={this.handleStandardDialogTouchTap} />
+        <br/><br/>
+        <RaisedButton label="Custom Actions" onTouchTap={this.handleCustomDialogTouchTap} />
+
         <Dialog
-          ref="dialogExample"
-          title="Title"
-          actions={dialogActions}>
+          ref="standardDialog"
+          title="Dialog With Standard Actions"
+          actions={standardActions}>
+          The actions in this window are created from the json that's passed in.
+        </Dialog>
 
-          This is an example of a dialog component built with Facebook's React and following 
-          Google's Material Design principles.
+        <Dialog
+          ref="customDialog"
+          title="Dialog With Custom Actions"
+          actions={customActions}>
+          The actions in this window were passed in as an array of react objects.
         </Dialog>
 
       </ComponentDoc>
     );
 
   },
 
-  _showDialog: function() {
-    this.refs.dialogExample.show();
+  _handleCustomDialogCancel: function() {
+    this.refs.customDialog.dismiss();
+  },
+
+  _handleCustomDialogSubmit: function() {
+    this.refs.customDialog.dismiss();
+  },
+
+  handleCustomDialogTouchTap: function() {
+    this.refs.customDialog.show();
+  },
+
+  handleStandardDialogTouchTap: function() {
+    this.refs.standardDialog.show();
   }
 
 });

src/js/dialog-window.jsx

@@ -3,6 +3,7 @@ var WindowListenable = require('./mixins/window-listenable.js');
 var CssEvent = require('./utils/css-event.js');
 var KeyCode = require('./utils/key-code.js');
 var Classable = require('./mixins/classable');
+var FlatButton = require('./flat-button.jsx');
 var Overlay = require('./overlay.jsx');
 var Paper = require('./paper.jsx');
 
@@ -50,7 +51,7 @@ var DialogWindow = React.createClass({
       'mui-is-shown': this.state.open
     });
     var contentClasses = 'mui-dialog-window-contents';
-    var actions = this._getActions();
+    var actions = this._getActionsContainer(this.props.actions);
 
     if (this.props.contentClassName) {
       contentClasses += ' ' + this.props.contentClassName;
@@ -94,27 +95,46 @@ var DialogWindow = React.createClass({
     if (this.props.onShow) this.props.onShow();
   },
 
-  _getActions: function() {
+  _addClassName: function(reactObject, className) {
+    var originalClassName = reactObject.props.className;
+
+    reactObject.props.className = originalClassName ?
+      originalClassName + ' ' + className : className;
+  },
+
+  _getAction: function(actionJSON, key) {
+    var onClickHandler = actionJSON.onClick ? actionJSON.onClick : this.dismiss;
+    return (
+      <FlatButton
+        key={key}
+        secondary={true}
+        onClick={onClickHandler}
+        label={actionJSON.text} />
+    );
+  },
+
+  _getActionsContainer: function(actions) {
     var actionContainer;
-    var actions = this.props.actions;
-    var actionClassName;
+    var actionObjects = [];
 
     if (actions.length) {
-
       for (var i = 0; i < actions.length; i++) {
-        actionClassName = actions[i].props.className;
+        currentAction = actions[i];
+
+        //if the current action isn't a react object, create one
+        if (!React.isValidElement(currentAction)) {
+          currentAction = this._getAction(currentAction, i);
+        }
 
-        actions[i].props.className = actionClassName ?
-          actionClassName + ' mui-dialog-window-action' :
-          'mui-dialog-window-action';
+        this._addClassName(currentAction, 'mui-dialog-window-action');
+        actionObjects.push(currentAction);
       };
 
       actionContainer = (
         <div className="mui-dialog-window-actions">
-          {actions}
+          {actionObjects}
         </div>
       );
-
     }
 
     return actionContainer;

src/js/dialog.jsx

@@ -1,39 +1,28 @@
 var React = require('react');
 var Classable = require('./mixins/classable');
 var DialogWindow = require('./dialog-window.jsx');
-var FlatButton = require('./flat-button.jsx');
 
 var Dialog = React.createClass({
 
   mixins: [Classable],
 
   propTypes: {
-    title: React.PropTypes.string,
-    actions: React.PropTypes.array
-  },
-
-  getDefaultProps: function() {
-    return {
-      actions: []
-    };
+    title: React.PropTypes.string
   },
 
   render: function() {
     var {
       className,
       title,
-      actions,
       ...other
     } = this.props;
     var classes = this.getClasses('mui-dialog');
-    var actions = this._getDialogActions();
 
     return (
       <DialogWindow
         {...other}
         ref="dialogWindow"
-        className={classes}
-        actions={actions}>
+        className={classes}>
 
         <h3 className="mui-dialog-title">{this.props.title}</h3>
         <div ref="dialogContent" className="mui-dialog-content">
@@ -50,19 +39,6 @@ var Dialog = React.createClass({
 
   show: function() {
     this.refs.dialogWindow.show();
-  },
-
-  _getDialogActions: function() {
-    return this.props.actions.map(function(a, index) {
-      var onClickHandler = a.onClick ? a.onClick : this.dismiss;
-      return (
-        <FlatButton
-          key={index}
-          secondary={true}
-          onClick={onClickHandler}
-          label={a.text} />
-      );
-    }.bind(this));
   }
 
 });