kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/dataTable/DataTable.tsx

@@ -0,0 +1,259 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { Input } from "../form/input/Input";
+import { Loader } from "../loader/Loader";
+import "./dataTable.css";
+import {
+  dataTableActionsInterface,
+  dataTableColumnsInterface,
+} from "./dataTable.interface";
+import { DataTableAction } from "./dataTableActions/DataTableAction";
+import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
+import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
+import { DataTableRow } from "./dataTableRow/DataTableRow";
+export type DataTableProps<T> = {
+  id: string;
+  name?: string;
+  className?: string;
+  children?: JSX.Element;
+  element?: JSX.Element;
+  data: T[];
+  emptyMessage?: string;
+  actions?: dataTableActionsInterface<T>[];
+  columns: dataTableColumnsInterface<T>[];
+  loading?: boolean;
+  onRowClick?: (row: any) => void;
+  onColumnClick?: (column: any) => void;
+  onLoadMore?: () => void;
+  hasMore?: boolean; // pour savoir s'il reste des données à charger
+  onSelectionChange?: (selectedRows: T[]) => void;
+  hideToggleAll?: boolean;
+  limitSelect?: number;
+  getRowId?: (row: T) => string | number;
+};
+export function DataTable<T>(props: DataTableProps<T>) {
+  const {
+    id,
+    name,
+    className,
+    children,
+    element,
+    data = [],
+    actions = [],
+    columns = [],
+    loading,
+    onRowClick,
+    onColumnClick,
+    onLoadMore,
+    emptyMessage,
+    hasMore,
+    onSelectionChange,
+    hideToggleAll = false,
+    limitSelect = undefined,
+    getRowId,
+  } = props;
+
+  const loaderRef = useRef<HTMLDivElement | null>(null);
+  const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
+    new Set()
+  );
+  const toggleSelectAll = useCallback(() => {
+    if (selectedRowIds.size === data.length) {
+      setSelectedRowIds(new Set());
+      onSelectionChange?.([]);
+    } else {
+      let allIds = data.map((d) =>
+        getRowId ? getRowId(d) : (d as any).id ?? d
+      );
+
+      if (limitSelect && allIds.length > limitSelect) {
+        allIds = allIds.slice(0, limitSelect);
+      }
+
+      const newSelection = new Set(allIds);
+      setSelectedRowIds(newSelection);
+      onSelectionChange?.(
+        data.filter((d) =>
+          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        )
+      );
+    }
+  }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
+
+  const handleClickRow = useCallback(
+    (e: React.MouseEvent, row: T) => {
+      e.stopPropagation();
+      if (onRowClick) {
+        onRowClick?.(row);
+      }
+    },
+    [onRowClick]
+  );
+  const toggleRow = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
+      e.stopPropagation();
+      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
+      const newSelection = new Set(selectedRowIds);
+
+      if (newSelection.has(rowId)) {
+        newSelection.delete(rowId);
+      } else {
+        if (limitSelect && newSelection.size >= limitSelect) {
+          // 🚫 limite atteinte
+          return;
+        }
+        newSelection.add(rowId);
+      }
+
+      setSelectedRowIds(newSelection);
+      const selectedItems = data.filter((d) =>
+        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+      );
+      onSelectionChange?.(selectedItems);
+    },
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
+  );
+  useEffect(() => {
+    if (!onLoadMore || !hasMore) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 1.0,
+      }
+    );
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [onLoadMore, hasMore]);
+  return (
+    <div className="data-table-container">
+      {name && <h2 className="mb-2">{name}</h2>}
+      {element}
+      <table className={`data-table ${className ? className : ""}`} id={id}>
+        <thead>
+          <tr>
+            {onSelectionChange && (
+              <th
+                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
+                style={{ width: "20px", textAlign: "center" }}
+              >
+                <Input
+                  id={`select-th-${id}`}
+                  name={`select-th-${id}`}
+                  type={TypeInputEnum.CHECKBOX}
+                  checked={
+                    data.length > 0 && selectedRowIds.size === data.length
+                  }
+                  onChange={toggleSelectAll}
+                />
+              </th>
+            )}
+            {columns.map((column, idx) => (
+              <DataTableColumn
+                key={idx}
+                column={column}
+                idx={idx}
+                onColumnClick={onColumnClick}
+              />
+            ))}
+            {actions.length > 0 && (
+              <th
+                style={{
+                  width: "200px",
+                }}
+                align="right"
+                key={"actions"}
+              ></th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            <tr>
+              <td
+                align="center"
+                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
+              >
+                <div className="mt-3">
+                  <Loader display={loading} />
+                </div>
+              </td>
+            </tr>
+          ) : (
+            <></>
+          )}
+          {!loading &&
+            data.map((row, rowIndex) => (
+              <tr key={rowIndex} onClick={(e) => handleClickRow?.(e, row)}>
+                {onSelectionChange && (
+                  <td className="select-cell" style={{ textAlign: "center" }}>
+                    <Input
+                      id={`select-row-${rowIndex}`}
+                      name={`select-row-${rowIndex}`}
+                      type={TypeInputEnum.CHECKBOX}
+                      disabled={
+                        limitSelect !== undefined &&
+                        selectedRowIds.size >= limitSelect &&
+                        !selectedRowIds.has(
+                          getRowId ? getRowId(row) : (row as any).id ?? row
+                        )
+                      }
+                      checked={selectedRowIds.has(
+                        getRowId ? getRowId(row) : (row as any).id ?? row
+                      )}
+                      onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
+                    />
+                  </td>
+                )}
+                {columns.map((column, idx) => (
+                  <DataTableRow column={column} idx={idx} row={row} key={idx} />
+                ))}
+                {actions.length > 0 && (
+                  <td align="right">
+                    <div className="d-flex align-items-center justify-content-end">
+                      {actions.map((action, index) => (
+                        <DataTableAction
+                          key={index}
+                          action={action}
+                          row={row}
+                          index={index}
+                        />
+                      ))}
+                    </div>
+                  </td>
+                )}
+              </tr>
+            ))}
+          {!loading && data.length === 0 && (
+            <DataTableLoading
+              columns={columns}
+              actions={actions}
+              emptyMessage={emptyMessage}
+            />
+          )}
+        </tbody>
+      </table>
+
+      {children}
+      {hasMore && (
+        <div ref={loaderRef} className="infinite-scroll-loader">
+          <Loader display={true} />
+        </div>
+      )}
+    </div>
+  );
+}

package/package/src/dataTable/DataTable.view.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+import { DataTable } from "./DataTable";
+import { dataTableActionsInterface } from "./dataTable.interface";
+
+export const DataTableView = () => {
+  const dataTableColumns = useMemo(() => {
+    return [
+      { id: "id", label: "ID", minWidth: 50, type: "number" },
+      {
+        id: "name",
+        label: "Name",
+        minWidth: 100,
+        editable: true,
+        type: "text",
+      },
+      { id: "age", label: "Age", minWidth: 50, type: "number" },
+    ];
+  }, []);
+  const data = useMemo(() => {
+    return [
+      { id: 1, name: "John Doe", age: 28 },
+      { id: 2, name: "Jane Smith", age: 34 },
+      { id: 3, name: "Alice Johnson", age: 45 },
+    ];
+  }, []);
+  const actions: dataTableActionsInterface<{
+    id: number;
+    name: string;
+    age: number;
+  }>[] = useMemo(() => {
+    return [
+      {
+        id: "edit",
+        label: "Edit",
+        type: "button",
+        onClick: (row: any) => {
+          console.log("Edit action clicked for row:", row);
+        },
+      },
+      {
+        id: "delete",
+        label: "Delete",
+        type: "button",
+        onClick: (row: any) => {
+          console.log("Delete action clicked for row:", row);
+        },
+      },
+    ];
+  }, []);
+  return (
+    <DataTable
+      data={data}
+      actions={actions}
+      columns={dataTableColumns}
+      id="datatable-example"
+      name={"DataTable"}
+      onSelectionChange={(selectedRows) => {
+        console.log("Selected Rows: ", selectedRows);
+      }}
+    />
+  );
+};

package/package/src/dataTable/dataTable.css

@@ -0,0 +1,30 @@
+.data-table-container {
+  overflow: auto;
+  .data-table {
+    width: 100%;
+    border-spacing: 5px;
+    font-size: 14px;
+    color: #333;
+    .select-cell {
+      min-width: 40px !important;
+      .input-container {
+        min-width: 20px;
+        input {
+          min-width: 20px;
+          width: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+    thead {
+      margin-bottom: 1rem;
+      position: sticky;
+      top: 0;
+      background-color: #fff;
+      th {
+        color: #bdbaba;
+        min-width: 100px;
+      }
+    }
+  }
+}

package/package/src/dataTable/dataTable.interface.ts

@@ -0,0 +1,30 @@
+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;
+  options?: { label: string; value: string }[];
+  onEdit?: (value: any, row: T) => void;
+  onRowStyle?: (row: T) => React.CSSProperties;
+  type: HTMLInputTypeAttribute | "select";
+}
+export interface dataTableActionsInterface<T> {
+  id: string;
+  label: string;
+  type: "button" | "link" | "icon";
+  classIcon?: string;
+  onClick: (row: T) => void;
+  shouldDisplay?: (row: T) => boolean;
+  disabled?: boolean;
+  labelButton?: (row: T) => string;
+  visible?: boolean;
+}

package/package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -0,0 +1,44 @@
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+import { dataTableActionsInterface } from "../dataTable.interface";
+type DataTableActionProps = {
+  action: dataTableActionsInterface<any>;
+  row: any;
+  index?: number;
+};
+export const DataTableAction = ({
+  action,
+  row,
+  index,
+}: 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;
+  }
+  return (
+    <>
+      {action.type === "button" && (
+        <Button
+          title={title}
+          key={`button-action-${action.id}-${index}`}
+          onClick={() => action.onClick(row)}
+          disabled={action.disabled}
+          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={() => action.onClick(row)}
+        >
+          <Icon classIcon={action.classIcon ?? ""} key={action.id} />
+        </div>
+      )}
+    </>
+  );
+};

package/package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -0,0 +1,27 @@
+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>
+  );
+};

package/package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -0,0 +1,21 @@
+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>
+  );
+};

package/package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -0,0 +1,54 @@
+import { Select } from "../../select/Select";
+import { dataTableColumnsInterface } from "../dataTable.interface";
+
+type DataTableRowProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  row: any;
+};
+export const DataTableRow = ({ column, idx, row }: 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) : {};
+  return (
+    <td
+      style={{
+        minWidth: column.minWidth,
+        textAlign: column.align || "left",
+        maxWidth: column.maxWidth,
+        width: column.width,
+        ...style,
+      }}
+      key={`row-${column.id}-${idx}`}
+    >
+      {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
+      )}
+    </td>
+  );
+};

package/package/src/datePicker/DatePicker.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import Calendar from "react-calendar";
+import { Value } from "react-calendar/dist/cjs/shared/types";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./datePicker.css"; // Assuming you have some styles for the DatePicker
+export type DatePickerProps = {
+  value?: Value;
+  maxDate?: Date;
+  onChange?: (date: Value) => void;
+  children?: React.ReactNode;
+};
+export const DatePicker = ({
+  value,
+  onChange,
+  maxDate,
+  children,
+}: DatePickerProps) => {
+  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const calendarRef = useRef<HTMLDivElement>(null);
+
+  const handleChange = useCallback(
+    (val: Value) => {
+      setDateCalendar(val);
+      if (onChange) {
+        onChange(val);
+      }
+      setShowCalendar(false);
+    },
+    [onChange]
+  );
+
+  const toggleCalendar = () => setShowCalendar(!showCalendar);
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    if (
+      calendarRef.current &&
+      !calendarRef.current.contains(event.target as Node)
+    ) {
+      setShowCalendar(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (showCalendar) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    // Nettoyage
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showCalendar, handleClickOutside]);
+  const [currentMonth, setCurrentMonth] = useState<Value>();
+
+  const handleActiveStartDateChange = ({
+    activeStartDate,
+  }: {
+    activeStartDate: Value;
+  }) => {
+    setCurrentMonth(activeStartDate);
+  };
+  return (
+    <div>
+      <div className="calendar" ref={calendarRef}>
+        {children && <div onClick={toggleCalendar}>{children}</div>}
+        {!children && (
+          <button className="calendar-button" onClick={toggleCalendar}>
+            <Icon
+              classIcon=" bi-calendar4-event"
+              size={IconSizeEnum.EXTRA_LARGE}
+            />
+          </button>
+        )}
+        {showCalendar && (
+          <div className="calendar-popup">
+            <div
+              onClick={() => setShowCalendar(false)}
+              className="calendar-popup-close"
+            >
+              <Icon
+                classIcon="bi-x-lg close-icon"
+                size={IconSizeEnum.EXTRA_SMALL}
+              />
+            </div>
+            <Calendar
+              onActiveStartDateChange={handleActiveStartDateChange}
+              maxDate={maxDate ?? new Date()}
+              onChange={handleChange}
+              value={dateCalendar}
+              tileClassName={({ date: day, view }) => {
+                if (view === "month" && (currentMonth as Date)) {
+                  const curr = currentMonth as Date;
+                  return day.getMonth() !== curr?.getMonth()
+                    ? "out-of-month"
+                    : null;
+                }
+                return null;
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/package/src/datePicker/DatePicker.view.tsx

@@ -0,0 +1,9 @@
+import { DatePicker } from "./DatePicker";
+
+export const DatePickerView = () => {
+  return (
+    <div>
+      <DatePicker />
+    </div>
+  );
+};