feat: improved inputs

Opty1712 · Feb 9, 2023 · 492ef78 · 492ef78 · vercel · Feb 9, 2023
1 parent c97dbb6
commit 492ef78
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/components/PageColorizer/PageColorizer.tsx b/src/components/PageColorizer/PageColorizer.tsx
@@ -31,13 +31,18 @@ export const PageColorizer: FC<PageColorizerProps> = ({ children }) => {
           <RgbColorPicker color={selectedColor} onChange={setSelectedColor} />
 
           <Inputs>
-            {getKeys(selectedColor).map((key) => (
-              <Input
-                key={key}
-                value={selectedColor[key]}
-                onChange={getOnInputChangeHandler(key)}
-              />
-            ))}
+            {getKeys(selectedColor).map((key) => {
+              return (
+                <Input
+                  key={key}
+                  type="number"
+                  min={0}
+                  max={255}
+                  value={Number(selectedColor[key])}
+                  onChange={getOnInputChangeHandler(key)}
+                />
+              );
+            })}
           </Inputs>
 
           <Buttons>

diff --git a/src/components/PageColorizer/styled.ts b/src/components/PageColorizer/styled.ts
@@ -42,7 +42,7 @@ export const Input = styled.input`
   height: 50px;
   width: 50px;
   text-align: center;
-  font-size: 30px;
+  font-size: 20px;
   border-color: #eee;
 `;
 

diff --git a/src/components/PageColorizer/useColorizer.ts b/src/components/PageColorizer/useColorizer.ts
@@ -23,7 +23,13 @@ export const useColorizer = () => {
 
   const getOnInputChangeHandler =
     (part: keyof RgbColor) => (event: ChangeEvent<HTMLInputElement>) => {
-      setSelectedColor((value) => ({ ...value, [part]: event.target.value }));
+      const incomingValue = event.target.value;
+      const newPartValue = Number(incomingValue.replace(onlyDigits, ''));
+
+      setSelectedColor((value) => ({
+        ...value,
+        [part]: newPartValue > maxValue ? maxValue : newPartValue
+      }));
     };
 
   return {
@@ -40,3 +46,7 @@ const initialColor: RgbColor = {
   g: 255,
   b: 255
 };
+
+const maxValue = 255;
+
+const onlyDigits = /[^\d]/g;