kelt-ui-kit-react 2.0.2 → 2.0.3

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,208 +1,92 @@
-import { Icon } from "../..";
-import { Select } from "../../select/Select";
-import { dataTableColumnsInterface } from "../dataTable.interface";
+import { useRef, useState } from "react";
+import { DataTableColumnsInterface } from "../dataTable.interface";
+import { DataTableRowOverlay } from "./dataTableRowOverlay/DataTableRowOverlay";
+import { DataTableRowValue } from "./dataTableRowValue/DataTableRowValue";
 
 type DataTableRowProps = {
-  column: dataTableColumnsInterface<any>;
+  column: DataTableColumnsInterface<any>;
   idx: number;
-  rowIndex: number;
   row: any;
-  container?: "cell" | "card";
-  onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
+  onEditColumnByOverlay?: (row: any) => void;
+  stickyLeft?: number;
 };
 export const DataTableRow = ({
   column,
   idx,
-  rowIndex,
   row,
-  container = "cell",
-  onEnterNextColumn,
+  onEditColumnByOverlay,
+  stickyLeft,
 }: 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 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;
+  const isSticky = stickyLeft !== undefined;
+  const [openClickCell, setOpenClickCell] = useState(false);
+  const refRow = useRef<HTMLTableCellElement>(null);
+  const onClickRenderCell = (e: React.MouseEvent<HTMLTableCellElement>) => {
+    if (isDisabled) {
+      return;
     }
-    newNum = Math.round(newNum * 1000) / 1000;
-    if (column.onEdit) {
-      column.onEdit(newNum, row);
+    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);
     }
   };
-
-  const Container = container === "card" ? "div" : "td";
-
   return (
-    <Container
-      className={`${isDisabled ? "disabled" : ""}`}
-      data-column-index={idx}
-      data-row-index={rowIndex}
+    <td
+      ref={refRow}
       style={{
         minWidth: column.minWidth,
-        textAlign: column.align || "left",
+        textAlign: column.alignText ? column.alignText : 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.type === "image" ? (
-        value ? (
-          <img
-            src={column.imageSrc ? column.imageSrc(row) : ""}
-            alt={column.imageAlt ? column.imageAlt(row) : ""}
-            style={column.imageStyle}
-          />
-        ) : (
-          <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
+      {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}
+        />
       )}
-    </Container>
+      {openClickCell &&
+        !isDisabled &&
+        column.displayOverlay &&
+        refRow.current && (
+          <DataTableRowOverlay
+            refRow={refRow}
+            column={column}
+            row={row}
+            value={value}
+            onEditColumnByOverlay={onEditColumnByOverlay}
+            onClose={() => setOpenClickCell(false)}
+          />
+        )}
+    </td>
   );
 };

package/src/dataTable/dataTableRow/dataTableRowOverlay/DataTableRowOverlay.tsx

@@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { Button } from "../../../button/Button";
+import { OverlayPanel } from "../../../overlayPanel/OverlayPanel";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+import { DataTableRowValue } from "../dataTableRowValue/DataTableRowValue";
+
+type DataTableRowOverlayProps = {
+  row: any;
+  column: DataTableColumnsInterface<any>;
+  value: string;
+  refRow: React.RefObject<HTMLTableCellElement>;
+  onClose?: (close: boolean) => void;
+  onEditColumnByOverlay?: (newRow: any) => void;
+};
+export const DataTableRowOverlay = ({
+  row,
+  refRow,
+  value,
+  onClose,
+  column,
+  onEditColumnByOverlay,
+}: DataTableRowOverlayProps) => {
+  const [inputValue, setInputValue] = useState(value);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const onChange = (newValue: any) => {
+    setInputValue(newValue);
+  };
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (onEditColumnByOverlay) {
+      const newRow = { ...row, [column.id]: inputValue };
+      onEditColumnByOverlay(newRow);
+    }
+    if (onClose) {
+      onClose(true);
+    }
+  };
+
+  const handleButtonClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+    formRef.current?.requestSubmit();
+  };
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose(true);
+    }
+  };
+
+  return (
+    <OverlayPanel
+      show={true}
+      position="bottomLeft"
+      closeOverlay={handleClose}
+      referenceElement={refRow?.current ?? undefined}
+      children={
+        <div className="d-flex flex-column pt-3">
+          <form onSubmit={onSubmit} ref={formRef}>
+            <DataTableRowValue
+              editable={true}
+              column={column}
+              value={inputValue}
+              row={row}
+              onChange={onChange}
+            />
+            {onEditColumnByOverlay && (
+              <div className="d-flex justify-content-end mt-2">
+                <Button title="Valider" onClick={handleButtonClick} />
+              </div>
+            )}
+          </form>
+        </div>
+      }
+    />
+  );
+};

package/src/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from "react";
+import { Select } from "../../../select/Select";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+
+type DataTableRowValueProps = {
+  column: DataTableColumnsInterface<any>;
+  value: any;
+  row: any;
+  editable?: boolean;
+  onChange?: (value: any) => void;
+};
+export const DataTableRowValue = ({
+  column,
+  row,
+  value,
+  editable,
+  onChange,
+}: DataTableRowValueProps) => {
+  const [draftValue, setDraftValue] = useState(value ?? "");
+  const editOnEnter = column.onEditTrigger === "enter";
+  const skipNextBlurCommit = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wasEditableRef = useRef(false);
+
+  const selectInputText = () => {
+    try {
+      inputRef.current?.select();
+    } catch {
+      // Some input types (e.g. date) may not support text selection.
+    }
+  };
+
+  const commitValue = (nextValue: any) => {
+    if (column.onEdit) {
+      column.onEdit(nextValue, row);
+    }
+  };
+
+  useEffect(() => {
+    setDraftValue(value ?? "");
+  }, [value]);
+
+  useEffect(() => {
+    if (editable && !wasEditableRef.current) {
+      inputRef.current?.focus();
+      selectInputText();
+    }
+    wasEditableRef.current = !!editable;
+  }, [editable]);
+
+  return (
+    <>
+      {editable ? (
+        column.type === "select" ? (
+          <Select
+            options={column.options ?? []}
+            value={value}
+            onChange={(e) => {
+              if (onChange) {
+                onChange(e);
+              }
+              if (column.onChange) {
+                column.onChange(e, row);
+              }
+              if (column.onEdit) {
+                column.onEdit(e, row);
+              }
+            }}
+          />
+        ) : (
+          <input
+            ref={inputRef}
+            type={column.type}
+            value={editOnEnter ? draftValue : value}
+            step="0.01"
+            style={{
+              textAlign: column.alignText
+                ? column.alignText
+                : column.align || "left",
+            }}
+            onFocus={selectInputText}
+            onChange={(e) => {
+              const nextValue = e.target.value;
+              if (onChange) {
+                onChange(nextValue);
+              }
+              if (column.onChange) {
+                column.onChange(nextValue, row);
+              }
+              if (editOnEnter) {
+                setDraftValue(nextValue);
+                return;
+              }
+              commitValue(nextValue);
+            }}
+            onKeyDown={(e) => {
+              if (editOnEnter && e.key === "Enter") {
+                skipNextBlurCommit.current = true;
+                commitValue(draftValue);
+              }
+            }}
+            onBlur={() => {
+              if (!editOnEnter) {
+                return;
+              }
+              if (skipNextBlurCommit.current) {
+                skipNextBlurCommit.current = false;
+                return;
+              }
+              if (draftValue !== value) {
+                commitValue(draftValue);
+              }
+            }}
+          />
+        )
+      ) : column.format ? (
+        column.format(value)
+      ) : (
+        value
+      )}
+    </>
+  );
+};

package/src/expands/Expands.tsx

@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useState } from "react";
 import { Expand } from "./expand/expand";
 import { ExpandInterface } from "./expand/expand.interface";
 import "./expands.css";
@@ -12,19 +11,6 @@ type ExpandProps = {
 };
 
 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) => (
@@ -32,8 +18,8 @@ export const Expands = (props: ExpandProps) => {
           key={item.id}
           item={item}
           showArrow={props.showArrow}
-          onChange={onChangeExpand}
-          currentExpand={currentExpand}
+          onChange={props.onChange}
+          currentExpand={props.currentItem}
         />
       ))}
     </div>

package/src/expands/expand/expand.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } from "react";
 import { Icon } from "../../icon/Icon";
 import { ExpandInterface } from "./expand.interface";
 
@@ -7,7 +7,7 @@ export type ExpandProps = {
   item: ExpandInterface;
   className?: string;
   showArrow?: boolean;
-  onChange: (item: ExpandInterface) => void;
+  onChange?: (item: ExpandInterface) => void;
 };
 export const Expand = ({
   currentExpand,
@@ -16,128 +16,13 @@ export const Expand = ({
   showArrow = true,
   onChange,
 }: ExpandProps): JSX.Element => {
-  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 (active) {
-      const timer1 = setTimeout(() => {
-        scrollToHeader();
-      }, 100);
-      const timer2 = setTimeout(() => {
-        scrollToHeader();
-      }, 350);
-      return () => {
-        clearTimeout(timer1);
-        clearTimeout(timer2);
-      };
-    }
-  }, [active, scrollToHeader]);
-
-  const handleFocusCapture = useCallback(
-    (e: React.FocusEvent<HTMLDivElement>) => {
-      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 active = currentExpand?.id === item.id;
+  console.log("render expand", item.title, "active", active);
   const handleChange = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation();
       if (onChange) {
+        console.log("expand", item);
         onChange(item);
       }
     },
@@ -145,9 +30,7 @@ export const Expand = ({
   );
   return (
     <div
-      ref={expandRef}
       onClick={handleChange}
-      onFocusCapture={handleFocusCapture}
       className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
     >
       <div className={`expand-header`}>