Sfoglia il codice sorgente

Add 'Back' and 'Next' keys navigation in Wizard

We can now use the `Enter` key for next and the `Esc` key for back.
Sergiu Miclea 8 anni fa
parent
commit
b739269362

+ 9 - 0
src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -108,6 +108,7 @@ class WizardPageContent extends React.Component {
     onAddScheduleClick: PropTypes.func,
     onScheduleChange: PropTypes.func,
     onScheduleRemove: PropTypes.func,
+    onContentRef: PropTypes.func,
   }
 
   constructor() {
@@ -119,6 +120,14 @@ class WizardPageContent extends React.Component {
     }
   }
 
+  componentDidMount() {
+    this.props.onContentRef(this)
+  }
+
+  componentWillUnmount() {
+    this.props.onContentRef(null)
+  }
+
   getProvidersType(type) {
     if (this.props.type === 'replica') {
       if (type === 'source') {

+ 17 - 0
src/components/pages/WizardPage/WizardPage.jsx

@@ -80,6 +80,8 @@ class WizardPage extends React.Component {
       showNewEndpointModal: false,
       nextButtonDisabled: false,
     }
+
+    this.handleKeyPress = this.handleKeyPress.bind(this)
   }
 
   componentWillMount() {
@@ -92,10 +94,24 @@ class WizardPage extends React.Component {
 
   componentDidMount() {
     document.title = 'Coriolis Wizard'
+    document.addEventListener('keydown', this.handleKeyPress)
   }
 
   componentWillUnmount() {
     WizardActions.clearData()
+    document.removeEventListener('keydown', this.handleKeyPress)
+  }
+
+  handleKeyPress(evt) {
+    if (this.state.showNewEndpointModal) {
+      return
+    }
+    if (evt.keyCode === 13 && this.contentRef && !this.contentRef.isNextButtonDisabled()) {
+      this.handleNextClick()
+    }
+    if (evt.keyCode === 27) {
+      this.handleBackClick()
+    }
   }
 
   loadDataForPage(page) {
@@ -387,6 +403,7 @@ class WizardPage extends React.Component {
             onAddScheduleClick={schedule => { this.handleAddScheduleClick(schedule) }}
             onScheduleChange={(scheduleId, data) => { this.handleScheduleChange(scheduleId, data) }}
             onScheduleRemove={scheduleId => { this.handleScheduleRemove(scheduleId) }}
+            onContentRef={ref => { this.contentRef = ref }}
           />}
         />
         <Modal