Merge pull request mui#1996 from JorgenEvens/feature/dialog-show-prop

[Dialog] Allow open state of dialog to be controlled through the show prop

Author: oliviertassinari

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

@@ -11,6 +11,9 @@ export default class DialogPage extends React.Component {
     super();
     this.state = {
       modal: false,
+      showDialogStandardActions: false,
+      showDialogCustomActions: false,
+      showDialogScrollable: false,
     };
     this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this);
     this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this);
@@ -19,6 +22,7 @@ export default class DialogPage extends React.Component {
     this._handleCustomDialogTouchTap = this._handleCustomDialogTouchTap.bind(this);
     this._handleStandardDialogTouchTap = this._handleStandardDialogTouchTap.bind(this);
     this._handleScrollableDialogTouchTap = this._handleScrollableDialogTouchTap.bind(this);
+    this._handleRequestClose = this._handleRequestClose.bind(this);
     this._handleToggleChange = this._handleToggleChange.bind(this);
   }
 
@@ -69,8 +73,20 @@ export default class DialogPage extends React.Component {
             name: 'openImmediately',
             type: 'bool',
             header: 'default: false',
+            desc: 'Deprecated: Set to true to have the dialog automatically open on mount.',
+          },
+          {
+            name: 'defaultIsOpen',
+            type: 'bool',
+            header: 'default: false',
             desc: 'Set to true to have the dialog automatically open on mount.',
           },
+          {
+            name: 'isOpen',
+            type: 'bool',
+            header: 'default: null',
+            desc: 'Controls whether the Dialog is opened or not.',
+          },
           {
             name: 'title',
             type: 'node',
@@ -95,16 +111,6 @@ export default class DialogPage extends React.Component {
       {
         name: 'Methods',
         infoArray: [
-          {
-            name: 'dismiss',
-            header: 'Dialog.dismiss()',
-            desc: 'Hides the dialog.',
-          },
-          {
-            name: 'show',
-            header: 'Dialog.show()',
-            desc: 'Shows the dialog.',
-          },
           {
             name: 'isOpen',
             header: 'Dialog.isOpen()',
@@ -116,14 +122,9 @@ export default class DialogPage extends React.Component {
         name: 'Events',
         infoArray: [
           {
-            name: 'onDismiss',
-            header: 'function()',
-            desc: 'Fired when the dialog is dismissed.',
-          },
-          {
-            name: 'onShow',
-            header: 'function()',
-            desc: 'Fired when the dialog is shown.',
+            name: 'onRequestClose',
+            header: 'function(buttonClicked)',
+            desc: 'Fired when the dialog is requested to be closed by a click outside the dialog or on the buttons.',
           },
         ],
       },
@@ -175,15 +176,17 @@ export default class DialogPage extends React.Component {
             title="Dialog With Standard Actions"
             actions={standardActions}
             actionFocus="submit"
-            modal={this.state.modal}>
+            isOpen={this.state.showDialogStandardActions}
+            onRequestClose={this._handleRequestClose}>
             The actions in this window are created from the json that's passed in.
           </Dialog>
 
           <Dialog
             ref="customDialog"
             title="Dialog With Custom Actions"
             actions={customActions}
-            modal={this.state.modal}>
+            isOpen={this.state.showDialogCustomActions}
+            onRequestClose={this._handleRequestClose}>
             The actions in this window were passed in as an array of react objects.
           </Dialog>
           <div style={{width: '300px', margin: '0 auto', paddingTop: '20px'}}>
@@ -196,9 +199,10 @@ export default class DialogPage extends React.Component {
             ref="scrollableContentDialog"
             title="Dialog With Scrollable Content"
             actions={scrollableCustomActions}
-            modal={this.state.modal}
             autoDetectWindowHeight={true}
-            autoScrollBodyContent={true}>
+            autoScrollBodyContent={true}
+            isOpen={this.state.showDialogScrollable}
+            onRequestClose={this._handleRequestClose}>
             <div style={{height: '1000px'}}>
               Really long content
             </div>
@@ -214,35 +218,58 @@ export default class DialogPage extends React.Component {
   }
 
   _handleCustomDialogCancel() {
-    this.refs.customDialog.dismiss();
+    this.setState({
+      showDialogCustomActions: true,
+    });
   }
 
   _handleCustomDialogSubmit() {
-    this.refs.customDialog.dismiss();
+    this.setState({
+      showDialogCustomActions: true,
+    });
   }
 
   _handleToggleChange(e, toggled) {
     this.setState({modal: toggled});
   }
 
   _handleScrollableDialogCancel() {
-    this.refs.scrollableContentDialog.dismiss();
+    this.setState({
+      showDialogScrollable: false,
+    });
   }
 
   _handleScrollableDialogSubmit() {
-    this.refs.scrollableContentDialog.dismiss();
+    this.setState({
+      showDialogScrollable: false,
+    });
   }
 
   _handleCustomDialogTouchTap() {
-    this.refs.customDialog.show();
+    this.setState({
+      showDialogScrollable: true,
+    });
   }
 
   _handleStandardDialogTouchTap() {
-    this.refs.standardDialog.show();
+    this.setState({
+      showDialogStandardActions: true,
+    });
   }
 
   _handleScrollableDialogTouchTap() {
-    this.refs.scrollableContentDialog.show();
+    this.setState({
+      showDialogScrollable: true,
+    });
+  }
+
+  _handleRequestClose(buttonClicked) {
+    if (!buttonClicked && this.state.modal) return;
+    this.setState({
+      showDialogStandardActions: false,
+      showDialogCustomActions: false,
+      showDialogScrollable: false,
+    });
   }
 
 }

docs/src/app/components/raw-code/dialog-code.txt

@@ -8,7 +8,8 @@ let standardActions = [
   title="Dialog With Standard Actions"
   actions={standardActions}
   actionFocus="submit"
-  modal={this.state.modal}>
+  isOpen={this.state.showDialogStandardActions}
+  onRequestClose={this._handleRequestClose}>
   The actions in this window are created from the json that's passed in.
 </Dialog>
 
@@ -27,11 +28,19 @@ let customActions = [
 <Dialog
   title="Dialog With Custom Actions"
   actions={customActions}
-  modal={this.state.modal}>
+  isOpen={this.state.showDialogCustomActions}
+  onRequestClose={this._handleRequestClose}>
   The actions in this window were passed in as an array of react objects.
 </Dialog>
 
-<Dialog title="Dialog With Scrollable Content" actions={customActions}
-  autoDetectWindowHeight={true} autoScrollBodyContent={true}>
-    <div style={{height: '2000px'}}>Really long content</div>
-</Dialog>
+<Dialog
+  title="Dialog With Scrollable Content"
+  actions={customActions}
+  autoDetectWindowHeight={true}
+  autoScrollBodyContent={true}
+  isOpen={this.state.showDialogScrollable}
+  onRequestClose={this._handleRequestClose}>
+  <div style={{height: '1000px'}}>
+    Really long content
+  </div>
+</Dialog>

docs/webpack-production.config.js

@@ -45,6 +45,11 @@ var config = {
         warnings: false
       }
     }),
+    new webpack.DefinePlugin({
+      "process.env": {
+        NODE_ENV: JSON.stringify("production")
+      }
+    }),
     new HtmlWebpackPlugin({
         inject: false,
         template: path.join(__dirname, '/src/www/index.html')

package.json

@@ -31,7 +31,8 @@
   "homepage": "http://material-ui.com/",
   "dependencies": {
     "lodash.throttle": "~3.0.4",
-    "lodash.debounce": "~3.1.1"
+    "lodash.debounce": "~3.1.1",
+    "warning": "^2.1.0"
   },
   "peerDependencies": {
     "inline-style-prefixer": "^0.3.3",