[Dialog] Remove warnings on DatePicker and TimePicker

Author: oliviertassinari

src/date-picker/calendar.jsx

@@ -38,7 +38,7 @@ const Calendar = React.createClass({
     locale: React.PropTypes.string.isRequired,
     disableYearSelection: React.PropTypes.bool,
     initialDate: React.PropTypes.object,
-    isActive: React.PropTypes.bool,
+    open: React.PropTypes.bool,
     minDate: React.PropTypes.object,
     maxDate: React.PropTypes.object,
     onDayTouchTap: React.PropTypes.func,
@@ -296,7 +296,7 @@ const Calendar = React.createClass({
   },
 
   _handleWindowKeyDown(e) {
-    if (this.props.isActive) {
+    if (this.props.open) {
 
       switch (e.keyCode) {
         case KeyCode.UP:

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

@@ -49,7 +49,6 @@ const DatePickerDialog = React.createClass({
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onAccept: React.PropTypes.func,
-    onClickAway: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
     onShow: React.PropTypes.func,
     style: React.PropTypes.object,
@@ -87,7 +86,6 @@ const DatePickerDialog = React.createClass({
   getInitialState() {
     return {
       open: false,
-      isCalendarActive: false,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
   },
@@ -108,6 +106,8 @@ const DatePickerDialog = React.createClass({
       onAccept,
       style,
       container,
+      onDismiss,
+      onShow,
       ...other,
     } = this.props;
 
@@ -164,9 +164,8 @@ const DatePickerDialog = React.createClass({
         contentStyle={styles.dialogContent}
         bodyStyle={styles.dialogBodyContent}
         actions={actions}
-        onDismiss={this._handleDialogDismiss}
-        onShow={this._handleDialogShow}
-        onClickAway={this._handleDialogClickAway}
+        onDismiss={typeof onDismiss === 'function' && onDismiss}
+        onShow={typeof onShow === 'function' && onShow}
         repositionOnUpdate={false}
         open={this.state.open}
         onRequestClose={this.dismiss}>
@@ -176,7 +175,7 @@ const DatePickerDialog = React.createClass({
           ref="calendar"
           onDayTouchTap={this._onDayTouchTap}
           initialDate={this.props.initialDate}
-          isActive={this.state.isCalendarActive}
+          open={this.state.open}
           minDate={this.props.minDate}
           maxDate={this.props.maxDate}
           shouldDisableDate={this.props.shouldDisableDate}
@@ -216,36 +215,8 @@ const DatePickerDialog = React.createClass({
     this.dismiss();
   },
 
-  _handleDialogShow() {
-    this.setState({
-      isCalendarActive: true,
-    });
-
-    if (this.props.onShow) this.props.onShow();
-  },
-
-  _handleDialogDismiss() {
-    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
-      this.setState({
-        isCalendarActive: false,
-      });
-    });
-
-    if (this.props.onDismiss) this.props.onDismiss();
-  },
-
-  _handleDialogClickAway() {
-    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
-      this.setState({
-        isCalendarActive: false,
-      });
-    });
-
-    if (this.props.onClickAway) this.props.onClickAway();
-  },
-
   _handleWindowKeyUp(e) {
-    if (this.state.isCalendarActive) {
+    if (this.state.open) {
       switch (e.keyCode) {
         case KeyCode.ENTER:
           this._handleOKTouchTap();

src/date-picker/date-picker.jsx

@@ -124,7 +124,7 @@ const DatePicker = React.createClass({
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}
           onShow={onShow}
-          onDismiss={this._handleDialogDismiss}
+          onDismiss={onDismiss}
           minDate={minDate}
           maxDate={maxDate}
           autoOk={autoOk}
@@ -173,10 +173,6 @@ const DatePicker = React.createClass({
     if (this.props.valueLink) this.props.valueLink.requestChange(d);
   },
 
-  _handleDialogDismiss() {
-    if (this.props.onDismiss) this.props.onDismiss();
-  },
-
   _handleInputFocus(e) {
     e.target.blur();
     if (this.props.onFocus) this.props.onFocus(e);

src/dialog.jsx

@@ -111,7 +111,6 @@ let Dialog = React.createClass({
     contentClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
     openImmediately: React.PropTypes.bool,
-    onClickAway: React.PropTypes.func,
     repositionOnUpdate: React.PropTypes.bool,
     style: React.PropTypes.object,
     title: React.PropTypes.node,
@@ -290,10 +289,10 @@ let Dialog = React.createClass({
     warning(!this.props.hasOwnProperty('openImmediately'),
       'openImmediately has been deprecated in favor of defaultOpen');
 
-    warning(!this.props.hasOwnProperty('onShow'),
+    warning(!(typeof this.props.onShow === 'function'),
       'onShow will be removed in favor of explicitly setting open');
 
-    warning(!this.props.hasOwnProperty('onDismiss'),
+    warning(!(typeof this.props.onDismiss === 'function'),
       'onDismiss will be removed in favor of explicitly setting open and can be replaced by onRequestClose');
 
     warning(!this.props.hasOwnProperty('modal'),

src/time-picker/time-picker-dialog.jsx

@@ -64,6 +64,8 @@ const TimePickerDialog = React.createClass({
       onAccept,
       format,
       autoOk,
+      onShow,
+      onDismiss,
       ...other,
     } = this.props;
 
@@ -85,7 +87,7 @@ const TimePickerDialog = React.createClass({
         key={0}
         label="Cancel"
         secondary={true}
-        onTouchTap={this._handleCancelTouchTap} />,
+        onTouchTap={this.dismiss} />,
       <FlatButton
         key={1}
         label="OK"
@@ -102,8 +104,8 @@ const TimePickerDialog = React.createClass({
         bodyStyle={this.mergeAndPrefix(styles.body)}
         actions={actions}
         contentStyle={styles.dialogContent}
-        onDismiss={this._handleDialogDismiss}
-        onShow={this._handleDialogShow}
+        onDismiss={typeof onDismiss === 'function' && onDismiss}
+        onShow={typeof onShow === 'function' && onShow}
         repositionOnUpdate={false}
         open={this.state.open}
         onRequestClose={this.dismiss}>
@@ -128,31 +130,15 @@ const TimePickerDialog = React.createClass({
     });
   },
 
-  _handleCancelTouchTap() {
-    this.dismiss();
-  },
-
   _handleOKTouchTap() {
     this.dismiss();
     if (this.props.onAccept) {
       this.props.onAccept(this.refs.clock.getSelectedTime());
     }
   },
 
-  _handleDialogShow() {
-    if (this.props.onShow) {
-      this.props.onShow();
-    }
-  },
-
-  _handleDialogDismiss() {
-    if (this.props.onDismiss) {
-      this.props.onDismiss();
-    }
-  },
-
   _handleWindowKeyUp(event) {
-    if (this.refs.dialogWindow.isOpen()) {
+    if (this.state.open) {
       switch (event.keyCode) {
         case KeyCode.ENTER:
           this._handleOKTouchTap();