@addev-be/ui 0.14.1 → 0.14.2

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+import {
+  DataGridCheckboxColumn,
+  DataGridColorColumn,
+  DataGridColumn,
+  DataGridDateColumn,
+  DataGridNumberColumn,
+  DataGridSettings,
+  DataGridTextColumn,
+} from '../types';
 import { dateFilter, numberFilter, textFilter } from './filters';
 import {
   formatMoney,
@@ -22,298 +30,292 @@ export const buildExcelFormat = (decimals = 2, suffix = '') =>
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
+  options?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => row[key] ?? '',
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  ...options,
 });
 
 export const mailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`mailto:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
+  options?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  ...options,
 });
 
 export const phoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`tel:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
+  options?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  ...options,
 });
 
 export const dateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
-    excelFormatter: () => 'dd/mm/yyyy',
-    excelValue: (date) => moment(date).format('DD/MM/YYYY') ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: {
-      ...dateFilter(key),
-      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
-    },
-    ...options,
+  options?: Partial<DataGridDateColumn<R>>
+): DataGridDateColumn<R> => ({
+  key,
+  type: 'date',
+  name: title,
+  render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy',
+    valueGetter: (value) => moment(value).format('DD/MM/YYYY') ?? '',
   },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: {
+    ...dateFilter(key),
+    renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+  },
+  ...options,
 });
 
 export const dateTimeColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => moment(row[key]).format('DD/MM/YYYY HH:mm:ss') ?? '',
-    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
-    excelValue: (date) => moment(date).format('DD/MM/YYYY HH:mm:ss') ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: {
-      ...dateFilter(key),
-      renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
-    },
-    ...options,
+  options?: Partial<DataGridDateColumn<R>>
+): DataGridDateColumn<R> => ({
+  key,
+  type: 'date',
+  name: title,
+  render: (row) => moment(row[key]).format('DD/MM/YYYY HH:mm:ss') ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy hh:mm:ss',
+    valueGetter: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: {
+    ...dateFilter(key),
+    renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
   },
+  ...options,
 });
 
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
+  options?: Partial<DataGridTextColumn<R>>
+): DataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  ...options,
 });
 
 export const numberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: {
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    filter: {
-      ...numberFilter(key),
-      renderer: (value) => formatNumber(value, decimals) ?? '',
-    },
-    ...options,
+  options?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => ({
+  key,
+  type: 'number',
+  name: title,
+  render: (row) => formatNumber(row[key], decimals) ?? '',
+  excelOptions: {
+    formatter: () => buildExcelFormat(decimals),
+    valueGetter: (value) => formatNumberInvariant(value, decimals),
   },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: {
+    sum: (_, filteredRows) =>
+      formatNumber(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+        decimals
+      ),
+    average: (_, filteredRows) =>
+      formatNumber(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+          (filteredRows.length || 1),
+        decimals
+      ),
+    count: (_, filteredRows) => `${filteredRows.length} éléments`,
+    max: (_, filteredRows) =>
+      formatNumber(
+        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+    min: (_, filteredRows) =>
+      formatNumber(
+        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+  },
+  filter: {
+    ...numberFilter(key),
+    renderer: (value) => formatNumber(value, decimals) ?? '',
+  },
+  ...options,
 });
 
 export const moneyColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, ' €'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...numberFilter(key),
-      renderer: (value) => formatMoney(value, decimals) ?? '',
-    },
-    footer: {
-      sum: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatMoney(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatMoney(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    ...options,
+  options?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => ({
+  key,
+  type: 'number',
+  name: title,
+  render: (row) => formatMoney(row[key], decimals) ?? '',
+  excelOptions: {
+    formatter: () => buildExcelFormat(decimals, ' €'),
+    valueGetter: (value) => formatNumberInvariant(value, decimals),
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: {
+    ...numberFilter(key),
+    renderer: (value) => formatMoney(value, decimals) ?? '',
   },
+  footer: {
+    sum: (_, filteredRows) =>
+      formatMoney(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+        decimals
+      ),
+    average: (_, filteredRows) =>
+      formatMoney(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+          (filteredRows.length || 1),
+        decimals
+      ),
+    count: (_, filteredRows) => `${filteredRows.length} éléments`,
+    max: (_, filteredRows) =>
+      formatMoney(
+        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+    min: (_, filteredRows) =>
+      formatMoney(
+        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+  },
+  ...options,
 });
 
 export const percentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, '%'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    footer: {
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-    },
-    ...options,
+  options?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => ({
+  key,
+  type: 'number',
+  name: title,
+  render: (row) => formatPercentage(row[key]) ?? '',
+  excelOptions: {
+    formatter: () => buildExcelFormat(decimals, '%'),
+    valueGetter: (value) => formatNumberInvariant(value, decimals),
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: numberFilter(key),
+  footer: {
+    average: (_, filteredRows) =>
+      formatNumber(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+          (filteredRows.length || 1),
+        decimals
+      ),
+    count: (_, filteredRows) => `${filteredRows.length} éléments`,
+    max: (_, filteredRows) =>
+      formatNumber(
+        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+    min: (_, filteredRows) =>
+      formatNumber(
+        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+        decimals
+      ),
+    sum: (_, filteredRows) =>
+      formatNumber(
+        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+        decimals
+      ),
   },
+  ...options,
 });
 
 export const checkboxColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <>
-        <input type="checkbox" checked={row[key]} readOnly />
-        <span>{row[key] ? ' Oui' : ' Non'}</span>
-      </>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    footer: {
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      checked: (_, filteredRows) =>
-        `${filteredRows.filter((row) => !!row[key]).length} cochés`,
-      unchecked: (_, filteredRows) =>
-        `${filteredRows.filter((row) => !row[key]).length} décochés`,
-    },
-    ...options,
+  options?: Partial<DataGridCheckboxColumn<R>>
+): DataGridCheckboxColumn<R> => ({
+  key,
+  type: 'checkbox',
+  name: title,
+  render: (row) => (
+    <>
+      <input type="checkbox" checked={row[key]} readOnly />
+      <span>{row[key] ? ' Oui' : ' Non'}</span>
+    </>
+  ),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: numberFilter(key),
+  footer: {
+    count: (_, filteredRows) => `${filteredRows.length} éléments`,
+    checked: (_, filteredRows) =>
+      `${filteredRows.filter((row) => !!row[key]).length} cochés`,
+    unchecked: (_, filteredRows) =>
+      `${filteredRows.filter((row) => !row[key]).length} décochés`,
   },
+  ...options,
 });
 
 export const colorColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    footer: (rows) => `${rows.length} éléments`,
-    ...options,
-  },
+  options?: Partial<DataGridColorColumn<R>>
+): DataGridColorColumn<R> => ({
+  key,
+  type: 'color',
+  name: title,
+  render: (row) => (
+    <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+  ),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: textFilter(key),
+  footer: (rows) => `${rows.length} éléments`,
+  ...options,
 });

package/src/components/data/DataGrid/hooks/index.ts

@@ -2,11 +2,10 @@ import { DataGridColumns, DataGridContext } from '../types';
 import { useContext, useMemo } from 'react';
 
 import { isColumnVisible } from '../helpers/columns';
-import { pickBy } from 'lodash';
 
+export { useDataGrid } from './useDataGrid';
 export { useDataGridCopy } from './useDataGridCopy';
 export { useDataGridSettings } from './useDataGridSettings';
-export { useDataGrid } from './useDataGrid';
 
 export const useDataGridContext = <R>(context: DataGridContext<R>) =>
   useContext(context);
@@ -14,8 +13,8 @@ export const useDataGridContext = <R>(context: DataGridContext<R>) =>
 export const useVisibleAndHiddenColumns = <R>(columns: DataGridColumns<R>) =>
   useMemo(
     () => [
-      pickBy(columns, (col) => isColumnVisible(col)),
-      pickBy(columns, (col) => !isColumnVisible(col)),
+      columns.filter(isColumnVisible),
+      columns.filter((col) => !isColumnVisible(col)),
     ],
     [columns]
   );
@@ -23,8 +22,8 @@ export const useVisibleAndHiddenColumns = <R>(columns: DataGridColumns<R>) =>
 export const useSortedColumns = <R>(columns: DataGridColumns<R>) =>
   useMemo(
     () =>
-      Object.entries(columns)
-        .filter(([, col]) => isColumnVisible(col))
-        .sort((a, b) => (a[1].order ?? 0) - (b[1].order ?? 0)),
+      columns
+        .filter(isColumnVisible)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
     [columns]
   );