Implement Basic Cell Input Validation

Scaler-Innovation-Labs · Dec 23, 2024 · e2677fc · e2677fc
1 parent 781456b
commit e2677fc
Showing 1 changed file with 68 additions and 29 deletions.
diff --git a/src/components/ExcelClone.js b/src/components/ExcelClone.js
@@ -1,16 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import './Tooltip.css'; // Add tooltip styles
 
-const ROWS = 20;
-const COLS = 26; // A to Z
+const Tooltip = ({ text, position }) => {
+  return (
+    <div className={`tooltip ${position}`}>
+      {text}
+    </div>
+  );
+};
 
 const ExcelClone = () => {
-  const [data, setData] = useState(
-    Array(ROWS).fill().map(() => Array(COLS).fill(''))
-  );
+  const ROWS = 20;
+  const COLS = 26; // A to Z
+  const [data, setData] = useState(Array(ROWS).fill().map(() => Array(COLS).fill('')));
   const [selectedCell, setSelectedCell] = useState(null);
   const [formulaBarValue, setFormulaBarValue] = useState('');
   const [error, setError] = useState(null); // For error messages
   const [invalidCells, setInvalidCells] = useState(new Set()); // Track invalid cells
+  const [tooltipText, setTooltipText] = useState(''); // State for dynamic tooltip
 
   const getColumnLabel = (index) => String.fromCharCode(65 + index);
 
@@ -51,6 +58,53 @@ const ExcelClone = () => {
     setFormulaBarValue(value);
   };
 
+  const handleKeyDown = (e) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      setTooltipText('Use Arrow Keys to Navigate');
+    } else if (e.key === 'Tab') {
+      setTooltipText('Use Tab to Move to the Next Cell');
+    } else if (e.key === 'Enter') {
+      setTooltipText('Press Enter to Confirm');
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const Cell = ({ value, rowIndex, colIndex }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const isInvalid = invalidCells.has(`${rowIndex}-${colIndex}`);
+
+    return (
+      <td
+        className={`border border-gray-300 p-0 relative ${
+          selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'bg-blue-50' : ''
+        }`}
+      >
+        <div
+          className="cell"
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+        >
+          <input
+            type="text"
+            className={`w-full h-full px-2 py-1 border-none outline-none bg-transparent ${
+              isInvalid ? 'bg-red-50' : ''
+            }`}
+            value={value}
+            onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
+            onClick={() => handleCellSelect(rowIndex, colIndex)}
+          />
+          {showTooltip && <Tooltip text={tooltipText} position="bottom" />}
+        </div>
+      </td>
+    );
+  };
+
   return (
     <div className="flex flex-col h-screen">
       {/* Top Bar */}
@@ -94,29 +148,14 @@ const ExcelClone = () => {
                 <td className="bg-gray-100 border border-gray-300 text-center">
                   {rowIndex + 1}
                 </td>
-                {Array(COLS).fill().map((_, colIndex) => {
-                  const isInvalid = invalidCells.has(`${rowIndex}-${colIndex}`);
-                  return (
-                    <td
-                      key={colIndex}
-                      className={`border border-gray-300 p-0 relative ${
-                        selectedCell?.row === rowIndex && selectedCell?.col === colIndex
-                          ? 'bg-blue-50'
-                          : ''
-                      }`}
-                    >
-                      <input
-                        type="text"
-                        className={`w-full h-full px-2 py-1 border-none outline-none bg-transparent ${
-                          isInvalid ? 'bg-red-50' : ''
-                        }`}
-                        value={data[rowIndex][colIndex]}
-                        onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
-                        onClick={() => handleCellSelect(rowIndex, colIndex)}
-                      />
-                    </td>
-                  );
-                })}
+                {Array(COLS).fill().map((_, colIndex) => (
+                  <Cell
+                    key={colIndex}
+                    value={data[rowIndex][colIndex]}
+                    rowIndex={rowIndex}
+                    colIndex={colIndex}
+                  />
+                ))}
               </tr>
             ))}
           </tbody>