src/app/model/test.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 const languages = [
  22   {
  23         name: 'C',
  24         year: 1972
  25   },
  26   {
  27         name: 'C#',
  28         year: 2000
  29   },
  30   {
  31         name: 'C++',
  32         year: 1983
  33   },
  34   {
  35         name: 'Clojure',
  36         year: 2007
  37   },
  38   {
  39         name: 'Elm',
  40         year: 2012
  41   },
  42   {
  43         name: 'Go',
  44         year: 2009
  45   },
  46   {
  47         name: 'Haskell',
  48         year: 1990
  49   },
  50   {
  51         name: 'Java',
  52         year: 1995
  53   },
  54   {
  55         name: 'Javascript',
  56         year: 1995
  57   },
  58   {
  59         name: 'Perl',
  60         year: 1987
  61   },
  62   {
  63         name: 'PHP',
  64         year: 1995
  65   },
  66   {
  67         name: 'Python',
  68         year: 1991
  69   },
  70   {
  71         name: 'Ruby',
  72         year: 1995
  73   },
  74   {
  75         name: 'Scala',
  76         year: 2003
  77   }
  78 ];
  79
  80 // https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
  81 function escapeRegexCharacters(str) {
  82   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  83 }
  84
  85 function getSuggestions(value) {
  86   const escapedValue = escapeRegexCharacters(value.trim());
  87
  88   const regex = new RegExp('^' + escapedValue, 'i');
  89
  90   return languages.filter(language => regex.test(language.name));
  91 }
  92
  93 function getSuggestionValue(suggestion) {
  94   return suggestion.name;
  95 }
  96
  97 function renderSuggestion(suggestion) {
  98   return (
  99         <span>{suggestion.name}</span>
 100   );
 101 }
 102
 103 class Test extends React.Component {
 104   constructor() {
 105         super();
 106
 107         this.state = {
 108           value: '',
 109           suggestions: getSuggestions('')
 110         };
 111
 112         this.onChange = this.onChange.bind(this);
 113         this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this);
 114   }
 115
 116   onChange(event, { newValue, method }) {
 117         this.setState({
 118           value: newValue
 119         });
 120   }
 121
 122   onSuggestionsUpdateRequested({ value }) {
 123         this.setState({
 124           suggestions: getSuggestions(value)
 125         });
 126   }
 127
 128   render() {
 129         const { value, suggestions } = this.state;
 130         const inputProps = {
 131           placeholder: "Type 'c'",
 132           value,
 133           onChange: this.onChange
 134         };
 135
 136         return (
 137           <Autosuggest suggestions={suggestions}
 138                                    onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested}
 139                                    shouldRenderSuggestions={() => true}
 140                                    getSuggestionValue={getSuggestionValue}
 141                                    renderSuggestion={renderSuggestion}
 142                                    inputProps={inputProps} />
 143         );
 144   }
 145 }
 146
 147 ReactDOM.render(<App />, document.getElementById('app'));