kelt-ui-kit-react 2.0.1 → 2.0.3

package/src/damier/Damier.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import "./damier.css";
 import { DamierCell } from "./damierCell/DamierCell";
 import { DamierCellInterface } from "./damierCell/damierCell.interface";
@@ -17,7 +17,7 @@ export const Damier = ({
   onClick,
 }: DamierProps) => {
   const nbCols = useMemo(() => cols ?? 9, [cols]);
-  const nbRows = useMemo(() => Math.max(1, rows ?? 9), [rows]);
+  const nbRows = useMemo(() => rows ?? 9, [rows]);
   const [currentPage, setCurrentPage] = useState(1);
   useEffect(() => {
     setCurrentPage(page);
@@ -30,35 +30,26 @@ export const Damier = ({
       for (let col = 0; col < nbCols; col++) {
         const position = col + row * nbCols;
         const cell = damierCells?.find(
-          (cell) => cell.position === position + 1,
+          (cell) => cell.position === position + 1
         );
         if (!cell) {
           colsArray.push(
-            <div key={`${row}-${col}`} className="cell cell--empty"></div>,
+            <div key={`${row}-${col}`} className="cell cell--empty"></div>
           );
         } else {
           colsArray.push(
-            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />,
+            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />
           );
         }
       }
       rowsArray.push(
         <div key={row} className="row">
           {colsArray}
-        </div>,
+        </div>
       );
     }
     return rowsArray;
   }, [nbCols, nbRows, currentPage]);
 
-  const damierStyle = useMemo(
-    () => ({ "--rows": String(nbRows) }) as CSSProperties,
-    [nbRows],
-  );
-
-  return (
-    <div className="damier" style={damierStyle}>
-      {grid}
-    </div>
-  );
+  return <div className="damier">{grid}</div>;
 };

package/src/damier/damier.css

@@ -5,17 +5,14 @@
   margin-bottom: 1rem;
   width: 100%;
   --sizeDamier: 630;
-  --rows: 9;
-
   .row {
     display: flex;
     height: 90px;
-    width: calc(var(--sizeDamier) / var(--rows));
+    width: calc(var(--sizeDamier) / 9);
     min-height: 40px;
   }
 
   .cell {
-    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -25,11 +22,9 @@
     align-items: center;
     justify-content: center;
     background-color: #fff;
-
     &.cell--empty {
       background: #f9f9f9;
     }
-
     &:not(.cell--empty) {
       cursor: pointer;
     }
@@ -39,13 +34,11 @@
 @media (min-width: 768px) {
   .damier {
     --sizeDamier: 990;
-
     .row {
-      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
+      height: calc(100vh / 9.6);
     }
-
     .cell {
-      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
+      height: calc(100vh / 9) - 1;
     }
   }
-}
+}