@addev-be/ui 0.14.1 → 0.14.2

package/assets/icons/floppy-disk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -53,6 +53,7 @@
     "io-ts": "^2.2.21",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "react-number-format": "^5.4.4",
     "react-router-dom": "^7.0.2",
     "rxjs": "^7.8.1",
     "uuid": "^10.0.0"

package/src/Icons.tsx

@@ -23,6 +23,7 @@ import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
 import FilterFullIcon from '../assets/icons/filter-full.svg?react';
 import FilterIcon from '../assets/icons/filter.svg?react';
 import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
 import HashtagIcon from '../assets/icons/hashtag.svg?react';
 import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
 import LeftIcon from '../assets/icons/left.svg?react';
@@ -129,4 +130,5 @@ export {
   XBarIcon,
   XMarkIcon,
   XMarkLargeIcon,
+  FloppyDiskIcon,
 };

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -10,7 +10,7 @@ import { DataGridEditableCell } from './DataGridEditableCell';
 import { useDataGridContext } from './hooks';
 
 const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
-  const value = col.propertyName ? row[col.propertyName] : '';
+  const value = col.getter(row);
   return !value ? '' : String(value);
 };
 
@@ -31,8 +31,7 @@ export const DataGridCell = <R,>({
     onRowDoubleClick,
     userSelect,
   } = useDataGridContext(context);
-  const isEditable =
-    !!editable && !!column.editable && column.type && column.getter;
+  const isEditable = !!editable && !!column.editable && !!column.editComponent;
   const isEditing =
     isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
   const DataGridCellComponent = column.component ?? styles.DataGridCell;
@@ -70,6 +69,7 @@ export const DataGridCell = <R,>({
       style={style}
       $userSelect={userSelect}
       $color={column.color}
+      $textAlign={column.textAlign}
     >
       {(column.render ?? defaultRender)(row, column)}
     </DataGridCellComponent>

package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts

@@ -1,14 +1,9 @@
-import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
+import { DataGridColumns } from '../types';
 
 export const normalizeColumnsOrders = <R>(
-  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
-) =>
-  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
-    DataGridColumnKeyValuePair<R>
-  >(([key, column], index) => [
-    key,
-    {
-      ...column,
-      order: index,
-    },
-  ]);
+  columns: DataGridColumns<R>
+): DataGridColumns<R> =>
+  columns.map((column, index) => ({
+    ...column,
+    order: index,
+  }));

package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx

@@ -1,10 +1,10 @@
+import { keyBy, mapValues } from 'lodash';
 import { useCallback, useContext, useMemo, useState } from 'react';
 
 import { Button } from '../../../forms';
 import { DataGridColumnsEditor } from '.';
 import { DataGridContext } from '../types';
 import { Modal } from '../../../layout/Modal';
-import { mapValues } from 'lodash';
 
 export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
   const [isVisible, setIsVisible] = useState(false);
@@ -20,7 +20,7 @@ export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
   }, []);
 
   const onApplyClicked = useCallback(() => {
-    const newSettings = mapValues(currentColumns, (col) => ({
+    const newSettings = mapValues(keyBy(currentColumns, 'key'), (col) => ({
       order: col.order ?? 0,
       width: col.width ?? 150,
     }));

package/src/components/data/DataGrid/DataGridColumnsModal/index.tsx

@@ -70,9 +70,10 @@ export const DataGridColumnsEditor = <R,>({
   columns: DataGridColumns<R>;
   onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
 }) => {
+  console.log('DataGridColumnsEditor columns:', columns);
   const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
   const sortedVisibleColumnsEntries = normalizeColumnsOrders(
-    _.sortBy(Object.entries(visibleColumns), ([, col]) => col.order ?? 0)
+    _.sortBy(visibleColumns, (col) => col.order ?? 0)
   );
 
   const onUpButtonClicked = useCallback(
@@ -84,10 +85,7 @@ export const DataGridColumnsEditor = <R,>({
           sortedVisibleColumnsEntries[index - 1],
           ...sortedVisibleColumnsEntries.slice(index + 1),
         ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
+        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
       }
     },
     [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
@@ -102,10 +100,7 @@ export const DataGridColumnsEditor = <R,>({
           sortedVisibleColumnsEntries[index],
           ...sortedVisibleColumnsEntries.slice(index + 2),
         ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
+        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
       }
     },
     [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
@@ -113,28 +108,34 @@ export const DataGridColumnsEditor = <R,>({
 
   const onHideButtonClicked = useCallback(
     (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...prev[columnKey],
-          order: -1,
-        },
-      }));
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: -1,
+              }
+            : column
+        )
+      );
     },
     [onColumnsChanged]
   );
 
   const onShowButtonClicked = useCallback(
     (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...hiddenColumns[columnKey],
-          order: Object.keys(prev).length,
-        },
-      }));
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: Object.keys(prev).length,
+              }
+            : column
+        )
+      );
     },
-    [hiddenColumns, onColumnsChanged]
+    [onColumnsChanged]
   );
 
   return (
@@ -142,10 +143,10 @@ export const DataGridColumnsEditor = <R,>({
       <styles.Panel>
         <styles.Title>Colonnes visibles</styles.Title>
         <styles.ColumnsList>
-          {sortedVisibleColumnsEntries.map(([key, column], index) => (
+          {sortedVisibleColumnsEntries.map((column, index) => (
             <DataGridColumnItem
-              key={key}
-              columnKey={key}
+              key={column.key}
+              columnKey={column.key}
               columnIndex={index}
               column={column}
               visible
@@ -164,10 +165,10 @@ export const DataGridColumnsEditor = <R,>({
       <styles.Panel>
         <styles.Title>Colonnes masquées</styles.Title>
         <styles.ColumnsList>
-          {Object.entries(hiddenColumns).map(([key, column], index) => (
+          {hiddenColumns.map((column, index) => (
             <DataGridColumnItem
-              key={key}
-              columnKey={key}
+              key={column.key}
+              columnKey={column.key}
               columnIndex={index}
               column={column}
               visible={false}

package/src/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.tsx

@@ -0,0 +1,38 @@
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+
+const CheckboxEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, boolean>,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  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="checkbox"
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export const CheckboxEditableCell = forwardRef(CheckboxEditableCellInner);

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

@@ -0,0 +1,39 @@
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+import moment from 'moment';
+
+const DateEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, Date>,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  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(moment(e.target.value, 'YYYY-MM-DD').toDate())}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export const DateEditableCell = forwardRef(DateEditableCellInner);

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

@@ -0,0 +1,68 @@
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+import {
+  decimalSeparator,
+  getCurrencySymbol,
+  parseNumber,
+} from '../../../../helpers/numbers';
+
+import { DataGridEditableCellProps } from './types';
+import { NumericFormat } from 'react-number-format';
+
+const NumberEditableCellInner = <R,>(
+  {
+    decimals = 0,
+    currency,
+    row,
+    value,
+    onChange,
+    onClose,
+  }: DataGridEditableCellProps<R, number> & {
+    decimals?: number;
+    currency?: string | ((row: R) => string);
+  },
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  const currencyName =
+    typeof currency === 'function' ? currency(row) : currency;
+
+  const [prefix, suffix] = currencyName
+    ? getCurrencySymbol(currencyName)
+    : [undefined, undefined];
+
+  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}
+    />
+  );
+};
+
+export const NumberEditableCell = forwardRef(NumberEditableCellInner);

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

@@ -0,0 +1,38 @@
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+
+const TextEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  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}
+    />
+  );
+};
+
+export const TextEditableCell = forwardRef(TextEditableCellInner);

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

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataGridCellProps } from '../types';
+import { DataGridEditableCellFC } from './types';
+import { EditableCellContainer } from '../styles';
+import { useDataGridContext } from '../hooks';
+
+export const DataGridEditableCell = <R,>({
+  row,
+  columnKey,
+  column,
+  context,
+}: DataGridCellProps<R>) => {
+  const { onCellEdited, setEditingCell } = useDataGridContext(context);
+  const initialValue = useMemo(() => column.getter(row) ?? '', [column, row]);
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const onClose = useCallback(
+    (save: boolean, nextEditingCell: [number, number] = [-1, -1]) => {
+      if (save && value !== initialValue) {
+        onCellEdited?.(row, columnKey, value);
+      }
+      setEditingCell(nextEditingCell);
+    },
+    [columnKey, initialValue, onCellEdited, row, setEditingCell, value]
+  );
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [inputRef]);
+
+  const input = useMemo(() => {
+    if (!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}
+      />
+    );
+  }, [column.editComponent, column.editable, onClose, row, value]);
+
+  return (
+    <EditableCellContainer key={columnKey} $textAlign={column.textAlign}>
+      {input}
+    </EditableCellContainer>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { FC, ForwardedRef } from 'react';
+
+export type DataGridEditableCellProps<R, T> = {
+  ref?: ForwardedRef<HTMLInputElement>;
+  row: R;
+  value: T;
+  onChange: (value: T) => void;
+  onClose: (save: boolean) => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DataGridEditableCellFC<R, T = any> = FC<
+  DataGridEditableCellProps<R, T>
+>;

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -1,4 +1,8 @@
-import { DataGridContext, DataGridFilter } from '../types';
+import {
+  DataGridColumnWithFilter,
+  DataGridContext,
+  DataGridFilter,
+} from '../types';
 import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
 import { useCallback, useState } from 'react';
 
@@ -8,19 +12,18 @@ import { Modal } from '../../../layout/Modal';
 import { useDataGridContext } from '../hooks';
 
 export const useFilterModal = <R,>({
-  columnKey,
+  column,
   context,
   onClose,
 }: {
-  columnKey: string;
+  column: DataGridColumnWithFilter<R>;
   context: DataGridContext<R>;
   onClose?: () => void;
 }) => {
   const [isVisible, setIsVisible] = useState(false);
-  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
-  const column = columns[columnKey];
+  const { filters = {}, setFilters } = useDataGridContext<R>(context);
   const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
-    filters[columnKey] ?? column?.filter
+    column.filter
   );
 
   const openModal = useCallback(() => {
@@ -33,15 +36,15 @@ export const useFilterModal = <R,>({
 
   const onClearClicked = useCallback(() => {
     const newFilters = { ...filters };
-    delete newFilters[columnKey];
+    delete newFilters[column.key];
     setFilters(newFilters);
     closeModal();
-  }, [closeModal, columnKey, filters, setFilters]);
+  }, [closeModal, column.key, filters, setFilters]);
 
   const onApplyClicked = useCallback(() => {
-    setFilters({ ...filters, [columnKey]: currentFilter });
+    setFilters({ ...filters, [column.key]: currentFilter });
     closeModal();
-  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
+  }, [closeModal, column.key, currentFilter, filters, setFilters]);
 
   const onCancelClicked = useCallback(() => {
     closeModal();