@axinom/mosaic-ui 0.66.0-rc.13 → 0.66.0-rc.15

package/src/components/List/ListRow/ListRow.tsx

@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { PropsWithChildren, useCallback } from 'react';
+import React, { PropsWithChildren, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
-import { getTooltipText } from '../../../utils/ToolTipHelpers';
 import { ActionData } from '../../Actions/Actions.models';
 import { Button } from '../../Buttons';
 import { IconName } from '../../Icons';
@@ -12,6 +11,7 @@ import { InlineMenu } from '../../InlineMenu/InlineMenu';
 import { Column, ListSelectMode } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import classes from './ListRow.scss';
+import { ListRowCell } from './ListRowCell/ListRowCell';
 
 export interface ListRowProps<T extends Data> {
   /** Spacing between columns */
@@ -76,124 +76,6 @@ export const setLocale = (locale: string): void => {
 
 setLocale(navigator.language);
 
-const renderData = <T extends Data>(
-  column: Column<T>,
-  rowData: T,
-): {
-  columnData: React.ReactNode;
-  tooltip: string | undefined;
-  isDataTestIdSet: boolean;
-} => {
-  const getTooltip = (value: unknown): string | undefined =>
-    column.tooltip !== false ? getTooltipText(value) : undefined;
-
-  if (!column.propertyName) {
-    const columnData = column.render?.(undefined, rowData);
-
-    if (typeof columnData === 'string') {
-      return {
-        columnData: (
-          <span
-            data-test-id={`list-entry-property:${
-              column.propertyName as string
-            }`}
-          >
-            {columnData}
-          </span>
-        ),
-        isDataTestIdSet: true,
-        tooltip: getTooltip(columnData),
-      };
-    }
-
-    return {
-      columnData,
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: false,
-    };
-  }
-  const value: unknown = rowData[column.propertyName];
-  if (column.render) {
-    const columnData = column.render(value, rowData);
-
-    if (typeof columnData === 'string') {
-      return {
-        columnData: (
-          <span
-            data-test-id={`list-entry-property:${
-              column.propertyName as string
-            }`}
-          >
-            {columnData}
-          </span>
-        ),
-        isDataTestIdSet: true,
-        tooltip: getTooltip(columnData),
-      };
-    }
-
-    return {
-      columnData,
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: false,
-    };
-  }
-
-  if (value === null || value === undefined) {
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        />
-      ),
-      tooltip: undefined,
-      isDataTestIdSet: true,
-    };
-  }
-
-  if (typeof value === 'number') {
-    const columnData = numberFormatter.format(value);
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        >
-          {columnData}
-        </span>
-      ),
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: true,
-    };
-  }
-
-  if (value instanceof Date) {
-    const columnData = dateFormatter.format(value);
-    return {
-      columnData: (
-        <span
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
-        >
-          {columnData}
-        </span>
-      ),
-      tooltip: getTooltip(columnData),
-      isDataTestIdSet: true,
-    };
-  }
-
-  return {
-    columnData: (
-      <span
-        data-test-id={`list-entry-property:${column.propertyName as string}`}
-      >
-        {String(value)}
-      </span>
-    ),
-    tooltip: getTooltip(String(value)),
-    isDataTestIdSet: true,
-  };
-};
-
 /**
  * Renders the rows for the list component
  * @example
@@ -260,42 +142,28 @@ const ListRowComponent = <T extends Data>(
     selectionMode === ListSelectMode.None &&
     typeof onItemClicked !== 'function';
 
-  const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
-    const { columnData, tooltip, isDataTestIdSet } = renderData<T>(
-      column,
-      data,
-    );
-
-    return (
-      <div
-        key={column.key ?? (column.propertyName as string)}
-        className={classes.cellWrapper}
-      >
-        <div
-          className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
-          title={tooltip}
-          style={{
-            justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
-            alignSelf: verticalTextAlign, // Vertical alignment based on props
-            textAlign: horizontalTextAlign, // Additional text alignment inside the cell
-          }}
-          data-test-id={
-            isDataTestIdSet
-              ? null
-              : `list-entry-property:${column.propertyName as string}`
-          }
-        >
-          {columnData}
-        </div>
-      </div>
-    );
-  });
+  const generateCells = useMemo(() => {
+    return columns.map((column: Column<T>) => {
+      return (
+        <ListRowCell<T>
+          key={column.key ?? (column.propertyName as string)}
+          column={column}
+          data={data}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          textWrap={textWrap}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />
+      );
+    });
+  }, [columns, data, horizontalTextAlign, textWrap, verticalTextAlign]);
 
   const inlineActionMenuData = inlineMenuActions
     ? inlineMenuActions(data)
     : undefined;
 
-  const Row = (
+  return (
     <div
       className={clsx(classes.columnsRoot, {
         [classes.selected]: itemSelected,
@@ -382,7 +250,7 @@ const ListRowComponent = <T extends Data>(
     </div>
   );
 
-  return Row;
+  // return Row;
 };
 
 export const ListRow = React.forwardRef(ListRowComponent) as <T extends Data>(

package/src/components/List/ListRow/ListRowCell/ListRowCell.scss

@@ -0,0 +1,26 @@
+.cellWrapper {
+  display: grid;
+  width: 100%;
+  height: 100%;
+}
+
+.cell {
+  max-width: 100%;
+  max-height: 100%;
+
+  span {
+    padding: 5px 0;
+    display: block;
+    width: 100%;
+  }
+
+  &.nowrap {
+    overflow: hidden;
+
+    span {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}