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()}
-
+
);
}