@addev-be/ui 0.20.3 → 0.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.20.3",
+  "version": "0.20.4",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.20.3",
+    "@addev-be/framework-utils": "^0.20.4",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

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

@@ -1,20 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
 import * as styles from './styles';
 
-import { DataGridCellProps, DataGridColumn } from './types';
-import { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback, useMemo } from 'react';
 
+import { DataGridCellProps } from './types';
 import { DataGridEditableCell } from './DataGridEditableCell';
 import { useDataGridContext } from './hooks';
 
-const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
-  const value = col.getter(row);
-  return !value ? '' : String(value);
-};
+const defaultRender = (value: any) => (!value ? '' : String(value));
 
-export const DataGridCell = <R,>({
+export const DataGridCell = <R, T>({
   row,
   rowIndex,
   columnKey,
@@ -22,7 +18,7 @@ export const DataGridCell = <R,>({
   column,
   context,
   style,
-}: DataGridCellProps<R>) => {
+}: DataGridCellProps<R, T>) => {
   const {
     name,
     editable,
@@ -31,11 +27,17 @@ export const DataGridCell = <R,>({
     onRowDoubleClick,
     userSelect,
   } = useDataGridContext(context);
-  const isEditable = !!editable && !!column.editable && !!column.editComponent;
+  const isEditable =
+    !!editable &&
+    'editable' in column &&
+    !!column.editable &&
+    !!column.editComponent;
   const isEditing =
     isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
   const DataGridCellComponent = column.component ?? styles.DataGridCell;
 
+  const value = useMemo(() => column.getter(row), [column, row]);
+
   const onDoubleClick = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
@@ -71,7 +73,7 @@ export const DataGridCell = <R,>({
       $color={column.color}
       $textAlign={column.textAlign}
     >
-      {(column.render ?? defaultRender)(row, column)}
+      {(column.render ?? defaultRender)(value, row, column)}
     </DataGridCellComponent>
   );
 };

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

@@ -58,7 +58,11 @@ type CommonGridColumnProps<R, T> = {
   name: ReactNode;
   order?: number;
   getter: (row: R) => T;
-  render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
+  render?: (
+    value: T,
+    row: R,
+    column: CommonGridColumnProps<R, T>
+  ) => ReactNode | string;
   resizable?: boolean;
   sortGetter?: (row: R) => string | number;
   width?: number;
@@ -246,21 +250,20 @@ export type DataGridSettingsTuple = [string, DataGridSetting];
 export type DataGridSettingsArray = DataGridSettingsTuple[];
 export type DataGridColumnKeyValuePair<R> = [string, DataGridColumn<R>];
 
-export type DataGridCellProps<R> = {
+export type DataGridCellProps<R, T> = {
   row: R;
   rowIndex: number;
   columnKey: string;
   columnIndex: number;
-  column: DataGridColumn<R>;
+  column: CommonGridColumnProps<R, T> | EditableDataGridColumn<R, T>;
   context: DataGridContext<R>;
   className?: string;
   style?: CSSProperties;
   userSelect?: boolean;
   color?: ThemeColor;
 };
-export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
-  column: EditableDataGridColumn<R, T>;
-};
+
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R, T> & {};
 
 export type DataGridHeaderCellProps<R> = {
   columnKey: string;

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

@@ -44,7 +44,7 @@ export const sqlTextColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => row[key] ?? '',
+      render: (value) => value ?? '',
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
@@ -64,7 +64,7 @@ export const sqlMailColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+      render: (value) => <a href={`mailto:${value}`}>{value ?? ''}</a>,
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
@@ -84,7 +84,7 @@ export const sqlPhoneColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+      render: (value) => <a href={`tel:${value}`}>{value ?? ''}</a>,
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
@@ -104,7 +104,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
       key,
       name: title,
       type: 'date',
-      render: (row) => formatDate(row[key]),
+      render: (value) => formatDate(value),
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       excelOptions: {
@@ -133,7 +133,7 @@ export const sqlDateTimeColumn = <R extends Record<string, any>>(
       key,
       name: title,
       type: 'date',
-      render: (row) => formatDateTime(row[key]),
+      render: (value) => formatDateTime(value),
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       excelOptions: {
@@ -162,7 +162,7 @@ export const sqlMonthColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+      render: (value) => (value ? `${value} mois ` : ''),
       getter: (row) => row[key] ?? '',
       sortGetter: (row) => row[key] ?? '',
       filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
@@ -183,7 +183,7 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
     type: 'number',
     decimals,
     textAlign: 'right',
-    render: (row) => formatNumber(row[key], decimals) ?? '',
+    render: (value) => formatNumber(value, decimals) ?? '',
     excelOptions: {
       formatter: () => buildExcelFormat(decimals),
       valueGetter: (value) => formatNumberInvariant(value, decimals),
@@ -232,8 +232,8 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
     textAlign: 'right',
     render:
       typeof currency === 'function'
-        ? (row) => formatMoney(row[key], decimals, currency(row)) ?? ''
-        : (row) => formatMoney(row[key], decimals, currency) ?? '',
+        ? (value, row) => formatMoney(value, decimals, currency(row)) ?? ''
+        : (value) => formatMoney(value, decimals, currency) ?? '',
     excelOptions: {
       formatter:
         typeof currency === 'function'
@@ -280,7 +280,7 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
     key,
     name: title,
     type: 'number',
-    render: (row) => formatPercentage(row[key]) ?? '',
+    render: (value) => formatPercentage(value) ?? '',
     excelOptions: {
       formatter: () => buildExcelFormat(decimals, '%'),
       valueGetter: (value) => formatNumberInvariant(value, decimals),
@@ -314,8 +314,7 @@ export const sqlCheckboxColumn = <R extends Record<string, any>>(
       key,
       name: title,
       type: 'checkbox',
-      render: (row) => {
-        const value = !!+(row[key] ?? 0);
+      render: (value) => {
         return (
           <>
             <input type="checkbox" checked={value} readOnly />
@@ -343,12 +342,10 @@ export const sqlImageColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => (
+      render: (value) => (
         <SqlImageWrapper>
           <SqlImage
-            src={
-              row[key] ? `${urlPrefix}${row[key]}` : `${urlPrefix}no-image.png`
-            }
+            src={value ? `${urlPrefix}${value}` : `${urlPrefix}no-image.png`}
             alt={title}
           />
         </SqlImageWrapper>
@@ -370,10 +367,8 @@ export const sqlColorColumn = <R extends Record<string, any>>(
       key,
       type: 'text',
       name: title,
-      render: (row) => (
-        <div
-          style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
-        >
+      render: (value) => (
+        <div style={{ position: 'absolute', inset: 0, backgroundColor: value }}>
           &nbsp;
         </div>
       ),
@@ -441,7 +436,7 @@ export const sqlForeignListColumn = <
     type: 'foreignList',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    render: (row) => (
+    render: (value, row) => (
       <ItemTemplate
         item={convertRowToItem<R, T>(row, columnMapping)}
         index={0}

package/src/components/forms/Form/Checkbox.tsx

@@ -6,7 +6,7 @@ import { StyledCheckbox } from './styles';
 export const Checkbox: FC<
   FormRowProps & InputHTMLAttributes<HTMLInputElement>
 > = ({ label, icon, ...props }) => (
-  <FormRow label={label} icon={icon}>
+  <FormRow label={label} icon={icon} readOnly={props.readOnly}>
     <StyledCheckbox {...props} />
   </FormRow>
 );

package/src/components/ui/Tab/types.ts

@@ -1,17 +1,17 @@
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
-
-import { IconFC } from '../../../Icons';
-import { ReactNode } from 'react';
-
-export type Tab = {
-  color?: ThemeColorWithIntensity | ThemeColor;
-  content: ReactNode;
-  icon?: IconFC;
-  key?: string;
-  tabName: string;
-};
-
-export type TabProps = {
-  tabs: Tab[];
-  overflow?: boolean;
-};
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+
+import { IconFC } from '../../../Icons';
+import { ReactNode } from 'react';
+
+export type Tab = {
+  color?: ThemeColorWithIntensity | ThemeColor;
+  content: ReactNode;
+  icon?: IconFC;
+  key?: string;
+  tabName: string;
+};
+
+export type TabProps = {
+  tabs: Tab[];
+  overflow?: boolean;
+};