diff --git a/new-client/src/components/Search/Search.js b/new-client/src/components/Search/Search.js index 2e67d8967..865601cb1 100644 --- 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 index 38c0277b2..f39a6c804 100644 --- 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 ( - Exekvera sökning + Utför sökning ) : ( - - { - e.stopPropagation(); - toggleCollapseSearchResults(); - }} - size="small" + <> + + { + e.stopPropagation(); + toggleCollapseSearchResults(); + }} + size="small" + > + {expandMessage} + {resultPanelCollapsed ? ( + + ) : ( + + )} + + + - {expandMessage} - {resultPanelCollapsed ? ( - - ) : ( - - )} - - + { + e.stopPropagation(); + this.toggleResultsLayerVisibility(); + }} + size="small" + > + + {toggleResultsLayerVisibilityMessage} + + {this.state.resultsLayerVisible ? ( + + ) : ( + + )} + + + )} {searchString.length > 0 || showSearchResults ||