diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index 3e7ba314d7..ba87531619 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -193,7 +193,7 @@ let SearchBar = React.createClass({ var text = this.props.searchText; if ((text === undefined || text === "") && (!this.props.selectedItems || this.props.selectedItems.length === 0)) { this.props.onSearchReset(); - } else { + } else if (text !== undefined && text !== "") { this.props.onSearch(text, this.props.searchOptions); } diff --git a/web/client/components/mapcontrols/search/SearchResultList.jsx b/web/client/components/mapcontrols/search/SearchResultList.jsx index da10acc748..16428eb599 100644 --- a/web/client/components/mapcontrols/search/SearchResultList.jsx +++ b/web/client/components/mapcontrols/search/SearchResultList.jsx @@ -9,6 +9,7 @@ var React = require('react'); var SearchResult = require('./SearchResult'); const I18N = require('../../I18N/I18N'); +var assign = require('object-assign'); let SearchResultList = React.createClass({ @@ -16,6 +17,9 @@ let SearchResultList = React.createClass({ results: React.PropTypes.array, searchOptions: React.PropTypes.object, mapConfig: React.PropTypes.object, + fitToMapSize: React.PropTypes.bool, + containerStyle: React.PropTypes.containerStyle, + sizeAdjustment: React.PropTypes.object, onItemClick: React.PropTypes.func, addMarker: React.PropTypes.func, afterItemClick: React.PropTypes.func, @@ -23,6 +27,13 @@ let SearchResultList = React.createClass({ }, getDefaultProps() { return { + sizeAdjustment: { + width: 0, + height: 110 + }, + containerStyle: { + zIndex: 1000 + }, onItemClick: () => {}, addMarker: () => {}, afterItemClick: () => {} @@ -47,13 +58,23 @@ let SearchResultList = React.createClass({ if (!notFoundMessage) { notFoundMessage = ; } + let containerStyle = this.props.containerStyle; + let mapSize = this.props.mapConfig && this.props.mapConfig.size; + if (this.props.fitToMapSize && mapSize) { + let maxWidth = mapSize.width - this.props.sizeAdjustment.width; + let maxHeight = mapSize.height - this.props.sizeAdjustment.height; + containerStyle = assign({}, this.props.containerStyle, { + maxWidth, + maxHeight + }); + } if (!this.props.results) { return null; } else if (this.props.results.length === 0) { - return
{notFoundMessage}
; + return
{notFoundMessage}
; } return ( -
+
{this.renderResults()}
); diff --git a/web/client/components/mapcontrols/search/__tests__/SearchResultList-test.jsx b/web/client/components/mapcontrols/search/__tests__/SearchResultList-test.jsx index 2889575736..a252614f30 100644 --- a/web/client/components/mapcontrols/search/__tests__/SearchResultList-test.jsx +++ b/web/client/components/mapcontrols/search/__tests__/SearchResultList-test.jsx @@ -38,10 +38,8 @@ describe("test the SearchResultList", () => { }); it('test component creation', () => { - const tb = ReactDOM.render(, document.getElementById("container")); expect(tb).toExist(); - }); it('create component without items', () => { @@ -54,6 +52,20 @@ describe("test the SearchResultList", () => { expect(tb).toExist(); }); + + it('test fit map Size', () => { + const res = Array.from(Array(100).keys()).map((i) => ({ + id: i, + properties: { + prop: i + } + })); + const cmp = ReactDOM.render(, document.getElementById("container")); + expect(cmp).toExist(); + let list = TestUtils.findRenderedDOMComponentWithClass(cmp, "search-result-list"); + expect(list.offsetHeight).toBe(80); + expect(list.offsetWidth).toBe(100); + }); it('get service info from internal object', () => { let tb = ReactDOM.render(, document.getElementById("container")); expect(tb).toExist(); diff --git a/web/client/plugins/Search.jsx b/web/client/plugins/Search.jsx index eb18c20af7..74424a78e5 100644 --- a/web/client/plugins/Search.jsx +++ b/web/client/plugins/Search.jsx @@ -73,6 +73,7 @@ const ToggleButton = require('./searchbar/ToggleButton'); * @class Search * @memberof plugins * @prop {object} cfg.searchOptions initial search options + * @prop {bool} cfg.fitToResultsMapSize true by default, fits the result list to the mapSize (can be disabled, for custom uses) * @prop {searchService[]} cfg.searchOptions.services a list of services to perform search. * a **nominatim** search service look like this: * ``` @@ -124,6 +125,7 @@ const SearchPlugin = connect((state) => ({ selectedItems: state && state.search && state.search.selectedItems }))(React.createClass({ propTypes: { + fitToResultsMapSize: React.PropTypes.bool, searchOptions: React.PropTypes.object, selectedItems: React.PropTypes.array, selectedServices: React.PropTypes.array, @@ -135,6 +137,7 @@ const SearchPlugin = connect((state) => ({ searchOptions: { services: [{type: "nominatim"}] }, + fitToResultsMapSize: true, withToggle: false, enabled: true }; @@ -177,7 +180,7 @@ const SearchPlugin = connect((state) => ({ helpText={}> {this.getSearchAndToggleButton()} - + ); }