@addev-be/ui 3.2.9 → 3.3.0

package/src/components/grid/DataGrid/DataGridEditableCell/DateEditableCell.tsx

@@ -1,38 +1,38 @@
-import { DataGridEditableCellProps } from './types';
-import moment from 'moment';
-import { useCallback } from 'react';
-
-export const DateEditableCell = <R,>({
-  value,
-  onChange,
-  onClose,
-  ref,
-}: DataGridEditableCellProps<R, string>) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="date"
-      value={moment(value).format('YYYY-MM-DD')}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
+import { DataGridEditableCellProps } from './types';
+import moment from 'moment';
+import { useCallback } from 'react';
+
+export const DateEditableCell = <R,>({
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, string>) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="date"
+      value={moment(value).format('YYYY-MM-DD')}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};

package/src/components/grid/DataGrid/DataGridEditableCell/NumberEditableCell.tsx

@@ -1,71 +1,71 @@
-import {
-  decimalSeparator,
-  getCurrencySymbol,
-  parseNumber,
-} from '../../../../helpers/numbers';
-
-import { DataGridEditableCellProps } from './types';
-import { NumericFormat } from 'react-number-format';
-import { useCallback } from 'react';
-
-export const NumberEditableCell = <R,>({
-  decimals = 0,
-  currency,
-  prefix: prefixFromProps,
-  suffix: suffixFromProps,
-  row,
-  value,
-  onChange,
-  onClose,
-  ref,
-}: DataGridEditableCellProps<R, number> & {
-  decimals?: number;
-  currency?: string | ((row: R) => string);
-  prefix?: string;
-  suffix?: string;
-}) => {
-  const currencyName =
-    typeof currency === 'function' ? currency(row) : currency;
-
-  const [prefixFromCurrency, suffixFromCurrency] = currencyName
-    ? getCurrencySymbol(currencyName)
-    : [undefined, undefined];
-
-  const prefix = prefixFromProps || prefixFromCurrency;
-  const suffix = suffixFromProps || suffixFromCurrency;
-
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <NumericFormat
-      getInputRef={ref}
-      value={Number(value)}
-      onChange={(e) => {
-        console.log('e:', e);
-        onChange(parseNumber(e.target.value));
-      }}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      decimalSeparator={decimalSeparator}
-      decimalScale={decimals}
-      fixedDecimalScale={!!decimals}
-      prefix={prefix ? prefix + ' ' : undefined}
-      suffix={suffix ? ' ' + suffix : undefined}
-    />
-  );
-};
+import {
+  decimalSeparator,
+  getCurrencySymbol,
+  parseNumber,
+} from '../../../../helpers/numbers';
+
+import { DataGridEditableCellProps } from './types';
+import { NumericFormat } from 'react-number-format';
+import { useCallback } from 'react';
+
+export const NumberEditableCell = <R,>({
+  decimals = 0,
+  currency,
+  prefix: prefixFromProps,
+  suffix: suffixFromProps,
+  row,
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, number> & {
+  decimals?: number;
+  currency?: string | ((row: R) => string);
+  prefix?: string;
+  suffix?: string;
+}) => {
+  const currencyName =
+    typeof currency === 'function' ? currency(row) : currency;
+
+  const [prefixFromCurrency, suffixFromCurrency] = currencyName
+    ? getCurrencySymbol(currencyName)
+    : [undefined, undefined];
+
+  const prefix = prefixFromProps || prefixFromCurrency;
+  const suffix = suffixFromProps || suffixFromCurrency;
+
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <NumericFormat
+      getInputRef={ref}
+      value={Number(value)}
+      onChange={(e) => {
+        console.log('e:', e);
+        onChange(parseNumber(e.target.value));
+      }}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      decimalSeparator={decimalSeparator}
+      decimalScale={decimals}
+      fixedDecimalScale={!!decimals}
+      prefix={prefix ? prefix + ' ' : undefined}
+      suffix={suffix ? ' ' + suffix : undefined}
+    />
+  );
+};

package/src/components/grid/DataGrid/DataGridEditableCell/TextEditableCell.tsx

@@ -1,37 +1,37 @@
-import { DataGridEditableCellProps } from './types';
-import { useCallback } from 'react';
-
-export const TextEditableCell = <R,>({
-  value,
-  onChange,
-  onClose,
-  ref,
-}: DataGridEditableCellProps<R, string>) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="text"
-      value={String(value)}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
+import { DataGridEditableCellProps } from './types';
+import { useCallback } from 'react';
+
+export const TextEditableCell = <R,>({
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, string>) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="text"
+      value={String(value)}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};

package/src/components/grid/DataGrid/DataGridEditableCell/index.tsx

@@ -1,106 +1,112 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { EditableDataGridCellProps, EditableDataGridColumn } from '../types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { DataGridEditableCellFC } from './types';
-import { EditableCellContainer } from './styles';
-import { useDataGridContext } from '../hooks';
-
-export const DataGridEditableCell = <R, T>({
-  row,
-  columnKey,
-  column,
-  context,
-}: EditableDataGridCellProps<R, T>) => {
-  const { setEditingCell, setRows, editRow, rows, rowKeyGetter } =
-    useDataGridContext(context);
-  const initialValue = useMemo(() => column.getter(row), [column, row]);
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef<HTMLElement | null>(null);
-  const rowKey = rowKeyGetter(row);
-
-  const defaultItemToPartialRow = useCallback(
-    (key: string, row: R, newValue: T): Partial<R> =>
-      ({ Id: key, [columnKey]: newValue } as any),
-    [columnKey]
-  );
-  const partialRowGetter: EditableDataGridColumn<R, T>['itemToPartialRow'] =
-    ('itemToPartialRow' in column && column.itemToPartialRow) ||
-    defaultItemToPartialRow;
-
-  const save = useCallback(() => {
-    const rowIndex = rows.findIndex((r) => rowKeyGetter(r) === rowKey);
-
-    // If row is found
-    if (rowIndex >= 0) {
-      // Update the row with the new value
-      const partialRow = partialRowGetter(rowKey, row, value);
-      const newRow = {
-        ...row,
-        ...partialRow,
-      };
-
-      // Update the edited rows state
-      editRow(partialRow);
-
-      // Update the rows
-      setRows?.((oldRows) => {
-        const newRows = [...oldRows];
-        newRows[rowIndex] = newRow;
-        return newRows;
-      });
-    }
-  }, [
-    editRow,
-    partialRowGetter,
-    row,
-    rowKey,
-    rowKeyGetter,
-    rows,
-    setRows,
-    value,
-  ]);
-
-  const onClose = useCallback(
-    (shouldSave: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
-      if (shouldSave && value !== initialValue) {
-        save();
-      }
-      setEditingCell(nextEditingCell);
-    },
-    [initialValue, save, setEditingCell, value]
-  );
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      if (inputRef.current instanceof HTMLInputElement) {
-        inputRef.current.select();
-      }
-    }
-  }, [inputRef]);
-
-  const input = useMemo(() => {
-    if (!('editable' in column) || !column.editable || !column.editComponent) {
-      return null;
-    }
-    const EditComponent = column.editComponent as DataGridEditableCellFC<R>;
-    return (
-      <EditComponent
-        row={row}
-        ref={inputRef}
-        value={value}
-        onChange={setValue}
-        onClose={onClose}
-        context={context}
-      />
-    );
-  }, [column, context, onClose, row, value]);
-
-  return (
-    <EditableCellContainer key={columnKey} $textAlign={column.textAlign}>
-      {input}
-    </EditableCellContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { EditableDataGridCellProps, EditableDataGridColumn } from '../types';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataGridEditableCellFC } from './types';
+import { EditableCellContainer } from './styles';
+import { useDataGridContext } from '../hooks';
+
+export const DataGridEditableCell = <R, T>({
+  row,
+  columnKey,
+  column,
+  context,
+  rowIndex,
+  columnIndex,
+}: EditableDataGridCellProps<R, T>) => {
+  const { setEditingCell, setRows, editRow, rows, rowKeyGetter } =
+    useDataGridContext(context);
+  const initialValue = useMemo(() => column.getter(row), [column, row]);
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLElement | null>(null);
+  const rowKey = rowKeyGetter(row);
+
+  const defaultItemToPartialRow = useCallback(
+    (key: string, row: R, newValue: T): Partial<R> =>
+      ({ Id: key, [columnKey]: newValue }) as any,
+    [columnKey]
+  );
+  const partialRowGetter: EditableDataGridColumn<R, T>['itemToPartialRow'] =
+    ('itemToPartialRow' in column && column.itemToPartialRow) ||
+    defaultItemToPartialRow;
+
+  const save = useCallback(() => {
+    const rowIndex = rows.findIndex((r) => rowKeyGetter(r) === rowKey);
+
+    // If row is found
+    if (rowIndex >= 0) {
+      // Update the row with the new value
+      const partialRow = partialRowGetter(rowKey, row, value);
+      const newRow = {
+        ...row,
+        ...partialRow,
+      };
+
+      // Update the edited rows state
+      editRow(partialRow);
+
+      // Update the rows
+      setRows?.((oldRows) => {
+        const newRows = [...oldRows];
+        newRows[rowIndex] = newRow;
+        return newRows;
+      });
+    }
+  }, [
+    editRow,
+    partialRowGetter,
+    row,
+    rowKey,
+    rowKeyGetter,
+    rows,
+    setRows,
+    value,
+  ]);
+
+  const onClose = useCallback(
+    (shouldSave: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
+      if (shouldSave && value !== initialValue) {
+        save();
+      }
+      setEditingCell(nextEditingCell);
+    },
+    [initialValue, save, setEditingCell, value]
+  );
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      if (inputRef.current instanceof HTMLInputElement) {
+        inputRef.current.select();
+      }
+    }
+  }, [inputRef]);
+
+  const input = useMemo(() => {
+    if (!('editable' in column) || !column.editable || !column.editComponent) {
+      return null;
+    }
+    const EditComponent = column.editComponent as DataGridEditableCellFC<R>;
+    return (
+      <EditComponent
+        row={row}
+        ref={inputRef}
+        value={value}
+        onChange={setValue}
+        onClose={onClose}
+        context={context}
+      />
+    );
+  }, [column, context, onClose, row, value]);
+
+  return (
+    <EditableCellContainer
+      data-testid={`editable-cell-${rowIndex}-${columnIndex}`}
+      key={columnKey}
+      $textAlign={column.textAlign}
+    >
+      {input}
+    </EditableCellContainer>
+  );
+};

package/src/components/grid/DataGrid/DataGridEditableCell/styles.ts

@@ -1,35 +1,35 @@
-import { dataGridCellCss } from '../styles';
-import styled from 'styled-components';
-
-export const EditableCellContainer = styled.div<{
-  $textAlign?: 'left' | 'right' | 'center';
-}>`
-  position: relative;
-  ${dataGridCellCss}
-  padding: 1px 4px 0px 4px;
-  overflow: visible;
-  background-color: var(--color-base-0);
-
-  & input,
-  & select {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    text-align: ${({ $textAlign = 'left' }) => $textAlign};
-
-    border: 1px solid var(--color-base-300);
-    padding: var(--space-1) var(--space-2);
-
-    color: var(--color-text-800);
-    &::placeholder {
-      color: var(--color-text-400);
-    }
-
-    border: none;
-    outline: none;
-  }
-`;
+import { dataGridCellCss } from '../styles';
+import styled from 'styled-components';
+
+export const EditableCellContainer = styled.div<{
+  $textAlign?: 'left' | 'right' | 'center';
+}>`
+  position: relative;
+  ${dataGridCellCss}
+  padding: 1px 4px 0px 4px;
+  overflow: visible;
+  background-color: var(--color-base-0);
+
+  & input,
+  & select {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    text-align: ${({ $textAlign = 'left' }) => $textAlign};
+
+    border: 1px solid var(--color-base-300);
+    padding: var(--space-1) var(--space-2);
+
+    color: var(--color-text-800);
+    &::placeholder {
+      color: var(--color-text-400);
+    }
+
+    border: none;
+    outline: none;
+  }
+`;

package/src/components/grid/DataGrid/DataGridEditableCell/types.ts

@@ -1,18 +1,18 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { FC, Ref } from 'react';
-
-import { DataGridContext } from '../types';
-
-export type DataGridEditableCellProps<R, T> = {
-  ref?: Ref<any>;
-  row: R;
-  value: T;
-  onChange: (value: T | null) => void;
-  onClose: (save: boolean) => void;
-  context: DataGridContext<R>;
-};
-
-export type DataGridEditableCellFC<R, T = any> = FC<
-  DataGridEditableCellProps<R, T>
->;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { FC, Ref } from 'react';
+
+import { DataGridContext } from '../types';
+
+export type DataGridEditableCellProps<R, T> = {
+  ref?: Ref<any>;
+  row: R;
+  value: T;
+  onChange: (value: T | null) => void;
+  onClose: (save: boolean) => void;
+  context: DataGridContext<R>;
+};
+
+export type DataGridEditableCellFC<R, T = any> = FC<
+  DataGridEditableCellProps<R, T>
+>;