feat(Modal): closes modal on escape

8base · Oct 25, 2018 · de851f4 · de851f4
1 parent 834834d
commit de851f4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/src/atoms/Modal/Modal.js b/src/atoms/Modal/Modal.js
@@ -10,13 +10,13 @@ type ModalProps = {
   isOpen?: boolean,
   onClose?: (any) => void,
   shouldCloseOnOverlayClick?: boolean,
+  shouldCloseOnEscPress?: boolean,
   id?: string,
 };
 
-type ModalState = {
-  isOpen: boolean,
-  blurred: boolean,
-};
+type ModalState = {};
+
+const ESCAPE_KEY = 'Escape';
 
 const MODAL_BLUR_CLASS = 'modal-blur';
 
@@ -57,49 +57,46 @@ class Modal extends PureComponent<ModalProps, ModalState> {
 
   static defaultProps = {
     shouldCloseOnOverlayClick: true,
+    shouldCloseOnEscPress: true,
     isOpen: false,
   };
 
   componentDidMount() {
     if (this.props.isOpen) {
-      this.openModal();
-    } else {
-      this.closeModal();
+      this.addEscPressEventListener();
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ('isOpen' in nextProps) {
-      if (nextProps.isOpen) {
-        this.openModal();
-      } else {
-        this.closeModal();
-      }
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isOpen && this.props.isOpen) {
+      this.addEscPressEventListener();
     }
-  }
-
-  openModal() {
-    if (!this.props.isOpen) {
-      Modal.openedModals += 1;
 
-      // TODO: Revert blur
-      // this.updateBlurClass();
+    if (prevProps.isOpen && !this.props.isOpen) {
+      this.removeEscPressEventListener();
     }
   }
 
-  closeModal() {
-    if (Modal.openedModals > 0) {
-      Modal.openedModals -= 1;
+  componentWillUnmount() {
+    this.removeEscPressEventListener();
+  }
 
-      if (typeof this.props.onClose === 'function') {
-        this.props.onClose();
-      }
+  onClose = () => {
+    if (typeof this.props.onClose === 'function') {
+      this.props.onClose();
+    }
+  }
 
-      // TODO: Revert blur
-      // this.updateBlurClass();
+  addEscPressEventListener = () => {
+    if (this.props.shouldCloseOnEscPress) {
+      document.addEventListener('keydown', this.onDocumentKeyPress);
     }
   }
 
+  removeEscPressEventListener = () => {
+    document.removeEventListener('keydown', this.onDocumentKeyPress);
+  }
+
   updateBlurClass() {
     if (Modal.openedModals === 0) {
       this.removeBlurClass();
@@ -120,9 +117,15 @@ class Modal extends PureComponent<ModalProps, ModalState> {
     }
   }
 
+  onDocumentKeyPress = (event) => {
+    if (this.props.shouldCloseOnEscPress && event.key === ESCAPE_KEY) {
+      this.onClose();
+    }
+  };
+
   onOverlayMouseDown = () => {
     if (this.props.shouldCloseOnOverlayClick) {
-      this.props.onClose();
+      this.onClose();
     }
   };
 
@@ -150,3 +153,4 @@ class Modal extends PureComponent<ModalProps, ModalState> {
 Modal = withModalState(Modal);
 
 export { Modal, theme };
+
diff --git a/src/atoms/Modal/ModalProvider.js b/src/atoms/Modal/ModalProvider.js
@@ -44,3 +44,4 @@ class ModalProvider extends Component {
 }
 
 export { ModalProvider };
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,3 +44,4 @@ class ModalProvider extends Component {
		}

		export { ModalProvider };