kelt-ui-kit-react 1.4.2 → 1.4.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/dataTable/DataTable.tsx

@@ -1,13 +1,16 @@
-import { useEffect, useRef } from "react";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
+import { useEffect, useRef, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { Input } from "../form/input/Input";
 import { Loader } from "../loader/Loader";
-import { Select } from "../select/Select";
 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;
@@ -23,6 +26,7 @@ export type DataTableProps<T> = {
   onColumnClick?: (column: any) => void;
   onLoadMore?: () => void;
   hasMore?: boolean; // pour savoir s'il reste des données à charger
+  onSelectionChange?: (selectedRows: T[]) => void;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -39,10 +43,31 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onColumnClick,
     onLoadMore,
     hasMore,
+    onSelectionChange,
   } = props;
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
-
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const toggleSelectAll = () => {
+    if (selectedRows.size === data.length) {
+      setSelectedRows(new Set());
+      onSelectionChange?.([]);
+    } else {
+      const allIndexes = new Set(data.map((_, i) => i));
+      setSelectedRows(allIndexes);
+      onSelectionChange?.(data);
+    }
+  };
+  const toggleRow = (rowIndex: number) => {
+    const newSelection = new Set(selectedRows);
+    if (newSelection.has(rowIndex)) {
+      newSelection.delete(rowIndex);
+    } else {
+      newSelection.add(rowIndex);
+    }
+    setSelectedRows(newSelection);
+    onSelectionChange?.(Array.from(newSelection).map((i) => data[i]));
+  };
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
 
@@ -76,21 +101,27 @@ export function DataTable<T>(props: DataTableProps<T>) {
       <table className={`data-table ${className ? className : ""}`} id={id}>
         <thead>
           <tr>
+            {onSelectionChange && (
+              <th
+                className="select-cell"
+                style={{ width: "20px", textAlign: "center" }}
+              >
+                <Input
+                  id={`select-th-${id}`}
+                  name={`select-th-${id}`}
+                  type={TypeInputEnum.CHECKBOX}
+                  checked={data.length > 0 && selectedRows.size === data.length}
+                  onChange={toggleSelectAll}
+                />
+              </th>
+            )}
             {columns.map((column, idx) => (
-              <>
-                <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>
-              </>
+              <DataTableColumn
+                key={idx}
+                column={column}
+                idx={idx}
+                onColumnClick={onColumnClick}
+              />
             ))}
             {actions.length > 0 && (
               <th
@@ -121,112 +152,42 @@ export function DataTable<T>(props: DataTableProps<T>) {
           {!loading &&
             data.map((row, rowIndex) => (
               <tr key={rowIndex} onClick={() => onRowClick?.(row)}>
-                {columns.map((column, idx) => {
-                  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>
-                    </>
-                  );
-                })}
+                {onSelectionChange && (
+                  <td className="select-cell" style={{ textAlign: "center" }}>
+                    <Input
+                      id={`select-row-${rowIndex}`}
+                      name={`select-row-${rowIndex}`}
+                      type={TypeInputEnum.CHECKBOX}
+                      checked={selectedRows.has(rowIndex)}
+                      onChange={() => toggleRow(rowIndex)} // 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) => {
-                        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>
-                            )}
-                          </>
-                        );
-                      })}
+                      {actions.map((action, index) => (
+                        <DataTableAction
+                          key={index}
+                          action={action}
+                          row={row}
+                          index={index}
+                        />
+                      ))}
                     </div>
                   </td>
                 )}
               </tr>
             ))}
           {!loading && data.length === 0 && (
-            <tr>
-              <td
-                align="center"
-                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-              >
-                <div className="mt-3">
-                  {props.emptyMessage || "Aucune donnée disponible"}
-                </div>
-              </td>
-            </tr>
+            <DataTableLoading
+              columns={columns}
+              actions={actions}
+              emptyMessage={props.emptyMessage}
+            />
           )}
         </tbody>
       </table>

package/src/dataTable/DataTable.view.tsx

@@ -54,6 +54,9 @@ export const DataTableView = () => {
       columns={dataTableColumns}
       id="datatable-example"
       name={"DataTable"}
+      onSelectionChange={(selectedRows) => {
+        console.log("Selected Rows: ", selectedRows);
+      }}
     />
   );
 };

package/src/dataTable/dataTable.css

@@ -5,7 +5,16 @@
     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;
+        }
+      }
+    }
     thead {
       margin-bottom: 1rem;
       position: sticky;

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/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/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/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/src/form/form.css

@@ -8,6 +8,14 @@ input {
     outline: 1px solid #9696a7;
   }
 }
+input[type="checkbox"],
+input[type="radio"] {
+  min-width: auto;
+  padding: 0;
+  margin: 0;
+  height: 18px;
+  width: 18px;
+}
 form {
   &.form-row {
     display: flex;

package/src/form/input/Input.tsx

@@ -54,7 +54,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const [showPassword, setShowPassword] = useState(false);
 
     return (
-      <div className="input-container">
+      <div className={`input-container ${`input-container-${type}`} `}>
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input

package/src/form/input/input.css

@@ -2,6 +2,15 @@
   position: relative;
   min-width: 250px;
   width: 100%;
+  &.input-container-radio,
+  &.input-container-checkbox {
+    min-width: 10px;
+    width: 10px;
+    input {
+      width: 10px;
+      min-width: 10px;
+    }
+  }
   .input-password-icon {
     position: absolute;
     right: 10px;