kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,92 +1,208 @@
-import { useRef, useState } from "react";
-import { DataTableColumnsInterface } from "../dataTable.interface";
-import { DataTableRowOverlay } from "./dataTableRowOverlay/DataTableRowOverlay";
-import { DataTableRowValue } from "./dataTableRowValue/DataTableRowValue";
+import { Icon } from "../..";
+import { Select } from "../../select/Select";
+import { dataTableColumnsInterface } from "../dataTable.interface";
 
 type DataTableRowProps = {
-  column: DataTableColumnsInterface<any>;
+  column: dataTableColumnsInterface<any>;
   idx: number;
+  rowIndex: number;
   row: any;
-  onEditColumnByOverlay?: (row: any) => void;
-  stickyLeft?: number;
+  container?: "cell" | "card";
+  onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
 export const DataTableRow = ({
   column,
   idx,
+  rowIndex,
   row,
-  onEditColumnByOverlay,
-  stickyLeft,
+  container = "cell",
+  onEnterNextColumn,
 }: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
   const style = column.onRowStyle ? column.onRowStyle(row) : {};
   const isDisabled = column.onDisable?.(row) ?? false;
-  const isSticky = stickyLeft !== undefined;
-  const [openClickCell, setOpenClickCell] = useState(false);
-  const refRow = useRef<HTMLTableCellElement>(null);
-  const onClickRenderCell = (e: React.MouseEvent<HTMLTableCellElement>) => {
-    if (isDisabled) {
-      return;
+
+  const hasStepButtons = Boolean(
+    typeof column.showStepButtons === "function"
+      ? column.showStepButtons(row)
+      : (column.showStepButtons ??
+        (typeof column.stepControls === "function"
+          ? column.stepControls(row)
+          : (column.stepControls ??
+            (typeof column.withStepControls === "function"
+              ? column.withStepControls(row)
+              : column.withStepControls)))),
+  );
+
+  const handleStep = (direction: "plus" | "minus", e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isDisabled) return;
+    const currentNum = Number(value) || 0;
+    const step = column.step ?? 1;
+    let newNum = direction === "plus" ? currentNum + step : currentNum - step;
+    if (column.min !== undefined && newNum < column.min) {
+      newNum = column.min;
+    }
+    if (column.max !== undefined && newNum > column.max) {
+      newNum = column.max;
     }
-    console.log("Cell clicked with value:", value, "in row:", row);
-    if (column.openClickCell) {
-      if (column.handleClickCell) {
-        column.handleClickCell(e, row);
-      }
-      e.stopPropagation();
-      setOpenClickCell((prev) => !prev);
+    newNum = Math.round(newNum * 1000) / 1000;
+    if (column.onEdit) {
+      column.onEdit(newNum, row);
     }
   };
+
+  const Container = container === "card" ? "div" : "td";
+
   return (
-    <td
-      ref={refRow}
+    <Container
+      className={`${isDisabled ? "disabled" : ""}`}
+      data-column-index={idx}
+      data-row-index={rowIndex}
       style={{
         minWidth: column.minWidth,
-        textAlign: column.alignText ? column.alignText : column.align || "left",
+        textAlign: column.align || "left",
         maxWidth: column.maxWidth,
         width: column.width,
-        ...(!isDisabled &&
-        (column.openClickCell || column.renderClickCellComponent)
-          ? { cursor: "pointer" }
-          : {}),
-        ...(isSticky
-          ? {
-              position: "sticky",
-              left: stickyLeft,
-              zIndex: 2,
-              backgroundColor: "#fff",
-            }
-          : {}),
         ...style,
       }}
-      onClick={onClickRenderCell}
       key={`row-${column.id}-${idx}`}
-      className={isSticky ? "data-table-sticky-cell" : ""}
     >
-      {column.renderComponent ? column.renderComponent(value, row) : null}
-      {!column.renderComponent && (
-        <DataTableRowValue
-          editable={
-            !isDisabled &&
-            (column.onEditable?.(value, row) ?? column.editable ?? false)
-          }
-          column={column}
-          value={value}
-          row={row}
-        />
-      )}
-      {openClickCell &&
-        !isDisabled &&
-        column.displayOverlay &&
-        refRow.current && (
-          <DataTableRowOverlay
-            refRow={refRow}
-            column={column}
-            row={row}
-            value={value}
-            onEditColumnByOverlay={onEditColumnByOverlay}
-            onClose={() => setOpenClickCell(false)}
+      {column.type === "image" ? (
+        value ? (
+          <img
+            src={column.imageSrc ? column.imageSrc(row) : ""}
+            alt={column.imageAlt ? column.imageAlt(row) : ""}
+            style={column.imageStyle}
           />
-        )}
-    </td>
+        ) : (
+          <Icon classIcon="bi-image" />
+        )
+      ) : column.editable ? (
+        column.type === "select" ? (
+          <div onClick={(e) => e.stopPropagation()}>
+            <Select
+              style={{
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                width: column.width,
+              }}
+              options={column.options ?? []}
+              value={value}
+              onChange={(e) => {
+                if (column.onEdit) {
+                  column.onEdit(e, row);
+                }
+              }}
+            />
+          </div>
+        ) : (
+          hasStepButtons ? (
+            <div
+              className="data-table-input-number-wrapper"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                justifyContent:
+                  column.align === "right"
+                    ? "flex-end"
+                    : column.align === "center"
+                      ? "center"
+                      : "flex-start",
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--minus"
+                disabled={
+                  isDisabled ||
+                  (column.min !== undefined && Number(value) <= column.min)
+                }
+                onClick={(e) => handleStep("minus", e)}
+              >
+                <Icon classIcon="bi-dash-lg" />
+              </button>
+              <input
+                type={column.type}
+                value={value}
+                step={column.step ?? "0.01"}
+                min={column.min}
+                max={column.max}
+                disabled={isDisabled}
+                style={{
+                  textAlign: column.align || "center",
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  width: column.width,
+                }}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (column.onEnter) {
+                      column.onEnter(e.currentTarget.value, row);
+                    }
+                    if (column.enterToNextColumn) {
+                      e.preventDefault();
+                      onEnterNextColumn?.(idx, rowIndex);
+                    }
+                  }
+                }}
+                onChange={(e) => {
+                  if (column.onEdit) {
+                    column.onEdit(e.target.value, row);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--plus"
+                disabled={
+                  isDisabled ||
+                  (column.max !== undefined && Number(value) >= column.max)
+                }
+                onClick={(e) => handleStep("plus", e)}
+              >
+                <Icon classIcon="bi-plus-lg" />
+              </button>
+            </div>
+          ) : (
+            <input
+              type={column.type}
+              value={value}
+              step="0.01"
+              style={{
+                textAlign: column.align || "left",
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                width: column.width,
+              }}
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  if (column.onEnter) {
+                    column.onEnter(e.currentTarget.value, row);
+                  }
+                  if (column.enterToNextColumn) {
+                    e.preventDefault();
+                    onEnterNextColumn?.(idx, rowIndex);
+                  }
+                }
+              }}
+              onChange={(e) => {
+                if (column.onEdit) {
+                  column.onEdit(e.target.value, row);
+                }
+              }}
+            />
+          )
+        )
+      ) : column.format ? (
+        column.format(value)
+      ) : (
+        value
+      )}
+    </Container>
   );
 };

package/src/expands/Expands.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from "react";
 import { Expand } from "./expand/expand";
 import { ExpandInterface } from "./expand/expand.interface";
 import "./expands.css";
@@ -8,9 +9,23 @@ type ExpandProps = {
   onChange?: (item: ExpandInterface) => void;
   currentItem?: ExpandInterface;
   showArrow?: boolean;
+  catchfocusCapture?: boolean;
 };
 
 export const Expands = (props: ExpandProps) => {
+  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
+  const onChangeExpand = useCallback(
+    (item: ExpandInterface) => {
+      if (props.onChange) {
+        props.onChange(item);
+      }
+      setCurrentExpand(item);
+    },
+    [setCurrentExpand, props.onChange]
+  );
+  useEffect(() => {
+    setCurrentExpand(props.currentItem);
+  }, [props.currentItem, setCurrentExpand, document.activeElement]);
   return (
     <div className={`expands ${props.className || ""}`}>
       {props.items.map((item: ExpandInterface) => (
@@ -18,8 +33,9 @@ export const Expands = (props: ExpandProps) => {
           key={item.id}
           item={item}
           showArrow={props.showArrow}
-          onChange={props.onChange}
-          currentExpand={props.currentItem}
+          onChange={onChangeExpand}
+          currentExpand={currentExpand}
+          catchfocusCapture={props.catchfocusCapture}
         />
       ))}
     </div>

package/src/expands/expand/expand.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { ExpandInterface } from "./expand.interface";
 
@@ -7,22 +7,143 @@ export type ExpandProps = {
   item: ExpandInterface;
   className?: string;
   showArrow?: boolean;
-  onChange?: (item: ExpandInterface) => void;
+  catchfocusCapture?: boolean
+
+  onChange: (item: ExpandInterface) => void;
 };
 export const Expand = ({
   currentExpand,
   item,
   className,
   showArrow = true,
+  catchfocusCapture = false,
   onChange,
 }: ExpandProps): JSX.Element => {
-  const active = currentExpand?.id === item.id;
-  console.log("render expand", item.title, "active", active);
+  const [active, setActive] = useState<boolean>(false);
+  const expandRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+
+    if (item && currentExpand) {
+      if (currentExpand.id === item.id) {
+        if (!active) {
+          setActive(true);
+        }
+      } else {
+        setActive(false);
+      }
+    } else {
+      setActive(false);
+    }
+  }, [currentExpand, setActive, item, active]);
+
+  const scrollToHeader = useCallback(() => {
+    const expandElement = expandRef.current;
+    if (!expandElement) return;
+
+    let scrollParent: HTMLElement | null = expandElement.parentElement;
+    while (scrollParent) {
+      const style = window.getComputedStyle(scrollParent);
+      const isScrollable =
+        /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+        scrollParent.scrollHeight > scrollParent.clientHeight;
+
+      if (isScrollable) {
+        const parentRect = scrollParent.getBoundingClientRect();
+        const targetRect = expandElement.getBoundingClientRect();
+        const offsetTop =
+          targetRect.top - parentRect.top + scrollParent.scrollTop;
+
+        scrollParent.scrollTo({
+          top: offsetTop,
+          behavior: "smooth",
+        });
+        return;
+      }
+      scrollParent = scrollParent.parentElement;
+    }
+
+    const header =
+      expandElement.querySelector<HTMLElement>(".expand-header") ||
+      expandElement;
+    header.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  useEffect(() => {
+    if (!catchfocusCapture) return;
+    if (active) {
+      const timer1 = setTimeout(() => {
+        scrollToHeader();
+      }, 100);
+      const timer2 = setTimeout(() => {
+        scrollToHeader();
+      }, 350);
+      return () => {
+        clearTimeout(timer1);
+        clearTimeout(timer2);
+      };
+    }
+  }, [active, scrollToHeader, catchfocusCapture]);
+
+  const handleFocusCapture = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      if (!catchfocusCapture) return;
+      const target = e.target as HTMLElement;
+      if (
+        active &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT")
+      ) {
+        const expandElement = expandRef.current;
+        if (!expandElement) return;
+
+        const performScroll = () => {
+          let scrollParent: HTMLElement | null = expandElement.parentElement;
+          while (scrollParent) {
+            const style = window.getComputedStyle(scrollParent);
+            const isScrollable =
+              /(auto|scroll)/.test(style.overflow + style.overflowY) &&
+              scrollParent.scrollHeight > scrollParent.clientHeight;
+
+            if (isScrollable) {
+              const parentRect = scrollParent.getBoundingClientRect();
+              const headerRect = expandElement.getBoundingClientRect();
+              const headerOffsetTop =
+                headerRect.top - parentRect.top + scrollParent.scrollTop;
+
+              // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
+              if (scrollParent.scrollTop >= headerOffsetTop - 10) {
+                const targetRect = target.getBoundingClientRect();
+                if (targetRect.bottom > parentRect.bottom) {
+                  target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                }
+                return;
+              }
+
+              // Si on n'a pas encore scrollé jusqu'au header, on y va
+              scrollParent.scrollTo({
+                top: headerOffsetTop,
+                behavior: "smooth",
+              });
+              return;
+            }
+            scrollParent = scrollParent.parentElement;
+          }
+        };
+
+        performScroll();
+        // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
+        setTimeout(performScroll, 300);
+      }
+    },
+    [active],
+  );
+
   const handleChange = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation();
       if (onChange) {
-        console.log("expand", item);
         onChange(item);
       }
     },
@@ -30,7 +151,9 @@ export const Expand = ({
   );
   return (
     <div
+      ref={expandRef}
       onClick={handleChange}
+      onFocusCapture={handleFocusCapture}
       className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
     >
       <div className={`expand-header`}>

package/src/expands/expands.css

@@ -39,10 +39,12 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
+
       .expand-header {
-        background-color: #1d3758;
+        background-color: color-mix(in srgb, var(--primary-color), white 5%);
         color: #fff;
       }
+
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -65,6 +67,7 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
+
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -77,13 +80,15 @@
       .expand-header-title-left {
         margin-right: 0.5rem;
         text-transform: uppercase;
-        font-size: 14px;
+        font-size: 18px;
         font-weight: 500;
       }
     }
+
     & .expand-footer {
       padding: 15px;
     }
+
     & .expand-body {
       display: none;
       flex: 1;
@@ -94,4 +99,4 @@
       flex-direction: column;
     }
   }
-}
+}