time-convertor-ts

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

tz input implemented

Diffstat:
A
src/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;