kelt-ui-kit-react 1.8.3 → 1.8.4

package/src/dataTable/DataTable.view.tsx

@@ -1,53 +1,29 @@
-import { useMemo, useState } from "react";
-import { TypeInputEnum } from "../form/form.enum";
-import { DataTable, DataTableFilterState } from "./DataTable";
-import {
-  DataTableActionsInterface,
-  DataTableColumnsInterface,
-} from "./dataTable.interface";
+import { useMemo } from "react";
+import { DataTable } from "./DataTable";
+import { dataTableActionsInterface } from "./dataTable.interface";
 
 export const DataTableView = () => {
-  const dataTableColumns: DataTableColumnsInterface<{}>[] = useMemo(() => {
+  const dataTableColumns = useMemo(() => {
     return [
-      {
-        id: "id",
-        label: "ID",
-        minWidth: 50,
-        type: "number",
-        filterable: true,
-        filterType: TypeInputEnum.CHECKBOX,
-        filterDataEnum: [
-          { label: "1", value: "1" },
-          { label: "2", value: "2" },
-          { label: "3", value: "3" },
-        ],
-      },
+      { id: "id", label: "ID", minWidth: 50, type: "number" },
       {
         id: "name",
         label: "Name",
-        field: "name",
         minWidth: 100,
-        filterable: true,
+        editable: true,
         type: "text",
-        displayOverlay: true,
-        openClickCell: true,
-        filterType: TypeInputEnum.TEXT,
-        filterDataEnum: [
-          { label: "John Doe", value: "John Doe" },
-          { label: "Jane Smith", value: "Jane Smith" },
-          { label: "Alice Johnson", value: "Alice Johnson" },
-        ],
       },
       { id: "age", label: "Age", minWidth: 50, type: "number" },
     ];
   }, []);
-  const [data, setData] = useState([
-    { id: 1, name: "John Doe", age: 28 },
-    { id: 2, name: "Jane Smith", age: 34 },
-    { id: 3, name: "Alice Johnson", age: 45 },
-  ]);
-
-  const actions: DataTableActionsInterface<{
+  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;
@@ -71,20 +47,11 @@ export const DataTableView = () => {
       },
     ];
   }, []);
-  const onFiltersChange = (filters: DataTableFilterState) => {
-    console.log("Filters changed: ", filters);
-  };
   return (
     <DataTable
       data={data}
       actions={actions}
       columns={dataTableColumns}
-      onFiltersChange={onFiltersChange}
-      onEditColumnByOverlay={(newRow) => {
-        setData((prevData) =>
-          prevData.map((row) => (row.id === newRow.id ? newRow : row)),
-        );
-      }}
       id="datatable-example"
       name={"DataTable"}
       onSelectionChange={(selectedRows) => {

package/src/dataTable/dataTable.css

@@ -1,31 +1,14 @@
 .data-table-container {
   overflow: auto;
-
-  .data-table-empty-state-content {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .data-table {
     width: 100%;
-    border-spacing: 5px 0;
+    border-spacing: 5px;
     font-size: 14px;
     color: #333;
-
-    /*   .data-table-sticky-cell {
-      box-shadow: 2px 0 0 #f1f3f8;
-    } */
-
     .select-cell {
       min-width: 40px !important;
-
       .input-container {
         min-width: 20px;
-
         input {
           min-width: 20px;
           width: 20px;
@@ -33,146 +16,15 @@
         }
       }
     }
-
     thead {
       margin-bottom: 1rem;
-      background-color: inherit;
-
+      position: sticky;
+      top: 0;
+      background-color: #fff;
       th {
         color: #bdbaba;
         min-width: 100px;
-        position: relative;
-        z-index: 11;
-        background-color: inherit;
-        background-clip: padding-box;
-
-        .data-table-column-sort {
-          .bi-arrow-down-up {
-            font-size: 1rem;
-          }
-        }
-
-        .data-table-column-filter {
-          visibility: hidden;
-          margin-left: 4px;
-
-          &.active {
-            visibility: visible;
-          }
-
-          .data-table-column-filter-active {
-            color: var(--tertiary-color);
-          }
-        }
-
-        .data-table-column-sort {
-          visibility: hidden;
-          margin-left: 4px;
-
-          &.active {
-            visibility: visible;
-          }
-
-          .data-table-column-sort-active {
-            color: var(--tertiary-color);
-          }
-        }
-
-        &:hover,
-        &:focus {
-
-          .data-table-column-filter,
-          .data-table-column-sort {
-            visibility: visible;
-          }
-        }
-      }
-
-      .data-table-filter-row {
-        th {
-          padding-top: 6px;
-          padding-bottom: 6px;
-          overflow: visible;
-        }
-
-        .data-table-filter-select {
-          width: 100%;
-          max-width: 100%;
-
-          button {
-            width: 100%;
-            max-width: 100%;
-            overflow: hidden;
-            padding: 4px 6px;
-            border: 1px solid #dedede;
-          }
-
-          .select-container-value {
-            display: block;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            font-size: 0.7rem;
-          }
-        }
-
-        .data-table-filter-input-wrapper {
-          width: 100%;
-          max-width: 100%;
-          overflow: visible;
-          box-sizing: border-box;
-
-          .input-clear-icon,
-          .clear-btn {
-            right: 5px;
-
-            .bi {
-              font-size: 0.8rem;
-            }
-          }
-
-          .input-container {
-            min-width: 0;
-            width: 100%;
-          }
-
-          .select-container {
-            max-width: 100%;
-            min-width: 0;
-          }
-
-          .select-container-button {
-            max-width: 100%;
-            min-width: 0;
-          }
-        }
-
-        .data-table-filter-input {
-          width: 100%;
-          max-width: 100%;
-          min-width: 0;
-          box-sizing: border-box;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          border: 1px solid #c9cfdb;
-          border-radius: 6px;
-          padding: 4px 6px;
-          font-size: 12px;
-          background-color: #fff;
-          color: #333;
-        }
-      }
-
-      .data-table-header-row {
-        th {
-          position: sticky;
-          top: 0;
-          z-index: 12;
-          background-color: #f9fbfc;
-        }
       }
     }
   }
-}
+}

package/src/dataTable/dataTable.interface.ts

@@ -1,41 +1,23 @@
 import { HTMLInputTypeAttribute } from "react";
-import { EnumerableType } from "../_core/type/generiqueType";
-import { TypeInputEnum } from "../form/form.enum";
 
-export interface DataTableColumnsInterface<T> {
+export interface dataTableColumnsInterface<T> {
   id: string;
   label: string;
-  key?: string;
-  name?: string;
-  sticky?: boolean;
   minWidth?: number;
   maxWidth?: number;
   width?: number;
   align?: "right" | "left" | "center";
-  alignText?: "right" | "left" | "center";
   format?: (value: any) => string;
   sortable?: boolean;
   filterable?: boolean;
-  filterDataEnum?: EnumerableType[];
-  filterType?: TypeInputEnum;
+  filterValue?: string;
   editable?: boolean;
-  isUpdatable?: boolean;
   options?: { label: string; value: string }[];
-  displayOverlay?: boolean;
-  onEditable?: (value: any, row: T) => boolean;
-  onChange?: (value: any, row: T) => void;
-  onEditByOverlay?: (value: any, row: T) => void;
   onEdit?: (value: any, row: T) => void;
-  onEditTrigger?: "change" | "enter";
   onRowStyle?: (row: T) => React.CSSProperties;
-  renderComponent?: (value: any, row: T) => JSX.Element;
-  openClickCell?: boolean;
-  handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
-  renderClickCellComponent?: (value: any, row: T) => JSX.Element;
   type: HTMLInputTypeAttribute | "select";
-  children?: DataTableColumnsInterface<T>[];
 }
-export interface DataTableActionsInterface<T> {
+export interface dataTableActionsInterface<T> {
   id: string;
   label: string;
   type: "button" | "link" | "icon";

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -1,8 +1,8 @@
 import { Button } from "../../button/Button";
 import { Icon } from "../../icon/Icon";
-import { DataTableActionsInterface } from "../dataTable.interface";
+import { dataTableActionsInterface } from "../dataTable.interface";
 type DataTableActionProps = {
-  action: DataTableActionsInterface<any>;
+  action: dataTableActionsInterface<any>;
   row: any;
   index?: number;
 };

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,77 +1,27 @@
-import { DataTableSortDirection } from "../DataTable";
-import { DataTableColumnsInterface } from "../dataTable.interface";
-import { DataTableColumnFilter } from "./dataTableColumnFilter/DataTableColumnFilter";
-import { DataTableColumnSort } from "./dataTableColumnSort/DataTableColumnSort";
+import { dataTableColumnsInterface } from "../dataTable.interface";
 
-export function DataTableColumn<T>({
+type DataTableColumnProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
+};
+export const DataTableColumn = ({
   column,
   idx,
   onColumnClick,
-  hasNestedColumns,
-  isFilterVisible,
-  onToggleFilterVisibility,
-  currentSortDirection,
-  onToggleSort,
-  stickyLeft,
-  stickyTop,
-}: {
-  hasNestedColumns: boolean;
-  column: DataTableColumnsInterface<T>;
-  idx: number;
-  onColumnClick?: (column: DataTableColumnsInterface<T>) => void;
-  isFilterVisible?: boolean;
-  onToggleFilterVisibility?: (column: DataTableColumnsInterface<T>) => void;
-  currentSortDirection?: DataTableSortDirection | null;
-  onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
-  stickyLeft?: number;
-  stickyTop?: number;
-}) {
-  const hasChildren = !!column.children?.length;
-  const isSticky = stickyLeft !== undefined;
-
+}: DataTableColumnProps) => {
   return (
     <th
       key={`colonne-${column.id}-${idx}`}
       style={{
-        minWidth: hasChildren ? undefined : column.minWidth,
-        maxWidth: hasChildren ? undefined : column.maxWidth,
-        width: hasChildren ? undefined : column.width,
-        textAlign: column.align ?? "left",
-        alignContent: column.children ? "center" : "flex-end",
-        top: stickyTop,
-        ...(isSticky
-          ? {
-              position: "sticky",
-              left: stickyLeft,
-              zIndex: 13,
-              backgroundColor: "#f9fbfc",
-            }
-          : {}),
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+        textAlign: column.align || "left",
       }}
-      className={`${column.children ? "has-children" : ""} ${
-        isSticky ? "data-table-sticky-cell" : ""
-      }`.trim()}
-      colSpan={column.children?.length ?? 1}
-      rowSpan={!column.children?.length && hasNestedColumns ? 2 : 1}
       onClick={() => onColumnClick?.(column)}
     >
-      <div className="d-flex align-items-center">
-        <div className="flex-1">{column.label}</div>
-        {column.filterable && (
-          <DataTableColumnFilter
-            column={column}
-            isFilterVisible={isFilterVisible}
-            onToggleVisibility={onToggleFilterVisibility}
-          />
-        )}
-        {column.sortable && (
-          <DataTableColumnSort
-            column={column}
-            sortDirection={currentSortDirection}
-            onToggleSort={onToggleSort}
-          />
-        )}
-      </div>
+      {column.label}
     </th>
   );
-}
+};

package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -1,10 +1,21 @@
 type DataTableLoadingProps = {
+  columns: any[];
+  actions: any[];
   emptyMessage?: string;
 };
-export const DataTableLoading = ({ emptyMessage }: DataTableLoadingProps) => {
+export const DataTableLoading = ({
+  columns,
+  actions,
+  emptyMessage,
+}: DataTableLoadingProps) => {
   return (
-    <div className="data-table-empty-state-content mt-3">
-      {emptyMessage || "Aucune donnée disponible"}
-    </div>
+    <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

@@ -1,80 +1,53 @@
-import { useRef, useState } from "react";
-import { DataTableColumnsInterface } from "../dataTable.interface";
-import { DataTableRowOverlay } from "./dataTableRowOverlay/DataTableRowOverlay";
-import { DataTableRowValue } from "./dataTableRowValue/DataTableRowValue";
+import { Select } from "../../select/Select";
+import { dataTableColumnsInterface } from "../dataTable.interface";
 
 type DataTableRowProps = {
-  column: DataTableColumnsInterface<any>;
+  column: dataTableColumnsInterface<any>;
   idx: number;
   row: any;
-  onEditColumnByOverlay?: (row: any) => void;
-  stickyLeft?: number;
 };
-export const DataTableRow = ({
-  column,
-  idx,
-  row,
-  onEditColumnByOverlay,
-  stickyLeft,
-}: DataTableRowProps) => {
+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) : {};
-  const isSticky = stickyLeft !== undefined;
-  const [openClickCell, setOpenClickCell] = useState(false);
-  const refRow = useRef<HTMLTableCellElement>(null);
-  const onClickRenderCell = (e: React.MouseEvent<HTMLTableCellElement>) => {
-    console.log("Cell clicked with value:", value, "in row:", row);
-    if (column.openClickCell) {
-      if (column.handleClickCell) {
-        column.handleClickCell(e, row);
-      }
-      e.stopPropagation();
-      setOpenClickCell((prev) => !prev);
-    }
-  };
   return (
     <td
-      ref={refRow}
       style={{
         minWidth: column.minWidth,
-        textAlign: column.alignText ? column.alignText : column.align || "left",
+        textAlign: column.align || "left",
         maxWidth: column.maxWidth,
         width: column.width,
-        ...(column.openClickCell || column.renderClickCellComponent
-          ? { cursor: "pointer" }
-          : {}),
-        ...(isSticky
-          ? {
-              position: "sticky",
-              left: stickyLeft,
-              zIndex: 2,
-              backgroundColor: "#fff",
-            }
-          : {}),
         ...style,
       }}
-      onClick={onClickRenderCell}
       key={`row-${column.id}-${idx}`}
-      className={isSticky ? "data-table-sticky-cell" : ""}
     >
-      {column.renderComponent ? column.renderComponent(value, row) : null}
-      {!column.renderComponent && (
-        <DataTableRowValue
-          editable={column.onEditable?.(value, row) ?? column.editable ?? false}
-          column={column}
-          value={value}
-          row={row}
-        />
-      )}
-      {openClickCell && column.displayOverlay && refRow.current && (
-        <DataTableRowOverlay
-          refRow={refRow}
-          column={column}
-          row={row}
-          value={value}
-          onEditColumnByOverlay={onEditColumnByOverlay}
-          onClose={() => setOpenClickCell(false)}
-        />
+      {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/expands/Expands.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from "react";
 import { Expand } from "./expand/expand";
 import { ExpandInterface } from "./expand/expand.interface";
 import "./expands.css";
@@ -11,6 +12,19 @@ type ExpandProps = {
 };
 
 export const Expands = (props: ExpandProps) => {
+  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
+  const onChangeExpand = useCallback(
+    (item: ExpandInterface) => {
+      if (props.onChange) {
+        props.onChange(item);
+      }
+      setCurrentExpand(item);
+    },
+    [setCurrentExpand, props.onChange]
+  );
+  useEffect(() => {
+    setCurrentExpand(props.currentItem);
+  }, [props.currentItem, setCurrentExpand, document.activeElement]);
   return (
     <div className={`expands ${props.className || ""}`}>
       {props.items.map((item: ExpandInterface) => (
@@ -18,8 +32,8 @@ export const Expands = (props: ExpandProps) => {
           key={item.id}
           item={item}
           showArrow={props.showArrow}
-          onChange={props.onChange}
-          currentExpand={props.currentItem}
+          onChange={onChangeExpand}
+          currentExpand={currentExpand}
         />
       ))}
     </div>

package/src/expands/expand/expand.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { ExpandInterface } from "./expand.interface";
 
@@ -7,7 +7,7 @@ export type ExpandProps = {
   item: ExpandInterface;
   className?: string;
   showArrow?: boolean;
-  onChange?: (item: ExpandInterface) => void;
+  onChange: (item: ExpandInterface) => void;
 };
 export const Expand = ({
   currentExpand,
@@ -16,17 +16,29 @@ export const Expand = ({
   showArrow = true,
   onChange,
 }: ExpandProps): JSX.Element => {
-  const active = currentExpand?.id === item.id;
-  console.log("render expand", item.title, "active", active);
+  const [active, setActive] = useState<boolean>(false);
+  useEffect(() => {
+    if (item && currentExpand) {
+      if (currentExpand.id === item.id) {
+        if (!active) {
+          setActive(true);
+        }
+      } else {
+        setActive(false);
+      }
+    } else {
+      setActive(false);
+    }
+  }, [currentExpand, setActive, item]);
+
   const handleChange = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation();
       if (onChange) {
-        console.log("expand", item);
         onChange(item);
       }
     },
-    [onChange, item],
+    [onChange, item]
   );
   return (
     <div