kelt-ui-kit-react 1.8.3 → 1.8.4

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
-      )}
-    </>
-  );
-};