Merge pull request #3643 from weseek/imprv/3637-handsontablemodal-static

Imprv/3637 handsontablemodal static

CHANGES.md

@@ -3,6 +3,7 @@
 ## v4.2.15-EC
 
 * Improvement: toastr location for editing
+* Improvement: Handsontable with static backdrop to prevent from closing when backdrop is clicked
 * Support: Upgrade libs
     * reactstrap
 

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -428,7 +428,14 @@ export default class HandsontableModal extends React.PureComponent {
     );
 
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="lg" className={`handsontable-modal ${this.state.isWindowExpanded && 'grw-modal-expanded'}`}>
+      <Modal
+        isOpen={this.state.show}
+        toggle={this.cancel}
+        backdrop="static"
+        keyboard={false}
+        size="lg"
+        className={`handsontable-modal ${this.state.isWindowExpanded && 'grw-modal-expanded'}`}
+      >
         <ModalHeader tag="h4" toggle={this.cancel} close={buttons} className="bg-primary text-light">
           Edit Table
         </ModalHeader>

src/client/styles/scss/_override-bootstrap.scss

@@ -133,6 +133,19 @@
     border-top: 1px solid #e5e5e5;
   }
 
+  // When fading in the modal, animate it to slide down
+  .modal.fade .modal-dialog {
+    @include transition($modal-transition);
+    transform: $modal-fade-transform;
+  }
+  .modal.show .modal-dialog {
+    transform: $modal-show-transform;
+  }
+  // When trying to close, animate focus to scale
+  .modal.modal-static .modal-dialog {
+    transform: $modal-scale-transform;
+  }
+
   // col-form-label (substitute for control-label of bootstrap3)
   .col-form-label {
     text-align: right;