kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/dataTable/dataTable.interface.ts

@@ -1,45 +1,66 @@
-import { HTMLInputTypeAttribute } from "react";
-
-export interface dataTableColumnsInterface<T> {
-  id: string;
-  label: string;
-  minWidth?: number;
-  maxWidth?: number;
-  width?: number;
-  align?: "right" | "left" | "center";
-  format?: (value: any) => string;
-  sortable?: boolean;
-  filterable?: boolean;
-  filterValue?: string;
-  editable?: boolean;
-  enterToNextColumn?: boolean;
-  options?: { label: string; value: string }[];
-  onEdit?: (value: any, row: T) => void;
-  onEnter?: (value: any, row: T) => void;
-  onDisable?: (row: T) => boolean;
-  onRowStyle?: (row: T) => React.CSSProperties;
-  type: HTMLInputTypeAttribute | "select" | "image";
-  imageAlt?: (row: T) => string;
-  imageStyle?: React.CSSProperties;
-  imageSrc?: (row: T) => string;
-  showStepButtons?: boolean | ((row: T) => boolean);
-  stepControls?: boolean | ((row: T) => boolean);
-  withStepControls?: boolean | ((row: T) => boolean);
-  step?: number;
-  min?: number;
-  max?: number;
-}
-export interface dataTableActionsInterface<T> {
-  id: string;
-  label: string;
-  type: "button" | "link" | "icon";
-  classIcon?: string;
-  onClick: (row: T, rowIndex?: number) => void;
-  shouldDisplay?: (row: T) => boolean;
-  disabled?: boolean;
-  labelButton?: (row: T) => string;
-  visible?: boolean;
-  width?: string | number;
-  minWidth?: string | number;
-  focusNextRow?: boolean;
-}
+import { HTMLInputTypeAttribute } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+
+export interface dataTableColumnsInterface<T> {
+  id: string;
+  label: string;
+  key?: string;
+  name?: string;
+  sticky?: boolean;
+  minWidth?: number;
+  maxWidth?: number;
+  width?: number | string;
+  align?: "right" | "left" | "center";
+  alignText?: "right" | "left" | "center";
+  autoComplete?: string;
+  format?: (value: any) => string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterValue?: string;
+  filterDataEnum?: { label: string; value: string }[];
+  filterType?: TypeInputEnum;
+  editable?: boolean;
+  isUpdatable?: boolean;
+  onEditable?: (value: any, row: T) => boolean;
+  onChange?: (value: any, row: T) => void;
+  onEditByOverlay?: (value: any, row: T) => void;
+  onEditTrigger?: "change" | "enter";
+  displayOverlay?: boolean;
+  renderComponent?: (value: any, row: T) => React.ReactNode;
+  openClickCell?: boolean;
+  handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
+  renderClickCellComponent?: (value: any, row: T) => React.ReactNode;
+  children?: dataTableColumnsInterface<T>[];
+  enterToNextColumn?: boolean;
+  options?: { label: string; value: string }[];
+  onEdit?: (value: any, row: T) => void;
+  onEnter?: (value: any, row: T) => void;
+  onDisable?: (row: T) => boolean;
+  onRowStyle?: (row: T) => React.CSSProperties;
+  type: HTMLInputTypeAttribute | "select" | "image";
+  imageAlt?: (row: T) => string;
+  imageStyle?: React.CSSProperties;
+  imageSrc?: (row: T) => string;
+  showStepButtons?: boolean | ((row: T) => boolean);
+  stepControls?: boolean | ((row: T) => boolean);
+  withStepControls?: boolean | ((row: T) => boolean);
+  step?: number;
+  min?: number;
+  max?: number;
+}
+export type DataTableColumnsInterface<T> = dataTableColumnsInterface<T>;
+export type DataTableActionsInterface<T> = dataTableActionsInterface<T>;
+export interface dataTableActionsInterface<T> {
+  id: string;
+  label: string;
+  type: "button" | "link" | "icon";
+  classIcon?: string;
+  onClick: (row: T, rowIndex?: number) => void;
+  shouldDisplay?: (row: T) => boolean;
+  disabled?: boolean;
+  labelButton?: (row: T) => string;
+  visible?: boolean;
+  width?: string | number;
+  minWidth?: string | number;
+  focusNextRow?: boolean;
+}

package/src/dataTable/dataTable.utils.ts

@@ -0,0 +1,45 @@
+import { TypeInputEnum } from "../form/form.enum";
+import { dataTableActionsInterface, dataTableColumnsInterface } from "./dataTable.interface";
+
+export type DataTableDateRangeFilterValue = { startDate: string; endDate: string };
+export type FilterValue = string | number | boolean | string[] | DataTableDateRangeFilterValue | null;
+export type DataTableFilterState = Record<string, FilterValue>;
+export type DataTableSortDirection = "asc" | "desc";
+export type DataTableSortState = { key: string; direction: DataTableSortDirection };
+
+export function flattenColumns<T>(columns: dataTableColumnsInterface<T>[]): dataTableColumnsInterface<T>[] {
+  return columns.flatMap((column) => column.children?.length ? flattenColumns(column.children) : [column]);
+}
+
+export function getColumnValue<T>(row: T, column: dataTableColumnsInterface<T>): unknown {
+  return row == null ? undefined : Reflect.get(Object(row), column.id);
+}
+
+export function getFilterKey<T>(column: dataTableColumnsInterface<T>) {
+  return column.name ?? column.id;
+}
+
+export function getActionsWidth<T>(actions: dataTableActionsInterface<T>[], explicitWidth?: number) {
+  if (explicitWidth !== undefined) return explicitWidth;
+  if (!actions.some((action) => typeof action.width === "number")) return 200;
+  return actions.reduce((total, action) => total + (typeof action.width === "number" ? action.width : 0), 0);
+}
+
+export function sortRows<T>(data: T[], columns: dataTableColumnsInterface<T>[], sort: DataTableSortState | null): T[] {
+  const column = columns.find((item) => getFilterKey(item) === sort?.key);
+  if (!sort || !column) return data;
+  const factor = sort.direction === "asc" ? 1 : -1;
+  return [...data].sort((leftRow, rightRow) => {
+    const left = getColumnValue(leftRow, column);
+    const right = getColumnValue(rightRow, column);
+    if (left == null || right == null) return factor * (left == null ? (right == null ? 0 : 1) : -1);
+    if (typeof left === "number" && typeof right === "number") return factor * (left - right);
+    if (typeof left === "boolean" && typeof right === "boolean") return factor * (Number(left) - Number(right));
+    if (column.type === TypeInputEnum.DATE) {
+      const leftDate = new Date(String(left)).getTime();
+      const rightDate = new Date(String(right)).getTime();
+      if (!Number.isNaN(leftDate) && !Number.isNaN(rightDate)) return factor * (leftDate - rightDate);
+    }
+    return factor * String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: "base" });
+  });
+}

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -1,65 +1,82 @@
-import { Button } from "../../button/Button";
-import { Icon } from "../../icon/Icon";
-import { dataTableActionsInterface } from "../dataTable.interface";
-type DataTableActionProps = {
-  action: dataTableActionsInterface<any>;
-  row: any;
-  rowIndex?: number;
-  index?: number;
-  onFocusNextRow?: (rowIndex: number) => void;
-};
-export const DataTableAction = ({
-  action,
-  row,
-  rowIndex,
-  index,
-  onFocusNextRow,
-}: DataTableActionProps) => {
-  let title = action.label;
-  const display = action.shouldDisplay ? action.shouldDisplay(row) : true;
-  if (!display) return null;
-  if (action.labelButton) {
-    title = action.labelButton ? action.labelButton(row) : action.label;
-  }
-
-  const handleClick = (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    action.onClick(row, rowIndex);
-    if (action.focusNextRow && rowIndex !== undefined) {
-      onFocusNextRow?.(rowIndex);
-    }
-  };
-
-  return (
-    <>
-      {action.type === "button" && (
-        <Button
-          title={title}
-          key={`button-action-${action.id}-${index}`}
-          onClick={handleClick}
-          disabled={action.disabled}
-          style={{
-            minWidth: action.minWidth,
-            width: action.width,
-          }}
-          className={`data-table-action button--tertiary mr-2 w-100 ${
-            action.classIcon ? action.classIcon : ""
-          }`}
-        />
-      )}
-      {action.type === "icon" && (
-        <div
-          key={`icon-action-${action.id}-${index}`}
-          className={`mr-2 `}
-          onClick={handleClick}
-          style={{
-            minWidth: action.minWidth,
-            width: action.width,
-          }}
-        >
-          <Icon classIcon={action.classIcon ?? ""} key={action.id} />
-        </div>
-      )}
-    </>
-  );
-};
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+import { dataTableActionsInterface } from "../dataTable.interface";
+type DataTableActionProps = {
+  action: dataTableActionsInterface<any>;
+  row: any;
+  rowIndex?: number;
+  index?: number;
+  onFocusNextRow?: (rowIndex: number) => void;
+};
+export const DataTableAction = ({
+  action,
+  row,
+  rowIndex,
+  index,
+  onFocusNextRow,
+}: DataTableActionProps) => {
+  let title = action.label;
+  const display = action.visible !== false && (action.shouldDisplay ? action.shouldDisplay(row) : true);
+  if (!display) return null;
+  if (action.labelButton) {
+    title = action.labelButton ? action.labelButton(row) : action.label;
+  }
+
+  const handleClick = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    if (action.disabled) return;
+    action.onClick(row, rowIndex);
+    if (action.focusNextRow && rowIndex !== undefined) {
+      onFocusNextRow?.(rowIndex);
+    }
+  };
+
+  return (
+    <>
+      {action.type === "button" && (
+        <Button
+          title={title}
+          key={`button-action-${action.id}-${index}`}
+          onClick={handleClick}
+          disabled={action.disabled}
+          style={{
+            minWidth: action.minWidth,
+            width: action.width,
+          }}
+          className={`data-table-action button--tertiary mr-2 w-100 ${
+            action.classIcon ? action.classIcon : ""
+          }`}
+        />
+      )}
+      {action.type === "icon" && (
+        <div
+          key={`icon-action-${action.id}-${index}`}
+          className="mr-2 data-table-action-icon"
+          title={title}
+          role="button"
+          tabIndex={action.disabled ? -1 : 0}
+          aria-disabled={action.disabled}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              event.stopPropagation();
+              handleClick();
+            }
+          }}
+          onClick={handleClick}
+          style={{
+            minWidth: action.minWidth,
+            width: action.width,
+          }}
+        >
+          <Icon classIcon={action.classIcon ?? ""} key={action.id} />
+        </div>
+      )}
+      {action.type === "link" && (
+        <button type="button" className="data-table-action-link" disabled={action.disabled} onClick={handleClick}>
+          {title}
+        </button>
+      )}
+    </>
+  );
+};

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,27 +1,48 @@
-import { dataTableColumnsInterface } from "../dataTable.interface";
-
-type DataTableColumnProps = {
-  column: dataTableColumnsInterface<any>;
-  idx: number;
-  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
-};
-export const DataTableColumn = ({
-  column,
-  idx,
-  onColumnClick,
-}: DataTableColumnProps) => {
-  return (
-    <th
-      key={`colonne-${column.id}-${idx}`}
-      style={{
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width,
-        textAlign: column.align || "left",
-      }}
-      onClick={() => onColumnClick?.(column)}
-    >
-      {column.label}
-    </th>
-  );
-};
+import { dataTableColumnsInterface } from "../dataTable.interface";
+import { DataTableColumnFilter } from "./dataTableColumnFilter/DataTableColumnFilter";
+import { DataTableColumnSort } from "./dataTableColumnSort/DataTableColumnSort";
+import { DataTableSortDirection } from "../dataTable.utils";
+
+type DataTableColumnProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
+  isFilterVisible?: boolean;
+  onToggleFilter?: (column: dataTableColumnsInterface<any>) => void;
+  onToggleSort?: (column: dataTableColumnsInterface<any>) => void;
+  sortDirection?: DataTableSortDirection | null;
+  stickyLeft?: number;
+  stickyTop?: number;
+};
+export const DataTableColumn = ({
+  column,
+  idx,
+  onColumnClick,
+  isFilterVisible,
+  onToggleFilter,
+  onToggleSort,
+  sortDirection,
+  stickyLeft,
+  stickyTop = 0,
+}: DataTableColumnProps) => {
+  return (
+    <th
+      key={`colonne-${column.id}-${idx}`}
+      style={{
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+        textAlign: column.align || "left",
+        top: stickyTop,
+        ...(stickyLeft !== undefined ? { position: "sticky", left: stickyLeft, zIndex: 12, background: "#f9fbfc" } : {}),
+      }}
+      onClick={() => onColumnClick?.(column)}
+    >
+      <div className="data-table-column-heading">
+        <span>{column.label}</span>
+        {column.sortable && <DataTableColumnSort column={column} sortDirection={sortDirection} onToggleSort={onToggleSort} />}
+        {column.filterable && <DataTableColumnFilter column={column} isFilterVisible={isFilterVisible} onToggleVisibility={onToggleFilter} />}
+      </div>
+    </th>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx

@@ -0,0 +1,36 @@
+import { Icon } from "../../../icon/Icon";
+import { DataTableColumnsInterface } from "../../dataTable.interface";
+import "./dataTableColumnFilter.css";
+
+type DataTableColumnFilterProps<T> = {
+  className?: string;
+  column: DataTableColumnsInterface<T>;
+  isFilterVisible?: boolean;
+  onToggleVisibility?: (column: DataTableColumnsInterface<T>) => void;
+};
+export const DataTableColumnFilter = <T,>({
+  className,
+  column,
+  isFilterVisible = false,
+  onToggleVisibility,
+}: DataTableColumnFilterProps<T>) => {
+  return (
+    <div
+      className={`data-table-column-filter ${
+        isFilterVisible ? "active" : ""
+      } ${className ?? ""}`}
+    >
+      <span>
+        <Icon
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleVisibility?.(column);
+          }}
+          classIcon={`bi-filter cursor-pointer ${
+            isFilterVisible ? "data-table-column-filter-active" : ""
+          }`}
+        />
+      </span>
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx

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

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+import { TypeInputEnum } from "../../../../form/form.enum";
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterDateRangeProps = {
+  id: string;
+  name: string;
+  onChange: (startDate: string, endDate: string) => void;
+  currentStartValue?: string;
+  currentEndValue?: string;
+};
+
+export const DataTableColumnFilterDateRange = ({
+  id,
+  name,
+  onChange,
+  currentStartValue,
+  currentEndValue,
+}: DataTableColumnFilterDateRangeProps) => {
+  const [startDate, setStartDate] = useState<string>(currentStartValue ?? "");
+  const [endDate, setEndDate] = useState<string>(currentEndValue ?? "");
+
+  useEffect(() => {
+    setStartDate(currentStartValue ?? "");
+  }, [currentStartValue]);
+
+  useEffect(() => {
+    setEndDate(currentEndValue ?? "");
+  }, [currentEndValue]);
+
+  const handleStartDateChange = (value: string) => {
+    setStartDate(value);
+    onChange(value, endDate);
+  };
+
+  const handleEndDateChange = (value: string) => {
+    setEndDate(value);
+    onChange(startDate, value);
+  };
+
+  return (
+    <div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+        <div>
+          <label
+            htmlFor={`${id}-start`}
+            style={{ display: "block", marginBottom: "4px" }}
+          >
+            Date début
+          </label>
+          <Input
+            id={`${id}-start`}
+            name={`${name}-start`}
+            type={TypeInputEnum.DATE}
+            value={startDate}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => handleStartDateChange(e.target.value)}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor={`${id}-end`}
+            style={{ display: "block", marginBottom: "4px" }}
+          >
+            Date fin
+          </label>
+          <Input
+            id={`${id}-end`}
+            name={`${name}-end`}
+            type={TypeInputEnum.DATE}
+            value={endDate}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => handleEndDateChange(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { Button } from "../../../..";
+import { EnumerableType } from "../../../../_core/type/generiqueType";
+import { TypeInputEnum } from "../../../../form/form.enum";
+import { Input } from "../../../../form/input/Input";
+
+type DataTableColumnFilterEnumProps = {
+  type: TypeInputEnum;
+  id: string;
+  name?: string;
+  data: EnumerableType[];
+  onChange: (value: string) => void;
+  currentValue?: string;
+};
+export const DataTableColumnFilterEnum = ({
+  type,
+  id,
+  onChange,
+  name,
+  data,
+  currentValue = "",
+}: DataTableColumnFilterEnumProps) => {
+  const [selectedValue, setSelectedValue] = useState<string[]>(() => {
+    return currentValue ? currentValue.split(",") : [];
+  });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let newSelectedValue: string[];
+
+    if (type === TypeInputEnum.RADIO) {
+      newSelectedValue = [e.target.value];
+    } else {
+      if (selectedValue.includes(e.target.value)) {
+        newSelectedValue = selectedValue.filter(
+          (val) => val !== e.target.value,
+        );
+      } else {
+        newSelectedValue = [...selectedValue, e.target.value];
+      }
+    }
+
+    setSelectedValue(newSelectedValue);
+    onChange(newSelectedValue.join(","));
+  };
+  const allSelected = () => {
+    if (selectedValue.length === data.length) {
+      setSelectedValue([]);
+      onChange("");
+    } else {
+      const allValues = data.map((d) => d.value);
+      setSelectedValue(allValues);
+      onChange(allValues.join(","));
+    }
+  };
+  useEffect(() => {
+    const newValue = currentValue ? currentValue.split(",") : [];
+    setSelectedValue(newValue);
+  }, [currentValue]);
+  return (
+    <>
+      {data?.map((opt) => (
+        <div
+          style={{
+            width: "150px",
+          }}
+          className="d-flex align-items-center"
+          key={opt.value}
+        >
+          <Input
+            id={id}
+            name={`${name}-${opt.value}-filter`}
+            value={opt.value}
+            onChange={handleChange}
+            type={type}
+            checked={selectedValue.includes(opt.value)}
+          />
+          <label className="ml-2" htmlFor={`${name}-${opt.value}-filter`}>
+            {opt.label}
+          </label>
+        </div>
+      ))}
+      <Button
+        className="mt-2"
+        onClick={allSelected}
+        id={`${id}-select-all`}
+        title="Tout sélectionner"
+      />
+    </>
+  );
+};

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>
+  );
+};