kelt-ui-kit-react 2.0.3 → 2.0.5

package/src/dataTable/dataTableFilters/DataTableFilters.tsx

@@ -1,91 +0,0 @@
-import { Badge } from "../../badge/Badge";
-import { Icon } from "../../icon/Icon";
-import {
-  DataTableDateRangeFilterValue,
-  DataTableFilterState,
-} from "../DataTable";
-import "./dataTableFilters.css";
-export type DataTableFiltersProps = {
-  currentFilters: DataTableFilterState;
-  setCurrentFilters: React.Dispatch<React.SetStateAction<DataTableFilterState>>;
-};
-export const DataTableFilters = ({
-  currentFilters,
-  setCurrentFilters,
-}: DataTableFiltersProps) => {
-  const isDateRangeFilterValue = (
-    value: DataTableFilterState[string],
-  ): value is DataTableDateRangeFilterValue => {
-    return (
-      typeof value === "object" &&
-      value !== null &&
-      "startDate" in value &&
-      "endDate" in value
-    );
-  };
-
-  const getDisplayValue = (value: DataTableFilterState[string]) => {
-    if (isDateRangeFilterValue(value)) {
-      if (value.startDate && value.endDate) {
-        return `${value.startDate} - ${value.endDate}`;
-      }
-
-      if (value.startDate) {
-        return `a partir de ${value.startDate}`;
-      }
-
-      if (value.endDate) {
-        return `jusqu'au ${value.endDate}`;
-      }
-
-      return "";
-    }
-
-    return String(value ?? "");
-  };
-
-  const generateColor = (str: string): string => {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-
-    const hue = hash % 360;
-    return `hsl(${hue}, 80%, 30%)`;
-  };
-
-  const removeFilters = (key: string) => {
-    setCurrentFilters((prev: any) => {
-      const { [key]: _removed, ...rest } = prev;
-      return rest;
-    });
-  };
-  if (!currentFilters || Object.keys(currentFilters).length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="badge-filters">
-      {Object.keys(currentFilters).map((key) => {
-        const value = getDisplayValue(currentFilters[key]);
-        const displayValue =
-          value.length > 20 ? value.substring(0, 20) + "..." : value;
-
-        return (
-          <Badge
-            onRemove={() => removeFilters(key)}
-            className="mr-2"
-            title={`${key} : ${displayValue}`}
-            color={generateColor(key)}
-            key={key}
-          />
-        );
-      })}
-
-      <Icon
-        classIcon="bi-x badge-filters-clear"
-        onClick={() => setCurrentFilters({})}
-      />
-    </div>
-  );
-};

package/src/dataTable/dataTableFilters/dataTableFilters.css

@@ -1,16 +0,0 @@
-.badge-filters {
-  border-radius: 4px;
-  padding: 0.25rem;
-  border: 1px solid #dedede;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  position: sticky;
-  left: 0;
-  .badge-filters-clear {
-    padding: 0.05rem;
-    border: 1px solid #dedede;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-}

package/src/dataTable/dataTableRow/dataTableRowOverlay/DataTableRowOverlay.tsx

@@ -1,80 +0,0 @@
-import { useRef, useState } from "react";
-import { Button } from "../../../button/Button";
-import { OverlayPanel } from "../../../overlayPanel/OverlayPanel";
-import { DataTableColumnsInterface } from "../../dataTable.interface";
-import { DataTableRowValue } from "../dataTableRowValue/DataTableRowValue";
-
-type DataTableRowOverlayProps = {
-  row: any;
-  column: DataTableColumnsInterface<any>;
-  value: string;
-  refRow: React.RefObject<HTMLTableCellElement>;
-  onClose?: (close: boolean) => void;
-  onEditColumnByOverlay?: (newRow: any) => void;
-};
-export const DataTableRowOverlay = ({
-  row,
-  refRow,
-  value,
-  onClose,
-  column,
-  onEditColumnByOverlay,
-}: DataTableRowOverlayProps) => {
-  const [inputValue, setInputValue] = useState(value);
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const onChange = (newValue: any) => {
-    setInputValue(newValue);
-  };
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (onEditColumnByOverlay) {
-      const newRow = { ...row, [column.id]: inputValue };
-      onEditColumnByOverlay(newRow);
-    }
-    if (onClose) {
-      onClose(true);
-    }
-  };
-
-  const handleButtonClick = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    e.preventDefault();
-    formRef.current?.requestSubmit();
-  };
-
-  const handleClose = () => {
-    if (onClose) {
-      onClose(true);
-    }
-  };
-
-  return (
-    <OverlayPanel
-      show={true}
-      position="bottomLeft"
-      closeOverlay={handleClose}
-      referenceElement={refRow?.current ?? undefined}
-      children={
-        <div className="d-flex flex-column pt-3">
-          <form onSubmit={onSubmit} ref={formRef}>
-            <DataTableRowValue
-              editable={true}
-              column={column}
-              value={inputValue}
-              row={row}
-              onChange={onChange}
-            />
-            {onEditColumnByOverlay && (
-              <div className="d-flex justify-content-end mt-2">
-                <Button title="Valider" onClick={handleButtonClick} />
-              </div>
-            )}
-          </form>
-        </div>
-      }
-    />
-  );
-};

package/src/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.tsx

@@ -1,123 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Select } from "../../../select/Select";
-import { DataTableColumnsInterface } from "../../dataTable.interface";
-
-type DataTableRowValueProps = {
-  column: DataTableColumnsInterface<any>;
-  value: any;
-  row: any;
-  editable?: boolean;
-  onChange?: (value: any) => void;
-};
-export const DataTableRowValue = ({
-  column,
-  row,
-  value,
-  editable,
-  onChange,
-}: DataTableRowValueProps) => {
-  const [draftValue, setDraftValue] = useState(value ?? "");
-  const editOnEnter = column.onEditTrigger === "enter";
-  const skipNextBlurCommit = useRef(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const wasEditableRef = useRef(false);
-
-  const selectInputText = () => {
-    try {
-      inputRef.current?.select();
-    } catch {
-      // Some input types (e.g. date) may not support text selection.
-    }
-  };
-
-  const commitValue = (nextValue: any) => {
-    if (column.onEdit) {
-      column.onEdit(nextValue, row);
-    }
-  };
-
-  useEffect(() => {
-    setDraftValue(value ?? "");
-  }, [value]);
-
-  useEffect(() => {
-    if (editable && !wasEditableRef.current) {
-      inputRef.current?.focus();
-      selectInputText();
-    }
-    wasEditableRef.current = !!editable;
-  }, [editable]);
-
-  return (
-    <>
-      {editable ? (
-        column.type === "select" ? (
-          <Select
-            options={column.options ?? []}
-            value={value}
-            onChange={(e) => {
-              if (onChange) {
-                onChange(e);
-              }
-              if (column.onChange) {
-                column.onChange(e, row);
-              }
-              if (column.onEdit) {
-                column.onEdit(e, row);
-              }
-            }}
-          />
-        ) : (
-          <input
-            ref={inputRef}
-            type={column.type}
-            value={editOnEnter ? draftValue : value}
-            step="0.01"
-            style={{
-              textAlign: column.alignText
-                ? column.alignText
-                : column.align || "left",
-            }}
-            onFocus={selectInputText}
-            onChange={(e) => {
-              const nextValue = e.target.value;
-              if (onChange) {
-                onChange(nextValue);
-              }
-              if (column.onChange) {
-                column.onChange(nextValue, row);
-              }
-              if (editOnEnter) {
-                setDraftValue(nextValue);
-                return;
-              }
-              commitValue(nextValue);
-            }}
-            onKeyDown={(e) => {
-              if (editOnEnter && e.key === "Enter") {
-                skipNextBlurCommit.current = true;
-                commitValue(draftValue);
-              }
-            }}
-            onBlur={() => {
-              if (!editOnEnter) {
-                return;
-              }
-              if (skipNextBlurCommit.current) {
-                skipNextBlurCommit.current = false;
-                return;
-              }
-              if (draftValue !== value) {
-                commitValue(draftValue);
-              }
-            }}
-          />
-        )
-      ) : column.format ? (
-        column.format(value)
-      ) : (
-        value
-      )}
-    </>
-  );
-};