time-convertor

Convert time across timezones
git clone http://git.hanabi.in/repos/time-convertor.git
Log | Files | Refs | README | LICENSE

autoCompleteText.js (2165B)

      1 import React from 'react';
      2 import moment from 'moment-timezone';
      3 
      4 function AutoCompleteText({
      5   autofocus = false,
      6   changeValue,
      7   clearInput,
      8   defaultValue = '',
      9   id,
     10   placeholder,
     11 }) {
     12   const options = moment.tz
     13     .names()
     14     .sort()
     15     .map((el) => el.replace(/_/g, ' '));
     16   const [suggestions, setSuggestions] = React.useState([]);
     17   const [inputVal, setInputVal] = React.useState(
     18     defaultValue.replace(/_/g, ' ')
     19   );
     20   function handleChange(event) {
     21     const { value: input } = event.target;
     22     if (clearInput) clearInput(undefined);
     23     setInputVal(input);
     24     let recommendations = [];
     25     if (input.length) {
     26       recommendations = [
     27         ...recommendations,
     28         ...options.filter((val) =>
     29           val.toLowerCase().includes(input.toLowerCase())
     30         ),
     31       ];
     32     }
     33     setSuggestions(Array.from(new Set([...recommendations])));
     34   }
     35 
     36   function handleClick(value) {
     37     setSuggestions([]);
     38     setInputVal(value);
     39     changeValue(value.replace(/ /g, '_'));
     40   }
     41 
     42   return (
     43     <h4 aria-level="4" id="converted-time-lbl">
     44       <input
     45         role="searchbox"
     46         autoFocus={autofocus}
     47         className="w-75"
     48         id={id}
     49         name="converted-time-lbl-input"
     50         onChange={handleChange}
     51         type="text"
     52         placeholder={placeholder}
     53         aria-placeholder={placeholder}
     54         value={inputVal}
     55         maxLength={100}
     56       />
     57       <div
     58         id="suggestion-list"
     59         style={{
     60           maxHeight: '50vh',
     61           overflow: 'scroll',
     62           position: 'fixed',
     63           zIndex: 2,
     64           WebkitOverflowScrolling: 'touch',
     65         }}
     66       >
     67         <h6 aria-level="6">
     68           <ul className="list-group">
     69             {suggestions.length > 0
     70               ? suggestions.map((el, i) => (
     71                   <li
     72                     className="list-group-item list-group-item-action"
     73                     key={i}
     74                     onClick={() => handleClick(el)}
     75                   >
     76                     {el.replace(/_/g, ' ')}
     77                   </li>
     78                 ))
     79               : null}
     80           </ul>
     81         </h6>
     82       </div>
     83     </h4>
     84   );
     85 }
     86 
     87 export default AutoCompleteText;