Fix #1660. Now results can fit to map size (#1661)

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

web/client/components/mapcontrols/search/SearchResultList.jsx

@@ -9,20 +9,31 @@
 var React = require('react');
 var SearchResult = require('./SearchResult');
 const I18N = require('../../I18N/I18N');
+var assign = require('object-assign');
 
 
 let SearchResultList = React.createClass({
     propTypes: {
         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,
         notFoundMessage: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string])
     },
     getDefaultProps() {
         return {
+            sizeAdjustment: {
+                width: 0,
+                height: 110
+            },
+            containerStyle: {
+                zIndex: 1000
+            },
             onItemClick: () => {},
             addMarker: () => {},
             afterItemClick: () => {}
@@ -47,13 +58,23 @@ let SearchResultList = React.createClass({
         if (!notFoundMessage) {
             notFoundMessage = <I18N.Message msgId="noresultfound" />;
         }
+        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 <div className="search-result-list" style={{padding: "10px", textAlign: "center"}}>{notFoundMessage}</div>;
+            return <div className="search-result-list" style={assign({padding: "10px", textAlign: "center"}, containerStyle)}>{notFoundMessage}</div>;
         }
         return (
-            <div className="search-result-list">
+            <div className="search-result-list" style={containerStyle}>
                 {this.renderResults()}
             </div>
         );

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(<SearchResultList results={results}/>, 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(<SearchResultList mapConfig={{size: {width: 200, height: 200}}} sizeAdjustment={{width: 100, height: 120}} fitToMapSize={true} results={res} notFoundMessage="not found"/>, 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(<SearchResultList results={results} notFoundMessage="not found"/>, document.getElementById("container"));
         expect(tb).toExist();

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.fitResultsToMapSize 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: {
+        fitResultsToMapSize: 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"}]
             },
+            fitResultsToMapSize: true,
             withToggle: false,
             enabled: true
         };
@@ -177,7 +180,7 @@ const SearchPlugin = connect((state) => ({
                     helpText={<Message msgId="helptexts.searchBar"/>}>
                     {this.getSearchAndToggleButton()}
                 </HelpWrapper>
-                <SearchResultList searchOptions={this.props.searchOptions} key="nominatimresults"/>
+                <SearchResultList fitToMapSize={this.props.fitResultsToMapSize} searchOptions={this.props.searchOptions} key="nominatimresults"/>
             </span>
         );
     }