kelt-ui-kit-react 1.2.4 → 1.2.5

package/src/dataTable/DataTable.tsx

@@ -1,241 +1,241 @@
-import { useEffect, useRef } from "react";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import { Loader } from "../loader/Loader";
-import { Select } from "../select/Select";
-import "./dataTable.css";
-import {
-  dataTableActionsInterface,
-  dataTableColumnsInterface,
-} from "./dataTable.interface";
-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
-};
-export function DataTable<T>(props: DataTableProps<T>) {
-  const {
-    id,
-    name,
-    className,
-    children,
-    element,
-    data = [],
-    actions = [],
-    columns = [],
-    loading,
-    onRowClick,
-    onColumnClick,
-    onLoadMore,
-    hasMore
-  } = props;
-  
-
- const loaderRef = useRef<HTMLDivElement | null>(null);
-
-  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>
-      {name && <h2 className="mb-2">{name}</h2>}
-      {element}
-      <table className={`data-table ${className ? className : ""}`} id={id}>
-        <thead>
-          <tr>
-            {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>
-              </>
-            ))}
-            {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={() => 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
-                  return (
-                    <>
-                      <td
-                        style={{
-                          minWidth: column.minWidth,
-                          textAlign: column.align || "left",
-                          maxWidth: column.maxWidth,
-                          width: column.width,
-                        }}
-                        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>
-                    </>
-                  );
-                })}
-                {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>
-                            )}
-                          </>
-                        );
-                      })}
-                    </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>
-          )}
-        </tbody>
-      </table>
-
-      {children}
-      {hasMore && (
-        <div ref={loaderRef} className="infinite-scroll-loader">
-          <Loader display={true} />
-        </div>
-      )}
-    </div>
-  );
-}
+import { useEffect, useRef } from "react";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import { Loader } from "../loader/Loader";
+import { Select } from "../select/Select";
+import "./dataTable.css";
+import {
+  dataTableActionsInterface,
+  dataTableColumnsInterface,
+} from "./dataTable.interface";
+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
+};
+export function DataTable<T>(props: DataTableProps<T>) {
+  const {
+    id,
+    name,
+    className,
+    children,
+    element,
+    data = [],
+    actions = [],
+    columns = [],
+    loading,
+    onRowClick,
+    onColumnClick,
+    onLoadMore,
+    hasMore
+  } = props;
+  
+
+ const loaderRef = useRef<HTMLDivElement | null>(null);
+
+  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>
+      {name && <h2 className="mb-2">{name}</h2>}
+      {element}
+      <table className={`data-table ${className ? className : ""}`} id={id}>
+        <thead>
+          <tr>
+            {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>
+              </>
+            ))}
+            {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={() => 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
+                  return (
+                    <>
+                      <td
+                        style={{
+                          minWidth: column.minWidth,
+                          textAlign: column.align || "left",
+                          maxWidth: column.maxWidth,
+                          width: column.width,
+                        }}
+                        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>
+                    </>
+                  );
+                })}
+                {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>
+                            )}
+                          </>
+                        );
+                      })}
+                    </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>
+          )}
+        </tbody>
+      </table>
+
+      {children}
+      {hasMore && (
+        <div ref={loaderRef} className="infinite-scroll-loader">
+          <Loader display={true} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/dataTable/DataTable.view.tsx

@@ -1,59 +1,59 @@
-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"}
-    />
-  );
-};
+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"}
+    />
+  );
+};

package/src/dataTable/dataTable.css

@@ -1,17 +1,17 @@
-.data-table {
-  width: 100%;
-  border-spacing: 5px;
-  font-size: 14px;
-  color: #333;
-
-  thead {
-    margin-bottom: 1rem;
-    position : sticky;
-    top : 0;
-    background-color: #fff;
-    th {
-      color: #bdbaba;
-      min-width: 100px;
-    }
-  }
-}
+.data-table {
+  width: 100%;
+  border-spacing: 5px;
+  font-size: 14px;
+  color: #333;
+
+  thead {
+    margin-bottom: 1rem;
+    position : sticky;
+    top : 0;
+    background-color: #fff;
+    th {
+      color: #bdbaba;
+      min-width: 100px;
+    }
+  }
+}