kelt-ui-kit-react 1.7.6 → 1.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/damier/Damier.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { CSSProperties, 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(() => rows ?? 9, [rows]);
+  const nbRows = useMemo(() => Math.max(1, rows ?? 9), [rows]);
   const [currentPage, setCurrentPage] = useState(1);
   useEffect(() => {
     setCurrentPage(page);
@@ -30,26 +30,35 @@ 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]);
 
-  return <div className="damier">{grid}</div>;
+  const damierStyle = useMemo(
+    () => ({ "--rows": String(nbRows) }) as CSSProperties,
+    [nbRows],
+  );
+
+  return (
+    <div className="damier" style={damierStyle}>
+      {grid}
+    </div>
+  );
 };

package/src/damier/damier.css

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