From 81045e8789e0163a2c72f60cac582a8e6af16ac6 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Thu, 24 Feb 2022 01:07:47 +0530
Subject: [PATCH] Replaced the select with input field for images (#184)

* Replace select with input

* Update index.ts

* Update index.ts

* Update index.ts

* Fixes review comments (spacing and placeholders)

* Fix space again

* Added type number and defaulted to empty values

* Update index.ts

* Revert unncessary changes

* Add newline

* Change order of props

* Small cleanup

Co-authored-by: Steven <steven@ceriously.com>
---
 public/style.css | 13 +++++++++++
 web/index.ts     | 59 +++++++++++++++++++-----------------------------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/public/style.css b/public/style.css
index baf0d17..2673565 100644
--- a/public/style.css
+++ b/public/style.css
@@ -102,6 +102,11 @@ button:hover {
     vertical-align: middle;
     width: 100%;
 }
+.input-outer-wrapper.small {
+    height: 24px;
+    min-width: 100px;
+    width: 100px;
+}
 
 .input-outer-wrapper:hover {
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
@@ -348,3 +353,11 @@ img {
     right: -52%;
   }
 }
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
diff --git a/web/index.ts b/web/index.ts
index 180471c..d28bfdf 100644
--- a/web/index.ts
+++ b/web/index.ts
@@ -60,15 +60,18 @@ const Dropdown = ({ options, value, onchange, small }: DropdownProps) => {
 interface TextInputProps {
     value: string;
     oninput: (val: string) => void;
+    small: boolean;
+    placeholder?: string;
+    type?: string
 }
 
-const TextInput = ({ value, oninput }: TextInputProps) => {
+const TextInput = ({ value, oninput, small, type = 'text', placeholder = '' }: TextInputProps) => {
     return H('div',
-        { className: 'input-outer-wrapper' },
+        { className: 'input-outer-wrapper' + (small ? ' small' : '') },
         H('div',
             { className: 'input-inner-wrapper' },
             H('input',
-                { type: 'text', value, oninput: (e: any) => oninput(e.target.value) }
+                { type, value, placeholder, oninput: (e: any) => oninput(e.target.value) }
             )
         )
     );
@@ -154,27 +157,6 @@ const imageDarkOptions: DropdownOption[] = [
     { text: 'Hyper', value: 'https://assets.vercel.com/image/upload/front/assets/design/hyper-bw-logo.svg' },
 ];
 
-const widthOptions = [
-    { text: 'width', value: 'auto' },
-    { text: '50', value: '50' },
-    { text: '100', value: '100' },
-    { text: '150', value: '150' },
-    { text: '200', value: '200' },
-    { text: '250', value: '250' },
-    { text: '300', value: '300' },
-    { text: '350', value: '350' },
-];
-
-const heightOptions = [
-    { text: 'height', value: 'auto' },
-    { text: '50', value: '50' },
-    { text: '100', value: '100' },
-    { text: '150', value: '150' },
-    { text: '200', value: '200' },
-    { text: '250', value: '250' },
-    { text: '300', value: '300' },
-    { text: '350', value: '350' },
-];
 
 interface AppState extends ParsedRequest {
     loading: boolean;
@@ -215,6 +197,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
         selectedImageIndex = 0,
         overrideUrl = null,
     } = state;
+
     const mdValue = md ? '1' : '0';
     const imageOptions = theme === 'light' ? imageLightOptions : imageDarkOptions;
     const url = new URL(window.location.origin);
@@ -299,21 +282,23 @@ const App = (_: any, state: AppState, setState: SetState) => {
                         }),
                         H('div',
                             { className: 'field-flex' },
-                            H(Dropdown, {
-                                options: widthOptions,
+                            H(TextInput, {
                                 value: widths[0],
+                                type: 'number',
+                                placeholder: 'width',
                                 small: true,
-                                onchange: (val: string) =>  {
+                                oninput: (val: string) =>  {
                                     let clone = [...widths];
                                     clone[0] = val;
                                     setLoadingState({ widths: clone });
                                 }
                             }),
-                            H(Dropdown, {
-                                options: heightOptions,
+                            H(TextInput, {
                                 value: heights[0],
+                                type: 'number',
+                                placeholder: 'height',
                                 small: true,
-                                onchange: (val: string) =>  {
+                                oninput: (val: string) =>  {
                                     let clone = [...heights];
                                     clone[0] = val;
                                     setLoadingState({ heights: clone });
@@ -335,21 +320,23 @@ const App = (_: any, state: AppState, setState: SetState) => {
                         }),
                         H('div',
                             { className: 'field-flex' },
-                            H(Dropdown, {
-                                options: widthOptions,
+                            H(TextInput, {
                                 value: widths[i + 1],
+                                type: 'number',
+                                placeholder: 'width',
                                 small: true,
-                                onchange: (val: string) =>  {
+                                oninput: (val: string) =>  {
                                     let clone = [...widths];
                                     clone[i + 1] = val;
                                     setLoadingState({ widths: clone });
                                 }
                             }),
-                            H(Dropdown, {
-                                options: heightOptions,
+                            H(TextInput, {
                                 value: heights[i + 1],
+                                type: 'number',
+                                placeholder: 'height',
                                 small: true,
-                                onchange: (val: string) =>  {
+                                oninput: (val: string) =>  {
                                     let clone = [...heights];
                                     clone[i + 1] = val;
                                     setLoadingState({ heights: clone });