Make back button of browser close overlay pane in HTML tables (#573)

Fixes #113.
sosy-lab · May 5, 2020 · ac0813e · ac0813e
1 parent bd9d3da
commit ac0813e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/benchexec/tablegenerator/react-table/build/bundle.min.js b/benchexec/tablegenerator/react-table/build/bundle.min.js
diff --git a/benchexec/tablegenerator/react-table/src/components/LinkOverlay.js b/benchexec/tablegenerator/react-table/src/components/LinkOverlay.js
@@ -30,6 +30,8 @@ export default class LinkOverlay extends React.Component {
 
   componentDidMount() {
     this.loadFile(this.props.link);
+    window.history.pushState({}, "", "");
+    window.addEventListener("popstate", this.props.close, false);
   }
 
   // Focus modal container when new content is loaded into the modal for accessibility via keyboard
@@ -40,6 +42,11 @@ export default class LinkOverlay extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("popstate", this.props.close, false);
+    window.removeEventListener("click", this.props.close, false);
+  }
+
   isYAMLFile(filePath) {
     return filePath.endsWith(".yml");
   }
@@ -207,6 +214,11 @@ export default class LinkOverlay extends React.Component {
     this.setState({ error: `${error}` });
   };
 
+  handlePopState = () => {
+    window.history.back();
+    window.addEventListener("click", this.props.close, false);
+  };
+
   render() {
     ReactModal.setAppElement(document.getElementById("root"));
     return (
@@ -217,12 +229,12 @@ export default class LinkOverlay extends React.Component {
           "second-level": this.state.isSecondLevel,
         })}
         isOpen={true}
-        onRequestClose={this.props.close}
+        onRequestClose={() => this.handlePopState()}
       >
         <div className="link-overlay-header-container">
           <FontAwesomeIcon
             icon={faTimes}
-            onClick={this.props.close}
+            onClick={() => this.handlePopState()}
             className="closing"
           />
           {this.state.isSecondLevel ? (

diff --git a/benchexec/tablegenerator/react-table/src/components/SelectColumn.js b/benchexec/tablegenerator/react-table/src/components/SelectColumn.js
@@ -20,6 +20,16 @@ export default class SelectColumn extends React.Component {
     this.selectable = [];
   }
 
+  componentDidMount() {
+    window.history.pushState({}, "", "");
+    window.addEventListener("popstate", this.props.close, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("popstate", this.props.close, false);
+    window.removeEventListener("click", this.props.close, false);
+  }
+
   // -------------------------Rendering-------------------------
   renderRunSets = () => {
     return this.state.list.map((tool, i) => {
@@ -181,19 +191,24 @@ export default class SelectColumn extends React.Component {
     this.setState({ list });
   };
 
+  handlePopState = () => {
+    window.history.back();
+    window.addEventListener("click", this.props.close, false);
+  };
+
   render() {
     ReactModal.setAppElement(document.getElementById("root"));
     return (
       <ReactModal
         ariaHideApp={false}
         className="overlay"
         isOpen={true}
-        onRequestClose={this.props.close}
+        onRequestClose={() => this.handlePopState()}
       >
         <div className="link-overlay-header-container">
           <FontAwesomeIcon
             icon={faTimes}
-            onClick={this.props.close}
+            onClick={() => this.handlePopState()}
             className="closing"
           />
         </div>
@@ -213,7 +228,7 @@ export default class SelectColumn extends React.Component {
           </button>
           <button
             className="btn btn-apply"
-            onClick={this.props.close}
+            onClick={() => this.handlePopState()}
             disabled={!this.state.list.filter((tool) => tool.isVisible).length}
           >
             Apply and close