[Dialog] Use open instead of isOpen

Author: oliviertassinari

.babelrc

@@ -0,0 +1,6 @@
+{
+  "stage": 1,
+  "plugins": [
+    "dev-expression"
+  ]
+}

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

@@ -11,9 +11,9 @@ export default class DialogPage extends React.Component {
     super();
     this.state = {
       modal: false,
-      showDialogStandardActions: false,
-      showDialogCustomActions: false,
-      showDialogScrollable: false,
+      openDialogStandardActions: false,
+      openDialogCustomActions: false,
+      openDialogScrollable: false,
     };
     this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this);
     this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this);
@@ -76,19 +76,19 @@ export default class DialogPage extends React.Component {
             desc: 'Force the user to use one of the actions in the dialog. Clicking outside the dialog will not dismiss the dialog.',
           },
           {
-            name: 'openImmediately',
+            name: 'Deprecated: openImmediately',
             type: 'bool',
             header: 'default: false',
             desc: 'Deprecated: Set to true to have the dialog automatically open on mount.',
           },
           {
-            name: 'defaultIsOpen',
+            name: 'defaultOpen',
             type: 'bool',
             header: 'default: false',
             desc: 'Set to true to have the dialog automatically open on mount.',
           },
           {
-            name: 'isOpen',
+            name: 'open',
             type: 'bool',
             header: 'default: null',
             desc: 'Controls whether the Dialog is opened or not.',
@@ -117,6 +117,16 @@ export default class DialogPage extends React.Component {
       {
         name: 'Methods',
         infoArray: [
+          {
+            name: 'Deprecated: dismiss',
+            header: 'Dialog.dismiss()',
+            desc: 'Hides the dialog.',
+          },
+          {
+            name: 'Deprecated: show',
+            header: 'Dialog.show()',
+            desc: 'Shows the dialog.',
+          },
           {
             name: 'isOpen',
             header: 'Dialog.isOpen()',
@@ -127,6 +137,16 @@ export default class DialogPage extends React.Component {
       {
         name: 'Events',
         infoArray: [
+          {
+            name: 'Deprecated: onDismiss',
+            header: 'function()',
+            desc: 'Fired when the dialog is dismissed.',
+          },
+          {
+            name: 'Deprecated: onShow',
+            header: 'function()',
+            desc: 'Fired when the dialog is shown.',
+          },
           {
             name: 'onRequestClose',
             header: 'function(buttonClicked)',
@@ -182,7 +202,7 @@ export default class DialogPage extends React.Component {
             title="Dialog With Standard Actions"
             actions={standardActions}
             actionFocus="submit"
-            isOpen={this.state.showDialogStandardActions}
+            open={this.state.openDialogStandardActions}
             onRequestClose={this._handleRequestClose}>
             The actions in this window are created from the json that's passed in.
           </Dialog>
@@ -191,7 +211,7 @@ export default class DialogPage extends React.Component {
             ref="customDialog"
             title="Dialog With Custom Actions"
             actions={customActions}
-            isOpen={this.state.showDialogCustomActions}
+            open={this.state.openDialogCustomActions}
             onRequestClose={this._handleRequestClose}>
             The actions in this window were passed in as an array of react objects.
           </Dialog>
@@ -207,7 +227,7 @@ export default class DialogPage extends React.Component {
             actions={scrollableCustomActions}
             autoDetectWindowHeight={true}
             autoScrollBodyContent={true}
-            isOpen={this.state.showDialogScrollable}
+            open={this.state.openDialogScrollable}
             onRequestClose={this._handleRequestClose}>
             <div style={{height: '1000px'}}>
               Really long content
@@ -225,13 +245,13 @@ export default class DialogPage extends React.Component {
 
   _handleCustomDialogCancel() {
     this.setState({
-      showDialogCustomActions: true,
+      openDialogCustomActions: true,
     });
   }
 
   _handleCustomDialogSubmit() {
     this.setState({
-      showDialogCustomActions: true,
+      openDialogCustomActions: true,
     });
   }
 
@@ -241,40 +261,40 @@ export default class DialogPage extends React.Component {
 
   _handleScrollableDialogCancel() {
     this.setState({
-      showDialogScrollable: false,
+      openDialogScrollable: false,
     });
   }
 
   _handleScrollableDialogSubmit() {
     this.setState({
-      showDialogScrollable: false,
+      openDialogScrollable: false,
     });
   }
 
   _handleCustomDialogTouchTap() {
     this.setState({
-      showDialogScrollable: true,
+      openDialogScrollable: true,
     });
   }
 
   _handleStandardDialogTouchTap() {
     this.setState({
-      showDialogStandardActions: true,
+      openDialogStandardActions: true,
     });
   }
 
   _handleScrollableDialogTouchTap() {
     this.setState({
-      showDialogScrollable: true,
+      openDialogScrollable: true,
     });
   }
 
   _handleRequestClose(buttonClicked) {
     if (!buttonClicked && this.state.modal) return;
     this.setState({
-      showDialogStandardActions: false,
-      showDialogCustomActions: false,
-      showDialogScrollable: false,
+      openDialogStandardActions: false,
+      openDialogCustomActions: false,
+      openDialogScrollable: false,
     });
   }
 

package.json

@@ -10,7 +10,7 @@
     "test-base": "./node_modules/.bin/karma start",
     "prebuild": "rimraf lib",
     "lint": "gulp eslint",
-    "build": "babel --stage 1 ./src --out-dir ./lib",
+    "build": "babel ./src --out-dir ./lib",
     "prepublish": "npm run build"
   },
   "keywords": [
@@ -49,6 +49,7 @@
     "babel-core": "^5.8.21",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
+    "babel-plugin-dev-expression": "^0.1.0",
     "babel-runtime": "^5.8.25",
     "babelify": "^6.1.3",
     "browserify-istanbul": "^0.2.1",

src/date-picker/date-picker-dialog.jsx

@@ -83,6 +83,7 @@ const DatePickerDialog = React.createClass({
 
   getInitialState() {
     return {
+      open: false,
       isCalendarActive: false,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
@@ -160,7 +161,9 @@ const DatePickerDialog = React.createClass({
         onDismiss={this._handleDialogDismiss}
         onShow={this._handleDialogShow}
         onClickAway={this._handleDialogClickAway}
-        repositionOnUpdate={false}>
+        repositionOnUpdate={false}
+        open={this.state.open}
+        onRequestClose={this.dismiss}>
         <Calendar
           DateTimeFormat={DateTimeFormat}
           locale={locale}
@@ -178,11 +181,15 @@ const DatePickerDialog = React.createClass({
   },
 
   show() {
-    this.refs.dialog.show();
+    this.setState({
+      open: true,
+    });
   },
 
   dismiss() {
-    this.refs.dialog.dismiss();
+    this.setState({
+      open: false,
+    });
   },
 
   _onDayTouchTap() {