فهرست منبع

Press Enter to confirm in 'confirmation' modals

Esc can now be used for cancelling an alert / confirmation modal and
Enter can be used for confirmation, i.e. when deleting something.
Sergiu Miclea 8 سال پیش
والد
کامیت
98a8becdf2
1فایلهای تغییر یافته به همراه21 افزوده شده و 0 حذف شده
  1. 21 0
      src/components/organisms/AlertModal/AlertModal.jsx

+ 21 - 0
src/components/organisms/AlertModal/AlertModal.jsx

@@ -56,6 +56,7 @@ class AlertModal extends React.Component {
     message: PropTypes.string,
     extraMessage: PropTypes.string,
     type: PropTypes.string,
+    isOpen: PropTypes.bool,
     onRequestClose: PropTypes.func,
     onConfirmation: PropTypes.func,
   }
@@ -64,6 +65,26 @@ class AlertModal extends React.Component {
     type: 'confirmation',
   }
 
+  constructor() {
+    super()
+
+    this.handleKeyPress = this.handleKeyPress.bind(this)
+  }
+
+  componentDidMount() {
+    document.addEventListener('keypress', this.handleKeyPress)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keypress', this.handleKeyPress)
+  }
+
+  handleKeyPress(evt) {
+    if (evt.keyCode === 13 && this.props.isOpen) {
+      this.props.onConfirmation()
+    }
+  }
+
   renderDismissButton() {
     if (this.props.type !== 'error') {
       return null