kelt-ui-kit-react 2.0.8 → 2.0.9

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,23 @@
-type DataTableLoadingProps = {
-  columns: any[];
-  actions: any[];
-  emptyMessage?: string;
-};
-export const DataTableLoading = ({
-  columns,
-  actions,
-  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>
-  );
-};
+type DataTableLoadingProps = {
+  columns: any[];
+  actions: any[];
+  emptyMessage?: string;
+  hasSelection?: boolean;
+};
+export const DataTableLoading = ({
+  columns,
+  actions,
+  emptyMessage,
+  hasSelection = false,
+}: DataTableLoadingProps) => {
+  return (
+    <tr>
+      <td
+        align="center"
+        colSpan={columns.length + (actions.length > 0 ? 1 : 0) + (hasSelection ? 1 : 0)}
+      >
+        <div className="mt-3">{emptyMessage || "Aucune donnée disponible"}</div>
+      </td>
+    </tr>
+  );
+};

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,208 +1,155 @@
-import { Icon } from "../..";
-import { Select } from "../../select/Select";
-import { dataTableColumnsInterface } from "../dataTable.interface";
-
-type DataTableRowProps = {
-  column: dataTableColumnsInterface<any>;
-  idx: number;
-  rowIndex: number;
-  row: any;
-  container?: "cell" | "card";
-  onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
-};
-export const DataTableRow = ({
-  column,
-  idx,
-  rowIndex,
-  row,
-  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 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;
-    }
-    newNum = Math.round(newNum * 1000) / 1000;
-    if (column.onEdit) {
-      column.onEdit(newNum, row);
-    }
-  };
-
-  const Container = container === "card" ? "div" : "td";
-
-  return (
-    <Container
-      className={`${isDisabled ? "disabled" : ""}`}
-      data-column-index={idx}
-      data-row-index={rowIndex}
-      style={{
-        minWidth: column.minWidth,
-        textAlign: column.align || "left",
-        maxWidth: column.maxWidth,
-        width: column.width,
-        ...style,
-      }}
-      key={`row-${column.id}-${idx}`}
-    >
-      {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
-      )}
-    </Container>
-  );
-};
+import { useEffect, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { OverlayPanel } from "../../overlayPanel/OverlayPanel";
+import { Select } from "../../select/Select";
+import { dataTableColumnsInterface } from "../dataTable.interface";
+import { getColumnValue } from "../dataTable.utils";
+
+type DataTableRowProps<T> = {
+  column: dataTableColumnsInterface<T>;
+  idx: number;
+  rowIndex: number;
+  row: T;
+  container?: "cell" | "card";
+  stickyLeft?: number;
+  onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
+  onEditColumnByOverlay?: (row: T) => void;
+};
+
+export const DataTableRow = <T,>({
+  column, idx, rowIndex, row, container = "cell", stickyLeft,
+  onEnterNextColumn, onEditColumnByOverlay,
+}: DataTableRowProps<T>) => {
+  const value = getColumnValue(row, column);
+  const stringValue = value == null ? "" : String(value);
+  const [draft, setDraft] = useState(stringValue);
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const [overlayValue, setOverlayValue] = useState(stringValue);
+  const cellRef = useRef<HTMLTableCellElement & HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const skipBlurCommit = useRef(false);
+  const isDisabled = column.onDisable?.(row) ?? false;
+  const editable = column.onEditable?.(value, row) ?? column.editable ?? false;
+  const enterCommit = column.onEditTrigger === "enter";
+  const align = column.alignText ?? column.align ?? "left";
+  useEffect(() => { setDraft(stringValue); }, [stringValue]);
+  useEffect(() => { if (editable && column.openClickCell && !isDisabled) inputRef.current?.focus(); }, [editable, column.openClickCell, isDisabled]);
+
+  const hasStepButtons = [column.showStepButtons, column.stepControls, column.withStepControls]
+    .map((setting) => typeof setting === "function" ? setting(row) : setting)
+    .find((setting) => setting !== undefined) ?? false;
+
+  function commit(next: string | number | boolean) {
+    if (isDisabled) return;
+    column.onEdit?.(next, row);
+  }
+
+  function handleStep(direction: number) {
+    const current = Number(enterCommit ? draft : value) || 0;
+    const next = Math.round(Math.min(column.max ?? Infinity,
+      Math.max(column.min ?? -Infinity, current + direction * (column.step ?? 1))) * 1000) / 1000;
+    setDraft(String(next));
+    column.onChange?.(next, row);
+    commit(next);
+  }
+
+  function handleInput(next: string | boolean) {
+    if (isDisabled) return;
+    skipBlurCommit.current = false;
+    setDraft(String(next));
+    column.onChange?.(next, row);
+    if (!enterCommit) commit(next);
+  }
+
+  const editor = column.type === "select" ? (
+    <Select options={column.options ?? []} value={enterCommit ? draft : stringValue}
+      disabled={isDisabled} usePortal onChange={(next) => {
+        column.onChange?.(next, row);
+        commit(next);
+      }}
+      style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, width: column.width }} />
+  ) : (
+    <input ref={inputRef} type={column.type === "image" ? "text" : column.type}
+      value={enterCommit ? draft : stringValue}
+      checked={column.type === "checkbox" || column.type === "radio" ? Boolean(value) : undefined}
+      autoComplete={column.autoComplete} disabled={isDisabled}
+      step={column.step ?? "0.01"} min={column.min} max={column.max}
+      style={{ textAlign: align, minWidth: column.minWidth, maxWidth: column.maxWidth, width: column.width }}
+      onClick={(event) => event.stopPropagation()}
+      onChange={(event) => handleInput(column.type === "checkbox" ? event.target.checked : event.target.value)}
+      onBlur={() => {
+        if (!enterCommit) return;
+        if (skipBlurCommit.current) { skipBlurCommit.current = false; return; }
+        if (draft !== stringValue) commit(draft);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          setDraft(stringValue);
+          skipBlurCommit.current = true;
+        }
+        if (event.key !== "Enter") return;
+        if (enterCommit) {
+          event.preventDefault();
+          skipBlurCommit.current = true;
+          commit(event.currentTarget.value);
+        }
+        column.onEnter?.(event.currentTarget.value, row);
+        if (column.enterToNextColumn) {
+          event.preventDefault();
+          onEnterNextColumn?.(idx, rowIndex);
+        }
+      }} />
+  );
+  const Container = container === "card" ? "div" : "td";
+  return (
+    <Container ref={cellRef} className={isDisabled ? "disabled" : ""}
+      data-column-index={idx} data-row-index={rowIndex}
+      style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, width: column.width,
+        textAlign: align, ...column.onRowStyle?.(row),
+        ...(!isDisabled && column.openClickCell ? { cursor: "pointer" } : {}),
+        ...(stickyLeft !== undefined ? { position: "sticky", left: stickyLeft, zIndex: 2, background: "inherit" } : {}) }}
+      onClick={(event) => {
+        if (isDisabled || !column.openClickCell) return;
+        event.stopPropagation();
+        if (event.currentTarget instanceof HTMLTableCellElement) column.handleClickCell?.(event as React.MouseEvent<HTMLTableCellElement>, row);
+        if (column.displayOverlay || column.renderClickCellComponent) {
+          setOverlayValue(stringValue);
+          setOverlayOpen(true);
+        }
+      }}>
+      {column.renderComponent ? column.renderComponent(value, row) :
+        column.type === "image" ? value ? (
+          <img src={column.imageSrc?.(row) ?? ""} alt={column.imageAlt?.(row) ?? ""} style={column.imageStyle} />
+        ) : <Icon classIcon="bi-image" /> :
+        editable ? hasStepButtons ? (
+          <div className="data-table-input-number-wrapper" onClick={(event) => event.stopPropagation()}>
+            <button type="button" className="data-table-step-btn data-table-step-btn--minus"
+              disabled={isDisabled || (column.min !== undefined && Number(value) <= column.min)}
+              onClick={() => handleStep(-1)}><Icon classIcon="bi-dash-lg" /></button>
+            {editor}
+            <button type="button" className="data-table-step-btn data-table-step-btn--plus"
+              disabled={isDisabled || (column.max !== undefined && Number(value) >= column.max)}
+              onClick={() => handleStep(1)}><Icon classIcon="bi-plus-lg" /></button>
+          </div>
+        ) : editor : column.format ? column.format(value) : stringValue}
+      {overlayOpen && !isDisabled && cellRef.current && (
+        <OverlayPanel show referenceElement={cellRef.current} position="bottomLeft" usePortal
+          closeOverlay={() => setOverlayOpen(false)}>
+          {column.renderClickCellComponent ? column.renderClickCellComponent(value, row) : (
+            <form onSubmit={(event) => {
+              event.preventDefault();
+              if (column.onEditByOverlay) column.onEditByOverlay(overlayValue, row);
+              else if (!onEditColumnByOverlay) commit(overlayValue);
+              onEditColumnByOverlay?.({ ...row, [column.id]: overlayValue });
+              setOverlayOpen(false);
+            }}>
+              {column.type === "select" ? <Select usePortal options={column.options ?? []} value={overlayValue} onChange={setOverlayValue} /> :
+                <input autoFocus type={column.type === "image" ? "text" : column.type} value={overlayValue} onChange={(event) => setOverlayValue(event.target.value)} />}
+              <button type="submit">Valider</button>
+            </form>
+          )}
+        </OverlayPanel>
+      )}
+    </Container>
+  );
+};

package/src/dataTable/useDataTableState.tsx

@@ -0,0 +1,89 @@
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { Input } from "../form/input/Input";
+import { Select } from "../select/Select";
+import { dataTableColumnsInterface } from "./dataTable.interface";
+import { DataTableColumnFilterDateRange } from "./dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange";
+import {
+  DataTableFilterState, DataTableSortState, FilterValue,
+  flattenColumns, getFilterKey, sortRows,
+} from "./dataTable.utils";
+
+export function useDataTableState<T>(
+  id: string,
+  columns: dataTableColumnsInterface<T>[],
+  data: T[],
+  onFiltersChange?: (next: DataTableFilterState) => void,
+  onSortChange?: (next: DataTableSortState | null) => void,
+) {
+  const [filters, setFilters] = useState<DataTableFilterState>({});
+  const [visibleFilters, setVisibleFilters] = useState<Set<string>>(new Set());
+  const [sort, setSort] = useState<DataTableSortState | null>(null);
+  const [focusKey, setFocusKey] = useState<string | null>(null);
+  const deferredFilters = useDeferredValue(filters);
+  const callbacks = useRef({ onFiltersChange, onSortChange });
+  useEffect(() => { callbacks.current = { onFiltersChange, onSortChange }; }, [onFiltersChange, onSortChange]);
+  useEffect(() => { callbacks.current.onFiltersChange?.(deferredFilters); }, [deferredFilters]);
+  useEffect(() => { callbacks.current.onSortChange?.(sort); }, [sort]);
+  const flatColumns = useMemo(() => flattenColumns(columns), [columns]);
+  const sortedData = useMemo(() => sortRows(data, flatColumns, sort), [data, flatColumns, sort]);
+
+  function toggleFilter(column: dataTableColumnsInterface<T>) {
+    const key = getFilterKey(column);
+    setFocusKey(visibleFilters.has(key) ? null : key);
+    setVisibleFilters((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) next.delete(key); else next.add(key);
+      return next;
+    });
+  }
+
+  function toggleSort(column: dataTableColumnsInterface<T>) {
+    const key = getFilterKey(column);
+    setSort((previous) => previous?.key !== key ? { key, direction: "asc" } :
+      previous.direction === "asc" ? { key, direction: "desc" } : null);
+  }
+
+  function updateFilter(key: string, value: FilterValue) {
+    setFilters((previous) => {
+      const empty = value === "" || (Array.isArray(value) && value.length === 0) ||
+        (typeof value === "object" && value !== null && "startDate" in value && !value.startDate && !value.endDate);
+      if (empty) {
+        if (!(key in previous)) return previous;
+        const next = { ...previous };
+        delete next[key];
+        return next;
+      }
+      if (JSON.stringify(previous[key]) === JSON.stringify(value)) return previous;
+      return { ...previous, [key]: value };
+    });
+  }
+
+  function renderFilter(column: dataTableColumnsInterface<T>) {
+    const key = getFilterKey(column);
+    if (!column.filterable || !visibleFilters.has(key)) return null;
+    const value = filters[key];
+    const range = typeof value === "object" && value !== null && "startDate" in value ? value : { startDate: "", endDate: "" };
+    const inputId = `${id}-filter-${column.id}`;
+    if (column.filterType === TypeInputEnum.DATERANGE) {
+      return <DataTableColumnFilterDateRange id={inputId} name={inputId}
+        currentStartValue={range.startDate} currentEndValue={range.endDate}
+        onChange={(startDate, endDate) => updateFilter(key, { startDate, endDate })} />;
+    }
+    if (column.filterType === TypeInputEnum.CHECKBOX || column.filterType === TypeInputEnum.RADIO) {
+      return <Select id={inputId} options={column.filterDataEnum ?? []} multiple
+        usePortal showOptions={focusKey === key}
+        value={String(value ?? "").split(",").filter(Boolean)}
+        onChangeMultiple={(values) => updateFilter(key, values.join(","))}
+        placeholder={`Filtrer ${column.label}`} />;
+    }
+    return <Input id={inputId} name={inputId}
+      type={column.filterType === TypeInputEnum.DATE ? TypeInputEnum.DATE : TypeInputEnum.TEXT}
+      value={String(value ?? "")} autoFocus={focusKey === key}
+      disabledDebounce showClearButton placeholder={`Filtrer ${column.label}`}
+      onClick={(event) => event.stopPropagation()}
+      onChange={(event) => updateFilter(key, event.target.value)} />;
+  }
+
+  return { filters, setFilters, visibleFilters, sort, flatColumns, sortedData, toggleFilter, toggleSort, renderFilter };
+}