kelt-ui-kit-react 1.8.2 → 1.8.3

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterStringProps = {
+  id: string;
+  name: string;
+  label: string;
+  onChange: (value: string) => void;
+  currentValue?: string;
+};
+export const DataTableColumnFilterString = ({
+  id,
+  name,
+  label,
+  onChange,
+  currentValue,
+}: DataTableColumnFilterStringProps) => {
+  const [selectedValue, setSelectedValue] = useState<string>(
+    currentValue ?? "",
+  );
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    onChange(value);
+  };
+  return (
+    <div>
+      <p>{label}</p>
+      <Input
+        id={id}
+        name={name}
+        value={selectedValue}
+        onChange={(e) => handleChange(e.target.value)}
+      />
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx

@@ -0,0 +1,42 @@
+import { Icon } from "../../../icon/Icon";
+import { DataTableSortDirection } from "../../DataTable";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+
+type DataTableColumnSortProps<T> = {
+  className?: string;
+  column: DataTableColumnsInterface<T>;
+  sortDirection?: DataTableSortDirection | null;
+  onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+};
+
+export const DataTableColumnSort = <T,>({
+  className,
+  column,
+  sortDirection,
+  onToggleSort,
+}: DataTableColumnSortProps<T>) => {
+  const iconClass =
+    sortDirection === "asc"
+      ? "bi-sort-up"
+      : sortDirection === "desc"
+        ? "bi-sort-down"
+        : "bi-arrow-down-up";
+
+  return (
+    <div
+      className={`data-table-column-sort ${sortDirection ? "active" : ""} ${className ?? ""}`}
+    >
+      <span>
+        <Icon
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleSort?.(column);
+          }}
+          classIcon={`${iconClass} cursor-pointer ${
+            sortDirection ? "data-table-column-sort-active" : ""
+          }`}
+        />
+      </span>
+    </div>
+  );
+};

package/src/dataTable/dataTableFilters/DataTableFilters.tsx

@@ -0,0 +1,91 @@
+import { Badge } from "../../badge/Badge";
+import { Icon } from "../../icon/Icon";
+import {
+  DataTableDateRangeFilterValue,
+  DataTableFilterState,
+} from "../DataTable";
+import "./dataTableFilters.css";
+export type DataTableFiltersProps = {
+  currentFilters: DataTableFilterState;
+  setCurrentFilters: React.Dispatch<React.SetStateAction<DataTableFilterState>>;
+};
+export const DataTableFilters = ({
+  currentFilters,
+  setCurrentFilters,
+}: DataTableFiltersProps) => {
+  const isDateRangeFilterValue = (
+    value: DataTableFilterState[string],
+  ): value is DataTableDateRangeFilterValue => {
+    return (
+      typeof value === "object" &&
+      value !== null &&
+      "startDate" in value &&
+      "endDate" in value
+    );
+  };
+
+  const getDisplayValue = (value: DataTableFilterState[string]) => {
+    if (isDateRangeFilterValue(value)) {
+      if (value.startDate && value.endDate) {
+        return `${value.startDate} - ${value.endDate}`;
+      }
+
+      if (value.startDate) {
+        return `a partir de ${value.startDate}`;
+      }
+
+      if (value.endDate) {
+        return `jusqu'au ${value.endDate}`;
+      }
+
+      return "";
+    }
+
+    return String(value ?? "");
+  };
+
+  const generateColor = (str: string): string => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    const hue = hash % 360;
+    return `hsl(${hue}, 80%, 30%)`;
+  };
+
+  const removeFilters = (key: string) => {
+    setCurrentFilters((prev: any) => {
+      const { [key]: _removed, ...rest } = prev;
+      return rest;
+    });
+  };
+  if (!currentFilters || Object.keys(currentFilters).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="badge-filters">
+      {Object.keys(currentFilters).map((key) => {
+        const value = getDisplayValue(currentFilters[key]);
+        const displayValue =
+          value.length > 20 ? value.substring(0, 20) + "..." : value;
+
+        return (
+          <Badge
+            onRemove={() => removeFilters(key)}
+            className="mr-2"
+            title={`${key} : ${displayValue}`}
+            color={generateColor(key)}
+            key={key}
+          />
+        );
+      })}
+
+      <Icon
+        classIcon="bi-x badge-filters-clear"
+        onClick={() => setCurrentFilters({})}
+      />
+    </div>
+  );
+};

package/src/dataTable/dataTableFilters/dataTableFilters.css

@@ -0,0 +1,16 @@
+.badge-filters {
+  border-radius: 4px;
+  padding: 0.25rem;
+  border: 1px solid #dedede;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  position: sticky;
+  left: 0;
+  .badge-filters-clear {
+    padding: 0.05rem;
+    border: 1px solid #dedede;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}

package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -1,21 +1,10 @@
 type DataTableLoadingProps = {
-  columns: any[];
-  actions: any[];
   emptyMessage?: string;
 };
-export const DataTableLoading = ({
-  columns,
-  actions,
-  emptyMessage,
-}: DataTableLoadingProps) => {
+export const DataTableLoading = ({ emptyMessage }: DataTableLoadingProps) => {
   return (
-    <tr>
-      <td
-        align="center"
-        colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-      >
-        <div className="mt-3">{emptyMessage || "Aucune donnée disponible"}</div>
-      </td>
-    </tr>
+    <div className="data-table-empty-state-content mt-3">
+      {emptyMessage || "Aucune donnée disponible"}
+    </div>
   );
 };

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,53 +1,80 @@
-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;
   row: any;
+  onEditColumnByOverlay?: (row: any) => void;
+  stickyLeft?: number;
 };
-export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
+export const DataTableRow = ({
+  column,
+  idx,
+  row,
+  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 isSticky = stickyLeft !== undefined;
+  const [openClickCell, setOpenClickCell] = useState(false);
+  const refRow = useRef<HTMLTableCellElement>(null);
+  const onClickRenderCell = (e: React.MouseEvent<HTMLTableCellElement>) => {
+    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);
+    }
+  };
   return (
     <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,
+        ...(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.editable ? (
-        column.type === "select" ? (
-          <Select
-            options={column.options ?? []}
-            value={value}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e, row);
-              }
-            }}
-          />
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{ textAlign: column.align || "left" }}
-            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={column.onEditable?.(value, row) ?? column.editable ?? false}
+          column={column}
+          value={value}
+          row={row}
+        />
+      )}
+      {openClickCell && 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, 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,29 +16,17 @@ export const Expand = ({
   showArrow = true,
   onChange,
 }: ExpandProps): JSX.Element => {
-  const [active, setActive] = useState<boolean>(false);
-  useEffect(() => {
-    if (item && currentExpand) {
-      if (currentExpand.id === item.id) {
-        if (!active) {
-          setActive(true);
-        }
-      } else {
-        setActive(false);
-      }
-    } else {
-      setActive(false);
-    }
-  }, [currentExpand, setActive, item]);
-
+  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);
       }
     },
-    [onChange, item]
+    [onChange, item],
   );
   return (
     <div