add grid input elements for size

src/atoms.ts

@@ -17,5 +17,5 @@ export const lineColorState = atom<string>(COLORS[0]!);
 
 export const drawModeState = atom<DrawMode>('line');
 
-export const drawGridWidthState = atom<number>(4);
+export const drawGridWidthState = atom<number | null>(4);
-export const drawGridHeightState = atom<number>(4);
+export const drawGridHeightState = atom<number | null>(4);

src/components/grid/grid-config.scss

@@ -21,6 +21,33 @@
         border-radius: 5px;
         padding: 5px;
         display: flex;
+
+        .grid.option {
+            display: flex;
+            align-items: center;
+
+            svg.icon {
+                width: 12px;
+                height: 12px;
+                margin-right: 8px;
+            }
+
+            .x {
+                margin: 0 4px;
+            }
+
+            input.grid-size {
+                width: 18px;
+                height: 20px;
+                border: none;
+                padding: 2px 0 4px 0;
+                border-radius: 3px;
+                text-align: center;
+                line-height: 1;
+                background-color: #131b23;
+                color: #fff;
+            }
+        }
     }
 
     .color-options,

src/components/grid/grid-config.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
+import { ChangeEvent, FC, useCallback } from 'react';
-import { useAtom, Atom } from 'jotai';
+import { PrimitiveAtom, useAtom, WritableAtom } from 'jotai';
 import {
     COLORS,
     drawGridHeightState,
@@ -46,17 +46,16 @@ const GridIcon = (
     <svg
         className="icon"
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
+        width="12"
         height="12"
-        viewBox="0 0 24 12"
+        viewBox="0 0 12 12"
     >
-        <line x1="0" y1="0" x2="24" y2="0" stroke="#ffffff" strokeWidth="2" />
+        <line x1="0" y1="0" x2="12" y2="0" stroke="#ffffff" strokeWidth="2" />
-        <line x1="0" y1="6" x2="24" y2="6" stroke="#ffffff" strokeWidth="2" />
+        <line x1="0" y1="6" x2="12" y2="6" stroke="#ffffff" strokeWidth="2" />
-        <line x1="0" y1="12" x2="24" y2="12" stroke="#ffffff" strokeWidth="2" />
+        <line x1="0" y1="12" x2="12" y2="12" stroke="#ffffff" strokeWidth="2" />
         <line x1="0" y1="0" x2="0" y2="12" stroke="#ffffff" strokeWidth="2" />
-        <line x1="8" y1="0" x2="8" y2="12" stroke="#ffffff" strokeWidth="2" />
+        <line x1="6" y1="0" x2="6" y2="12" stroke="#ffffff" strokeWidth="2" />
-        <line x1="16" y1="0" x2="16" y2="12" stroke="#ffffff" strokeWidth="2" />
+        <line x1="12" y1="0" x2="12" y2="12" stroke="#ffffff" strokeWidth="2" />
-        <line x1="24" y1="0" x2="24" y2="12" stroke="#ffffff" strokeWidth="2" />
     </svg>
 );
 
@@ -86,17 +85,36 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
 };
 
 interface StateInputProps<T> {
-    state: Atom<T>;
+    state: PrimitiveAtom<T>;
+    className?: string;
 }
 
-const NumberStateInput: FC<StateInputProps<number>> = (
+const NumberStateInput: FC<StateInputProps<number | null>> = (
-    props: StateInputProps<number>
+    props: StateInputProps<number | null>
 ) => {
-    const { state } = props;
+    const { state, className } = props;
     const [number, setNumber] = useAtom(state);
 
-    // TODO
+    const handleChange = useCallback(
-    return null;
+        (e: ChangeEvent<HTMLInputElement>) => {
+            const re = /^\d*$/;
+            const v = e.target.value;
+            if (v === '') {
+                setNumber(null);
+            } else if (re.test(v)) {
+                setNumber(parseInt(v));
+            }
+        },
+        [setNumber]
+    );
+
+    return (
+        <input
+            className={className}
+            value={number ?? ''}
+            onChange={handleChange}
+        />
+    );
 };
 
 const ColorConfig: FC = () => (
@@ -109,12 +127,11 @@ const ColorConfig: FC = () => (
 
 const ModeConfig: FC = () => {
     const [drawMode, setDrawMode] = useAtom(drawModeState);
-    const [drawGridWidth, setDrawGridWidth] = useAtom(drawGridWidthState);
-    const [drawGridHeight, setDrawGridHeight] = useAtom(drawGridHeightState);
 
     const lineClassName = drawMode === 'line' ? 'option active' : 'option';
     const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
-    const gridClassName = drawMode === 'grid' ? 'option active' : 'option';
+    const gridClassName =
+        drawMode === 'grid' ? 'option active grid' : 'option grid';
     return (
         <>
             <div className="tool-options">
@@ -137,9 +154,15 @@ const ModeConfig: FC = () => {
                     onClick={() => setDrawMode('grid')}
                 >
                     {GridIcon}
-                    <input />
+                    <NumberStateInput
-                    x
+                        className="grid-size width"
-                    <input />
+                        state={drawGridWidthState}
+                    />
+                    <span className="x">x</span>
+                    <NumberStateInput
+                        className="grid-size height"
+                        state={drawGridHeightState}
+                    />
                 </div>
             </div>
         </>