Escaping regex characters
[aai/sparky-fe.git] / src / generic-components / autoCompleteSearchBar / AutoCompleteSearchBar.jsx
1 /*
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
4  * ================================================================================
5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6  * Copyright © 2017-2018 Amdocs
7  * ================================================================================
8  * Licensed under the Apache License, Version 2.0 (the "License");
9  * you may not use this file except in compliance with the License.
10  * You may obtain a copy of the License at
11  *
12  *       http://www.apache.org/licenses/LICENSE-2.0
13  *
14  * Unless required by applicable law or agreed to in writing, software
15  * distributed under the License is distributed on an "AS IS" BASIS,
16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17  * See the License for the specific language governing permissions and
18  * limitations under the License.
19  * ============LICENSE_END=========================================================
20  */
21 import React, {Component} from 'react';
22 import { PropTypes } from 'prop-types';
23 import {Button} from 'react-bootstrap';
24 import AutoSuggest from 'react-autosuggest';
25 import Highlighter from 'react-highlight-words';
26 import debounce from 'lodash.debounce';
27 import {ButtonGroup} from 'react-bootstrap';
28 import {Link} from 'react-router-dom';
29
30 import {changeUrlAddress} from 'utils/Routes.js';
31
32 import {
33   ICON_CLASS_SEARCH,
34   ICON_CLASS_CLEAR,
35   SEARCH_DEBOUNCE_TIME,
36   NO_MATCHES_FOUND,
37   SEARCH_PLACEHOLDER_TEXT
38 } from './AutoCompleteSearchBarConstants.js';
39
40 export default class AutoCompleteSearchBar extends Component {
41   static propTypes = {
42     value: PropTypes.string,
43     suggestions: PropTypes.array,
44     cachedSuggestions: PropTypes.array,
45     suggestionName: PropTypes.string
46   };
47
48   componentWillMount() {
49     this.debouncedLoadSuggestions =
50       debounce(this.props.onSuggestionsFetchRequested, SEARCH_DEBOUNCE_TIME);
51   }
52
53   onSuggestionsFetchRequested = ({value}) => {
54     this.debouncedLoadSuggestions({value});
55   };
56
57   isValidSearch(value) {
58     return (value && value !== NO_MATCHES_FOUND);
59   }
60
61   isValidSuggestionObject(suggestionObj) {
62     return (suggestionObj &&
63     Object.keys(suggestionObj).length > 0 &&
64     this.isValidSearch(suggestionObj.text));
65   }
66
67   getSelectedSuggestionObj(value, cachedSuggestions) {
68     let matchesSuggestion = {};
69
70     if (this.isValidSearch(value)) {
71       for (let suggestionIndex in cachedSuggestions) {
72         if (cachedSuggestions[suggestionIndex].text === value) {
73           matchesSuggestion = cachedSuggestions[suggestionIndex];
74           break;
75         }
76       }
77     }
78
79     return matchesSuggestion;
80   }
81
82   newSearchSelected(
83     cachedSuggestion, invalidSearchCallback, dispatchAnalytics, value) {
84     if (this.isValidSuggestionObject(cachedSuggestion)) {
85       changeUrlAddress(cachedSuggestion, this.props.history);
86       //Call analytics if defined
87       if (dispatchAnalytics) {
88         dispatchAnalytics();
89       }
90     } else {
91       invalidSearchCallback(value);
92     }
93   }
94
95   render() {
96     const {
97       value, suggestions,
98       suggestionName, cachedSuggestions,
99       onInputChange, onInvalidSearch,
100       onClearSuggestionsTextFieldRequested,
101       onSuggestionsClearRequested,
102       dispatchAnalytics
103     } = this.props;
104     const inputProps = {
105       placeholder: SEARCH_PLACEHOLDER_TEXT,
106       value,
107       onChange: onInputChange
108     };
109
110     let clearButtonClass = (value.length > 0)
111       ? 'auto-complete-clear-button'
112       : 'auto-complete-clear-button hidden';
113     return (
114       <div className='auto-complete-search'>
115         <AutoSuggest
116           suggestions={suggestions}
117           getSuggestionValue={suggestion => suggestion[suggestionName]}
118           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
119           onSuggestionsClearRequested={onSuggestionsClearRequested}
120           onSuggestionSelected={(event, {suggestion}) => {
121             this.newSearchSelected(suggestion, onInvalidSearch, dispatchAnalytics, value);
122             this.props.onClearSuggestionsTextFieldRequested();
123           }}
124           renderSuggestion={this.renderSuggestion}
125           inputProps={inputProps}
126           focusFirstSuggestion={false}
127           renderSuggestionsContainer={this.renderSuggestionsContainer}/>
128         <ButtonGroup className='auto-complete-search-button-group'>
129           <Button type='submit' className={clearButtonClass}
130                   onClick={onClearSuggestionsTextFieldRequested}>
131             <i className={ICON_CLASS_CLEAR} aria-hidden='true'/>
132           </Button>
133
134           <Button type='submit' className='auto-complete-search-button' onClick={() => {
135             this.newSearchSelected(this.getSelectedSuggestionObj(value, cachedSuggestions),
136               onInvalidSearch, dispatchAnalytics, value);
137             this.props.onSuggestionsClearRequested();
138           }}>
139             <i className={ICON_CLASS_SEARCH} aria-hidden='true'/>
140           </Button>
141         </ButtonGroup>
142       </div>
143     );
144   }
145
146   renderSuggestion(suggestion, {query}) {
147     let toHighLightArray = query.split(' ');
148     let suggestionTextArray = suggestion.text.split(' ');
149     let arrayIndex = 0;
150
151     if (suggestion.text !== NO_MATCHES_FOUND) {
152       // render the suggestion as a clickable link
153       return (
154         <div className='suggestionFlexContainer'>
155         <span key={'sugSpan1'}
156               className='suggestionColumnTwo'>
157           <Link style={{textDecoration: 'none'}}
158                 to={'/' + suggestion.route + '/' + suggestion.hashId}
159                 replace={true}>
160             {suggestionTextArray.map(
161               function () {
162                 return (
163                   <span key={arrayIndex + 'sugSpan3'}>
164                     <Highlighter key={arrayIndex + 'high'}
165                                  highlightClassName='highlight'
166                                  searchWords={toHighLightArray}
167                                  textToHighlight={suggestionTextArray[arrayIndex]}
168                                  autoEscape={true}/>
169                     { ++arrayIndex ? ' ' : ' '}
170                  </span>);
171
172               })} </Link>
173       </span>
174         </div>
175       );
176     } else {
177       // render the suggestion as plain text
178       return (
179         <div className='suggestionFlexContainer'>
180           <span key={'sugSpan1'}
181                 className='suggestionColumnTwo'>
182               {suggestionTextArray.map(
183                 function () {
184                   return (
185                     <span key={arrayIndex + 'sugSpan3'}>
186                       <Highlighter key={arrayIndex + 'high'}
187                                    highlightClassName='highlight'
188                                    searchWords={toHighLightArray}
189                                    textToHighlight={suggestionTextArray[arrayIndex]}
190                                    autoEscape={true}/>
191                       { ++arrayIndex ? ' ' : ' '}
192                    </span>);
193
194                 })}
195           </span>
196         </div>
197       );
198     }
199   }
200
201   renderSuggestionsContainer({children, ...rest}) {
202     if (children !== null && children.props.items.length < 5) {
203       rest.className = 'react-autosuggest__suggestions-containerCopy';
204     }
205     return (
206       <div {...rest.containerProps} {...rest}>
207         {children}
208       </div>
209     );
210   }
211 }

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use