time-convertor-ts

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

commit 87b06ad9e9dc28ed0348901f42589cc210417ab7
parent bbd15711834e1a6ada16df8084d5d66819afdae9
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Mon, 25 May 2020 08:44:27 +0530

tz input implemented

Diffstat:
Asrc/App/comps/TimezoneInput.tsx | 112+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 112 insertions(+), 0 deletions(-)

diff --git a/src/App/comps/TimezoneInput.tsx b/src/App/comps/TimezoneInput.tsx @@ -0,0 +1,112 @@ +import React from 'react'; + +import { friendlyStr, unfriendlyStr } from '../../utils'; + +import { timezoneList } from '../../utils'; + +import { ITimezoneInput } from '../../utils/interfaces'; + +function TimezoneInput({ + autofocus = false, + changeValue, + id = '', + placeholder = 'Time zone', + TZ = 'UTC', +}: ITimezoneInput): JSX.Element { + const options = timezoneList; + const [suggestions, setSuggestions] = React.useState<string[] | []>([]); + const [inputValue, setInputValue] = React.useState(friendlyStr(TZ)); + const [style, setStyle] = React.useState<object>({ + border: 0, + borderBottom: '1px solid silver', + }); + + function handleBlur(): void { + setStyle({ + 'border': 0, + 'borderBottom': '1px solid silver', + }); + } + + function handleChange(e: React.ChangeEvent<HTMLInputElement>): void { + const { value } = e.target; + setInputValue(value); + let recommendations: string[] | [] = []; + if (value.length) { + recommendations = options.filter((option) => + option.toLowerCase().includes(value.toLowerCase()) + ); + } + setSuggestions(recommendations); + } + + function handleClick(value: string) { + setSuggestions([]); + setInputValue(friendlyStr(value)); + changeValue(unfriendlyStr(value)); + } + + function handleFocus(): void { + setStyle({ + 'border': 'none', + }); + } + + function showLI(str: string, index: number, arr: string[]): JSX.Element { + return ( + <li + className="list-group-item list-group-item-action" + key={index} + onClick={() => handleClick(str)} + style={{ cursor: 'pointer' }} + > + {friendlyStr(str)} + </li> + ); + } + + return ( + <div className="h4"> + <input + aria-placeholder={placeholder} + autoComplete="false" + autoFocus={autofocus} + className="w-75" + id={id} + name={id} + onBlur={handleBlur} + onChange={handleChange} + onFocus={handleFocus} + placeholder={placeholder} + role="searchbox" + style={style} + type="text" + value={inputValue} + maxLength={100} + /> + <div + className="suggestion-list" + style={{ + maxHeight: '50vh', + left: '15px', + overflow: 'scroll', + position: 'absolute', + right: '15px', + WebkitOverflowScrolling: 'touch', + zIndex: 2, + }} + > + <div className="h6"> + <ul className="list-group"> + { + // @ts-ignore + suggestions.length > 0 ? suggestions.map(showLI) : null + } + </ul> + </div> + </div> + </div> + ); +} + +export default TimezoneInput;