@axinom/mosaic-ui 0.64.0-rc.6 → 0.64.0

package/src/components/List/List.tsx

@@ -24,8 +24,9 @@ import {
 } from './List.model';
 import classes from './List.scss';
 import { ListHeader } from './ListHeader/ListHeader';
-import { ListRow } from './ListRow/ListRow';
+import { ListRowProps } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
+import { ListRowRenderer } from './ListRowRenderer/ListRowRenderer';
 import { getActionButtonVisibility, isTrigger, useSort } from './helpers';
 import { useColumnsSize } from './useColumnsSize';
 
@@ -110,6 +111,10 @@ export interface ListProps<T extends Data> {
   className?: string;
   /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
+  /** Function to determine if a specific row should be disabled */
+  isRowDisabled?: (data: T, index: number) => boolean;
+  /** Custom row renderer - if it returns null, the default ListRow will be used */
+  customRowRenderer?: (props: ListRowProps<T>) => ReactElement | null;
 }
 
 const ListRenderer = <T extends Data>(
@@ -145,6 +150,8 @@ const ListRenderer = <T extends Data>(
     generateItemLink,
     className = '',
     inlineMenuActions,
+    isRowDisabled,
+    customRowRenderer,
   }: PropsWithChildren<ListProps<T>>,
   ref?: React.ForwardedRef<ListElement>,
 ): JSX.Element => {
@@ -290,6 +297,21 @@ const ListRenderer = <T extends Data>(
     }
   }, [selectionMode]);
 
+  const getRowDisabledState = useCallback(
+    (item: ListItem<T>, index: number): boolean => {
+      const isDisabledDueToSelectAll =
+        isAllItemsChecked.current &&
+        !enableSelectAllDeselect &&
+        selectionMode === ListSelectMode.Multi;
+
+      const isDisabledByCustomLogic =
+        isRowDisabled?.(item.data, index) ?? false;
+
+      return isDisabledDueToSelectAll || isDisabledByCustomLogic;
+    },
+    [enableSelectAllDeselect, selectionMode, isRowDisabled],
+  );
+
   return (
     <div
       className={clsx(classes.wrapper, 'list-wrapper', className)}
@@ -319,43 +341,42 @@ const ListRenderer = <T extends Data>(
         onColumnSizesChanged={setColumnSizes}
         hasActionColumn={hasActionColumn}
       />
+
       {/* Rows */}
       {listItems.map((item: ListItem<T>, index) => (
-        <ListRow<T>
+        <ListRowRenderer<T>
           key={String(item.data[keyProperty] || index)}
-          columns={columns}
-          data={item.data}
-          itemSelected={item.selected}
+          customRowRenderer={customRowRenderer}
           isTrigger={isTrigger<T>(index, listItems, loadingTriggerOffset)}
-          isRowDisabled={
-            isAllItemsChecked.current &&
-            !enableSelectAllDeselect &&
-            selectionMode === ListSelectMode.Multi
-          }
-          columnSizes={columnSizes}
-          columnGap={columnGap}
-          rowHeight={listRowHeight}
-          actionSize={listRowActionSize}
-          horizontalTextAlign={horizontalTextAlign}
-          verticalTextAlign={verticalTextAlign}
-          textWrap={textWrap}
-          selectionMode={selectionMode}
-          showActionButton={
-            selectionMode === ListSelectMode.None &&
-            getActionButtonVisibility(item.data, showActionButton)
-          }
-          showCheckMark={selectionMode === ListSelectMode.Single}
-          showItemCheckbox={selectionMode === ListSelectMode.Multi}
-          onItemClicked={
-            generateItemLink
-              ? generateItemLink(item.data)
-              : (data) => itemClickedHandler(data, index)
-          }
           onTriggered={onTriggeredHandler}
-          onItemSelected={(checked) => itemSelectedHandler(checked, index)}
-          inlineMenuActions={inlineMenuActions}
+          listRowProps={{
+            columns,
+            data: item.data,
+            itemSelected: item.selected,
+            isRowDisabled: getRowDisabledState(item, index),
+            columnSizes,
+            columnGap,
+            rowHeight: listRowHeight,
+            actionSize: listRowActionSize,
+            horizontalTextAlign,
+            verticalTextAlign,
+            textWrap,
+            selectionMode,
+            showActionButton:
+              selectionMode === ListSelectMode.None &&
+              getActionButtonVisibility(item.data, showActionButton),
+            showCheckMark: selectionMode === ListSelectMode.Single,
+            showItemCheckbox: selectionMode === ListSelectMode.Multi,
+            onItemClicked: generateItemLink
+              ? generateItemLink(item.data)
+              : (data: T) => itemClickedHandler(data, index),
+            onItemSelected: (checked: boolean) =>
+              itemSelectedHandler(checked, index),
+            inlineMenuActions,
+          }}
         />
       ))}
+
       {isLoading && (
         <ListRowLoader
           columnSizes={columnSizes}

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

@@ -27,6 +27,11 @@
     }
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--disabled-text-color, $gray);
+  }
+
   .cellWrapper {
     display: grid;
     width: 100%;

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

@@ -275,194 +275,136 @@ describe('ListRow', () => {
     expect(spy).toHaveBeenCalledWith(true);
   });
 
-  describe('Data Loading Trigger', () => {
-    const windowIntersectionObserver = window.IntersectionObserver;
-    const observe = jest.fn();
-    beforeEach(() => {
-      window.IntersectionObserver = jest.fn().mockImplementation(() => ({
-        observe,
-      }));
-    });
-
-    afterEach(() => {
-      window.IntersectionObserver = windowIntersectionObserver;
-    });
-
-    it('creates the IntersectionObserver when row has isTrigger===true', () => {
-      const spy = jest.fn();
-      const wrapper = mount(
-        <ListRow {...mockProps} isTrigger={true} onTriggered={spy} />,
-      );
-
-      expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
-      expect(observe).toHaveBeenCalledWith(wrapper.getDOMNode());
-      expect(spy).not.toHaveBeenCalled();
-    });
-
-    it('creates no IntersectionObserver when row has isTrigger===false', () => {
-      const spy = jest.fn();
-
-      mount(<ListRow {...mockProps} isTrigger={false} onTriggered={spy} />);
-
-      expect(window.IntersectionObserver).not.toHaveBeenCalled();
-      expect(spy).not.toHaveBeenCalled();
-    });
+  it(`does not have the 'selected' class by default`, () => {
+    const wrapper = mount(<ListRow {...mockProps} />);
 
-    it('triggers onTriggered when IntersectionObserver observes entry', () => {
-      let intersectionFn: IntersectionObserverCallback = () => null;
-      const spy = jest.fn();
-
-      (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
-        // Remember the callback function
-        intersectionFn = fn;
-        // Return the mocked object
-        return { observe };
-      });
-
-      mount(<ListRow {...mockProps} isTrigger={true} onTriggered={spy} />);
-
-      // Manually trigger the intersection callback
-      intersectionFn(
-        [{ isIntersecting: true } as IntersectionObserverEntry],
-        {} as IntersectionObserver,
-      );
-
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it(`does not have the 'selected' class by default`, () => {
-      const wrapper = mount(<ListRow {...mockProps} />);
-
-      const row = wrapper.find('.columnsRoot');
-
-      expect(row.hasClass('selected')).toBe(false);
-    });
+    const row = wrapper.find('.columnsRoot');
 
-    it(`only has the 'selected' class if both itemSelect and showItemCheckbox props are true`, () => {
-      const wrapper = mount(
-        <ListRow {...mockProps} itemSelected={true} showItemCheckbox={true} />,
-      );
+    expect(row.hasClass('selected')).toBe(false);
+  });
 
-      const row = wrapper.find('.columnsRoot');
+  it(`only has the 'selected' class if both itemSelect and showItemCheckbox props are true`, () => {
+    const wrapper = mount(
+      <ListRow {...mockProps} itemSelected={true} showItemCheckbox={true} />,
+    );
 
-      expect(row.hasClass('selected')).toBe(true);
-    });
+    const row = wrapper.find('.columnsRoot');
 
-    it(`raises onItemClicked if list selectionMode is set to None(the default mode)`, () => {
-      const onItemClickedSpy = jest.fn();
-      const onItemSelectedSpy = jest.fn();
+    expect(row.hasClass('selected')).toBe(true);
+  });
 
-      const wrapper = mount(
-        <ListRow
-          {...mockProps}
-          showItemCheckbox={true}
-          onItemClicked={onItemClickedSpy}
-          onItemSelected={onItemSelectedSpy}
-        />,
-      );
+  it(`raises onItemClicked if list selectionMode is set to None(the default mode)`, () => {
+    const onItemClickedSpy = jest.fn();
+    const onItemSelectedSpy = jest.fn();
 
-      const row = wrapper.find('.content');
+    const wrapper = mount(
+      <ListRow
+        {...mockProps}
+        showItemCheckbox={true}
+        onItemClicked={onItemClickedSpy}
+        onItemSelected={onItemSelectedSpy}
+      />,
+    );
 
-      row.simulate('click');
+    const row = wrapper.find('.content');
 
-      expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
-      expect(onItemSelectedSpy).not.toHaveBeenCalled();
-    });
+    row.simulate('click');
 
-    it(`raises onItemClicked if list selectionMode is set to Single`, () => {
-      const onItemClickedSpy = jest.fn();
-      const onItemSelectedSpy = jest.fn();
+    expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
+    expect(onItemSelectedSpy).not.toHaveBeenCalled();
+  });
 
-      const wrapper = mount(
-        <ListRow
-          {...mockProps}
-          showItemCheckbox={true}
-          selectionMode={ListSelectMode.Single}
-          onItemClicked={onItemClickedSpy}
-          onItemSelected={onItemSelectedSpy}
-        />,
-      );
+  it(`raises onItemClicked if list selectionMode is set to Single`, () => {
+    const onItemClickedSpy = jest.fn();
+    const onItemSelectedSpy = jest.fn();
 
-      const row = wrapper.find('.content');
+    const wrapper = mount(
+      <ListRow
+        {...mockProps}
+        showItemCheckbox={true}
+        selectionMode={ListSelectMode.Single}
+        onItemClicked={onItemClickedSpy}
+        onItemSelected={onItemSelectedSpy}
+      />,
+    );
 
-      row.simulate('click');
+    const row = wrapper.find('.content');
 
-      expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
-      expect(onItemSelectedSpy).not.toHaveBeenCalled();
-    });
+    row.simulate('click');
 
-    it(`raises onItemSelected and toggles item selection if list selectionMode is set to Multi and checkbox is not disabled`, async () => {
-      const onItemClickedSpy = jest.fn();
-      const onItemSelectedSpy = jest.fn();
-      const mockChecked = false;
+    expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
+    expect(onItemSelectedSpy).not.toHaveBeenCalled();
+  });
 
-      const wrapper = mount(
-        <ListRow
-          {...mockProps}
-          showItemCheckbox={true}
-          selectionMode={ListSelectMode.Multi}
-          onItemClicked={onItemClickedSpy}
-          onItemSelected={onItemSelectedSpy}
-        />,
-      );
+  it(`raises onItemSelected and toggles item selection if list selectionMode is set to Multi and checkbox is not disabled`, async () => {
+    const onItemClickedSpy = jest.fn();
+    const onItemSelectedSpy = jest.fn();
+    const mockChecked = false;
 
-      const row = wrapper.find('.content');
+    const wrapper = mount(
+      <ListRow
+        {...mockProps}
+        showItemCheckbox={true}
+        selectionMode={ListSelectMode.Multi}
+        onItemClicked={onItemClickedSpy}
+        onItemSelected={onItemSelectedSpy}
+      />,
+    );
 
-      row.simulate('click');
+    const row = wrapper.find('.content');
 
-      wrapper.update();
+    row.simulate('click');
 
-      expect(onItemSelectedSpy).toHaveBeenCalledTimes(1);
-      expect(onItemSelectedSpy).toHaveBeenCalledWith(!mockChecked);
-      expect(onItemClickedSpy).not.toHaveBeenCalled();
-    });
+    wrapper.update();
 
-    it(`does not raise onItemSelected if the row is disabled`, async () => {
-      const onItemSelectedSpy = jest.fn();
+    expect(onItemSelectedSpy).toHaveBeenCalledTimes(1);
+    expect(onItemSelectedSpy).toHaveBeenCalledWith(!mockChecked);
+    expect(onItemClickedSpy).not.toHaveBeenCalled();
+  });
 
-      const wrapper = mount(
-        <ListRow
-          {...mockProps}
-          showItemCheckbox={true}
-          selectionMode={ListSelectMode.Multi}
-          onItemSelected={onItemSelectedSpy}
-          isRowDisabled={true}
-        />,
-      );
+  it(`does not raise onItemSelected if the row is disabled`, async () => {
+    const onItemSelectedSpy = jest.fn();
 
-      const row = wrapper.find('.columnsRoot');
+    const wrapper = mount(
+      <ListRow
+        {...mockProps}
+        showItemCheckbox={true}
+        selectionMode={ListSelectMode.Multi}
+        onItemSelected={onItemSelectedSpy}
+        isRowDisabled={true}
+      />,
+    );
 
-      row.simulate('click');
+    const row = wrapper.find('.columnsRoot');
 
-      wrapper.update();
+    row.simulate('click');
 
-      expect(onItemSelectedSpy).not.toHaveBeenCalled();
-      expect(row.hasClass('disabled')).toBe(true);
-    });
+    wrapper.update();
 
-    it(`does not onItemClicked if the row is disabled`, async () => {
-      const onItemClickedSpy = jest.fn();
+    expect(onItemSelectedSpy).not.toHaveBeenCalled();
+    expect(row.hasClass('disabled')).toBe(true);
+  });
 
-      const wrapper = mount(
-        <ListRow
-          {...mockProps}
-          showItemCheckbox={true}
-          onItemClicked={onItemClickedSpy}
-          isRowDisabled={true}
-        />,
-      );
+  it(`does not onItemClicked if the row is disabled`, async () => {
+    const onItemClickedSpy = jest.fn();
 
-      const row = wrapper.find('.columnsRoot');
+    const wrapper = mount(
+      <ListRow
+        {...mockProps}
+        showItemCheckbox={true}
+        onItemClicked={onItemClickedSpy}
+        isRowDisabled={true}
+      />,
+    );
 
-      row.simulate('click');
+    const row = wrapper.find('.columnsRoot');
 
-      wrapper.update();
+    row.simulate('click');
 
-      expect(onItemClickedSpy).not.toHaveBeenCalled();
-      expect(row.hasClass('disabled')).toBe(true);
-    });
+    wrapper.update();
 
-    it.todo('sets ref if row is trigger'); // https://github.com/airbnb/enzyme/issues/2215
+    expect(onItemClickedSpy).not.toHaveBeenCalled();
+    expect(row.hasClass('disabled')).toBe(true);
   });
 
   describe('linking', () => {

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { PropsWithChildren, useCallback, useRef } from 'react';
+import React, { PropsWithChildren, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
@@ -34,8 +34,6 @@ export interface ListRowProps<T extends Data> {
   columns: Column<T>[];
   /** Whether or not the item is selected (default: false) */
   itemSelected?: boolean;
-  /** Whether or not the item is a trigger for pagination (default: false) */
-  isTrigger?: boolean;
   /** Determines which selection mode the list is in. (default: ListSelectMode.None) */
   selectionMode?: ListSelectMode;
   /** Defines whether an action button will be rendered (default: true) */
@@ -46,7 +44,6 @@ export interface ListRowProps<T extends Data> {
   showItemCheckbox?: boolean;
   /** Defines whether a row is disabled (default: false) */
   isRowDisabled?: boolean;
-
   /** Used for when a row is clicked. This can be either a callback function that will be executed
    * or a URL where the user should be navigated to.
    * When the list should navigate the user to e.g. a details page of a entry it is recommended to
@@ -56,10 +53,6 @@ export interface ListRowProps<T extends Data> {
    * A function that is getting called, when the selection state of the row changes.
    */
   onItemSelected?: (checked: boolean) => void;
-  /**
-   * A function that is getting called, when the element acts as a trigger (`isTrigger = true`) and gets into view.
-   */
-  onTriggered?: () => void;
   /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
 }
@@ -214,28 +207,29 @@ const renderData = <T extends Data>(
  *  verticalTextAlign={'center'}
  * />
  */
-export const ListRow = <T extends Data>({
-  columnSizes,
-  columnGap,
-  actionSize,
-  horizontalTextAlign = 'left',
-  verticalTextAlign = 'center',
-  textWrap = false,
-  rowHeight = textWrap ? 'auto' : '50px',
-  data,
-  itemSelected = false,
-  isTrigger = false,
-  columns,
-  selectionMode = ListSelectMode.None,
-  showActionButton = true,
-  showCheckMark = false,
-  showItemCheckbox = false,
-  onItemClicked = noop,
-  onItemSelected = noop,
-  onTriggered = noop,
-  isRowDisabled = false,
-  inlineMenuActions,
-}: PropsWithChildren<ListRowProps<T>>): JSX.Element => {
+const ListRowComponent = <T extends Data>(
+  {
+    columnSizes,
+    columnGap,
+    actionSize,
+    horizontalTextAlign = 'left',
+    verticalTextAlign = 'center',
+    textWrap = false,
+    rowHeight = textWrap ? 'auto' : '50px',
+    data,
+    itemSelected = false,
+    columns,
+    selectionMode = ListSelectMode.None,
+    showActionButton = true,
+    showCheckMark = false,
+    showItemCheckbox = false,
+    onItemClicked = noop,
+    onItemSelected = noop,
+    isRowDisabled = false,
+    inlineMenuActions,
+  }: PropsWithChildren<ListRowProps<T>>,
+  ref: React.Ref<HTMLDivElement>,
+): JSX.Element => {
   const customRootStyles = {
     gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridColumnGap: columnGap,
@@ -244,32 +238,6 @@ export const ListRow = <T extends Data>({
     gridTemplateColumns: columnSizes,
   } as React.CSSProperties;
 
-  // Trigger based on: https://www.youtube.com/watch?v=NZKUirTtxcg
-  const onTriggeredHandler = useCallback(() => {
-    onTriggered && onTriggered();
-  }, [onTriggered]);
-  const observer = useRef<IntersectionObserver>();
-  const elementRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (isTrigger === false) {
-        return;
-      }
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-      observer.current = new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting) {
-          onTriggeredHandler();
-        }
-      });
-
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [isTrigger, onTriggeredHandler],
-  );
-
   const onItemClickedHandler = useCallback(
     (data: T) => {
       // Do nothing if row is disabled
@@ -334,7 +302,7 @@ export const ListRow = <T extends Data>({
         [classes.disabled]: isRowDisabled,
       })}
       style={customRootStyles}
-      ref={isTrigger ? elementRef : null}
+      ref={ref}
       data-test-id="list-entry"
     >
       {/* Items */}
@@ -416,3 +384,9 @@ export const ListRow = <T extends Data>({
 
   return Row;
 };
+
+export const ListRow = React.forwardRef(ListRowComponent) as <T extends Data>(
+  props: PropsWithChildren<ListRowProps<T>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  },
+) => JSX.Element;