Dialogs now honor modal property.

byoigres · Jul 9, 2015 · 6077017 · 6077017
1 parent 68f9e82
commit 6077017
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
@@ -91,6 +91,12 @@ class DialogPage extends React.Component {
             header: 'optional',
             desc: 'Overrides the inline-styles of the dialog window content container.'
           },
+          {
+            name: 'modal',
+            type: 'boolean',
+            header: 'default: false',
+            desc: 'Force the user to use one of the actions in the dialog. Clicking outside the dialog will not dismiss the dialog.'
+          },
           {
             name: 'openImmediately',
             type: 'bool',

diff --git a/src/dialog.jsx b/src/dialog.jsx
@@ -64,18 +64,19 @@ let Dialog = React.createClass({
   },
 
   propTypes: {
-    title: React.PropTypes.node,
     actions: React.PropTypes.array,
+    autoDetectWindowHeight: React.PropTypes.bool,
+    autoScrollBodyContent: React.PropTypes.bool,
+    bodyStyle: React.PropTypes.object,
     contentClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
-    bodyStyle: React.PropTypes.object,
+    modal: React.PropTypes.bool,
     openImmediately: React.PropTypes.bool,
     onClickAway: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
     onShow: React.PropTypes.func,
     repositionOnUpdate: React.PropTypes.bool,
-    autoDetectWindowHeight: React.PropTypes.bool,
-    autoScrollBodyContent: React.PropTypes.bool,
+    title: React.PropTypes.node,
   },
 
   windowListeners: {
@@ -85,10 +86,11 @@ let Dialog = React.createClass({
 
   getDefaultProps() {
     return {
-      actions: [],
-      repositionOnUpdate: true,
       autoDetectWindowHeight: false,
       autoScrollBodyContent: false,
+      actions: [],
+      modal: false,
+      repositionOnUpdate: true,
     };
   },
 
@@ -203,7 +205,10 @@ let Dialog = React.createClass({
             </Paper>
           </TransitionItem>}
         </ReactTransitionGroup>
-        <Overlay ref="dialogOverlay" show={this.state.open} autoLockScrolling={false}
+        <Overlay
+          ref="dialogOverlay"
+          show={this.state.open}
+          autoLockScrolling={false}
           onTouchTap={this._handleOverlayTouchTap} />
       </div>
     );
@@ -359,9 +364,14 @@ let Dialog = React.createClass({
     if (this.props.onDismiss) this.props.onDismiss();
   },
 
-  _handleOverlayTouchTap() {
-    this.dismiss();
-    if (this.props.onClickAway) this.props.onClickAway();
+  _handleOverlayTouchTap(e) {
+    if (this.props.modal) {
+      e.stopPropagation();
+    }
+    else {
+      this.dismiss();
+      if (this.props.onClickAway) this.props.onClickAway();
+    }
   },
 
   _handleWindowKeyUp(e) {

diff --git a/src/overlay.jsx b/src/overlay.jsx
@@ -11,8 +11,8 @@ let Overlay = React.createClass({
   mixins: [StylePropable],
 
   propTypes: {
-    show: React.PropTypes.bool,
     autoLockScrolling: React.PropTypes.bool,
+    show: React.PropTypes.bool,
     transitionEnabled: React.PropTypes.bool,
   },