Added a button to quickly toggle the search results layer's visibility,

closes #1144.
hajkmap · Aug 23, 2022 · ea51f64 · ea51f64
1 parent 9046eff
commit ea51f64
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 18 deletions.
diff --git a/new-client/src/components/Search/Search.js b/new-client/src/components/Search/Search.js
@@ -1041,6 +1041,7 @@ class Search extends React.PureComponent {
           handleSearchBarKeyPress={this.handleSearchBarKeyPress}
           getArrayWithSearchWords={this.getArrayWithSearchWords}
           failedWFSFetchMessage={failedWFSFetchMessage}
+          mapViewModel={this.mapViewModel}
           {...this.props}
         />
       )

diff --git a/new-client/src/components/Search/SearchBar.js b/new-client/src/components/Search/SearchBar.js
@@ -26,6 +26,7 @@ import {
 } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
 import { styled } from "@mui/material/styles";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 
 // A HOC that pipes isMobile to the children. See this as a proposed
 // solution. It is not pretty, but if we move this to a separate file
@@ -97,6 +98,31 @@ class SearchBar extends React.PureComponent {
     moreOptionsId: undefined,
     moreOptionsOpen: false,
     selectSourcesOpen: false,
+    resultsLayerVisible: true,
+  };
+
+  componentDidMount() {
+    // The OL layer that holds the result features. We grab
+    // it here so we can control its visibility using a button
+    // in the search bar.
+    this.resultsLayer = this.props.mapViewModel.resultsLayer;
+
+    // Ensure that our state is synced to the actual visibility state
+    // of the OL layer
+    if (this.resultsLayer.getVisible() !== true) {
+      this.setState({ resultsLayer: false });
+    }
+  }
+
+  toggleResultsLayerVisibility = () => {
+    const isVisible = this.resultsLayer.getVisible();
+    if (isVisible) {
+      this.resultsLayer.setVisible(false);
+      this.setState({ resultsLayerVisible: false });
+    } else {
+      this.resultsLayer.setVisible(true);
+      this.setState({ resultsLayerVisible: true });
+    }
   };
 
   getOriginBasedIcon = (origin) => {
@@ -356,9 +382,15 @@ class SearchBar extends React.PureComponent {
     const disableUnderline = isMobile ? { disableUnderline: true } : null;
     const showFailedWFSMessage =
       failedWFSFetchMessage.length > 0 && showSearchResults;
+
     const expandMessage = resultPanelCollapsed
-      ? "Visa sökresultat"
-      : "Dölj sökresultat";
+      ? "Visa lista med sökresultat"
+      : "Dölj lista med sökresultat";
+
+    const toggleResultsLayerVisibilityMessage = this.state.resultsLayerVisible
+      ? "Dölj sökresultat i kartan"
+      : "Visa sökresultat i kartan";
+
     const placeholder = this.getPlaceholder();
     return (
       <TextField
@@ -385,27 +417,50 @@ class SearchBar extends React.PureComponent {
                     size="small"
                     onClick={handleOnClickOrKeyboardSearch}
                   >
-                    <span style={visuallyHidden}>Exekvera sökning</span>
+                    <span style={visuallyHidden}>Utför sökning</span>
                     <SearchIcon />
                   </IconButton>
                 </Tooltip>
               ) : (
-                <Tooltip disableInteractive title={expandMessage}>
-                  <IconButton
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggleCollapseSearchResults();
-                    }}
-                    size="small"
+                <>
+                  <Tooltip disableInteractive title={expandMessage}>
+                    <IconButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleCollapseSearchResults();
+                      }}
+                      size="small"
+                    >
+                      <span style={visuallyHidden}>{expandMessage}</span>
+                      {resultPanelCollapsed ? (
+                        <ExpandMoreIcon />
+                      ) : (
+                        <ExpandLessIcon />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip
+                    disableInteractive
+                    title={toggleResultsLayerVisibilityMessage}
                   >
-                    <span style={visuallyHidden}>{expandMessage}</span>
-                    {resultPanelCollapsed ? (
-                      <ExpandMoreIcon />
-                    ) : (
-                      <ExpandLessIcon />
-                    )}
-                  </IconButton>
-                </Tooltip>
+                    <IconButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        this.toggleResultsLayerVisibility();
+                      }}
+                      size="small"
+                    >
+                      <span style={visuallyHidden}>
+                        {toggleResultsLayerVisibilityMessage}
+                      </span>
+                      {this.state.resultsLayerVisible ? (
+                        <VisibilityOff />
+                      ) : (
+                        <Visibility />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                </>
               )}
               {searchString.length > 0 ||
               showSearchResults ||