@axinom/mosaic-ui 0.34.0-rc.3 → 0.34.0-rc.30

package/src/components/List/ListHeader/useResize.ts

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Data } from '../../../types';
+import { Column } from '../List.model';
+
+/**
+ * Handles the resizing logic of the columns
+ * @param columns The list of column definitions
+ * @param onColumnSizesChanged Callback that will be called when the column sizes change
+ * @returns an object containing the refs to the columns (add these to all column header elements)
+ *          and the mouseDown handler (add this to the element that should be used to resize the column)
+ */
+export const useResize = <T extends Data>(
+  columns: Column<T>[],
+  onColumnSizesChanged: (columnSizes: string) => void,
+): {
+  cols: {
+    ref: React.RefObject<HTMLTableCellElement>;
+    orgSize: string | undefined;
+  }[];
+  mouseDown: (index: number) => void;
+} => {
+  const minCellWidth = 50;
+
+  const cols = useMemo(
+    () =>
+      [
+        ...columns,
+        { size: 'auto' }, // Last column for action buttons and checkbox, etc
+      ].map((col) => ({
+        ref: React.createRef<HTMLTableCellElement>(),
+        orgSize: col.size,
+      })),
+    [columns],
+  );
+
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+  const resizeStart = React.useRef<
+    { mouse: number; width: number } | undefined
+  >(undefined);
+
+  const mouseMove = useCallback(
+    (e) => {
+      if (activeIndex !== undefined) {
+        const elem = cols[activeIndex].ref.current;
+        if (!elem) {
+          return;
+        }
+
+        if (!resizeStart.current) {
+          resizeStart.current = {
+            mouse: e.clientX,
+            width: elem.offsetWidth,
+          };
+        }
+
+        const start = resizeStart.current;
+        if (!start) {
+          return;
+        }
+
+        const gridColumns = cols.map((col, i) => {
+          if (!col.ref.current) {
+            return col.orgSize;
+          }
+
+          if (i === activeIndex) {
+            const width = start.width + e.clientX - start.mouse;
+            if (width >= minCellWidth) {
+              return `${width}px`;
+            }
+          }
+          return `${col.ref.current.offsetWidth}px`;
+        });
+
+        onColumnSizesChanged(gridColumns.join(' '));
+      }
+    },
+    [activeIndex, cols, onColumnSizesChanged],
+  );
+
+  const mouseDown = (index: number): void => {
+    setActiveIndex(index);
+  };
+
+  const removeListeners = useCallback(() => {
+    window.removeEventListener('mousemove', mouseMove);
+    window.removeEventListener('mouseup', removeListeners);
+  }, [mouseMove]);
+
+  const mouseUp = useCallback(() => {
+    setActiveIndex(undefined);
+    resizeStart.current = undefined;
+    removeListeners();
+  }, [setActiveIndex, removeListeners]);
+
+  useEffect(() => {
+    if (activeIndex !== undefined) {
+      window.addEventListener('mousemove', mouseMove);
+      window.addEventListener('mouseup', mouseUp);
+    }
+
+    return () => {
+      removeListeners();
+    };
+  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
+
+  return { cols, mouseDown };
+};

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

@@ -3,9 +3,6 @@
 .columnsRoot {
   padding: 1px 0px 1px 5px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-  grid-auto-rows: 50px;
-  column-gap: 5px;
   justify-items: left;
   align-items: center;
   border-bottom: var(--explorer-list-row-border, $explorer-list-row-border);
@@ -30,6 +27,13 @@
     }
   }
 
+  .cellWrapper {
+    display: grid;
+    align-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
   .cell {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -47,15 +51,7 @@
   }
 
   .link {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-    column-gap: 5px;
-
-    width: 100%;
-
-    justify-items: left;
-    align-items: center;
-
+    display: contents;
     color: inherit;
     text-decoration: none;
   }

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

@@ -51,7 +51,7 @@ describe('ListRow', () => {
         <ListRow {...mockProps} columns={expectedColumns} />,
       );
 
-      const actualColumns = wrapper.find('.cell');
+      const actualColumns = wrapper.find('.cellWrapper');
 
       // Check amount of rendered columns
       expect(actualColumns).toHaveLength(expectedColumns.length);
@@ -87,7 +87,7 @@ describe('ListRow', () => {
       />,
     );
 
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(2);
 
@@ -119,21 +119,21 @@ describe('ListRow', () => {
       // @ts-expect-error Typings to not match up
       <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
     );
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
     expect(actualColumns.at(0).text()).toBe('Changed: something');
   });
 
   it('shows empty field if a value required in a column is not present on the data object', () => {
     const expectedColumns: Column<TestExplorerData>[] = [
       // @ts-expect-error intentional bad property
-      { propertyName: 'doesnt exist', size: '1fr', label: 'desc' },
+      { propertyName: "doesn't exist", size: '1fr', label: 'desc' },
     ];
 
     const wrapper = shallow(
       <ListRow {...mockProps} columns={expectedColumns} />,
     );
 
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
 
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(1);
@@ -514,22 +514,6 @@ describe('ListRow', () => {
 
       expect(link.exists()).toBe(false);
     });
-
-    it('receives list row height', () => {
-      const height = '55px';
-      const wrapper = shallow(
-        <ListRow
-          {...mockProps}
-          onItemClicked="http://this.is.a.test.url"
-          selectionMode={ListSelectMode.None}
-          rowHeight={height}
-        />,
-      );
-
-      const link = wrapper.find(Link);
-
-      expect(link.prop('style')?.gridTemplateRows).toBe(height);
-    });
   });
 
   describe('tooltip', () => {

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
 import React, { PropsWithChildren, useCallback, useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { getTooltipText } from '../../../utils/ToolTipHelpers';
@@ -140,14 +140,13 @@ export const ListRow = <T extends Data>({
   isRowDisabled = false,
   inlineMenuActions,
 }: PropsWithChildren<ListRowProps<T>>): JSX.Element => {
-  const customStyles = {
+  const customRootStyles = {
     gridAutoRows: rowHeight,
-    gridTemplateColumns: columnSizes,
     gridColumnGap: columnGap,
     justifyItems: horizontalTextAlign,
     alignItems: verticalTextAlign,
+    gridTemplateColumns: columnSizes,
   } as React.CSSProperties;
-  const history = useHistory();
 
   // Trigger based on: https://www.youtube.com/watch?v=NZKUirTtxcg
   const onTriggeredHandler = useCallback(() => {
@@ -196,14 +195,6 @@ export const ListRow = <T extends Data>({
   const isLinkable: boolean =
     selectionMode === ListSelectMode.None &&
     typeof onItemClicked !== 'function';
-  const allColumns: string[] = columnSizes.split(' ');
-  const columnsWithoutActions: string[] = allColumns.slice(0, -1);
-  const cssStyles: React.CSSProperties = {
-    ...customStyles,
-    gridTemplateColumns: isLinkable
-      ? `1fr ${allColumns.slice(-1)}`
-      : columnSizes,
-  };
 
   const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
     const columnData: React.ReactNode = renderData<T>(
@@ -213,16 +204,17 @@ export const ListRow = <T extends Data>({
     );
 
     return (
-      <div
-        key={column.propertyName as string}
-        className={classes.cell}
-        title={
-          column.tooltip !== false ? getTooltipText(columnData) : undefined
-        }
-        data-test-id={`list-entry-property:${column.propertyName as string}`}
-        style={{ justifySelf: column.horizontalColumnAlign }}
-      >
-        {columnData}
+      <div key={column.propertyName as string} className={classes.cellWrapper}>
+        <div
+          className={classes.cell}
+          title={
+            column.tooltip !== false ? getTooltipText(columnData) : undefined
+          }
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+          style={{ justifySelf: column.horizontalColumnAlign }}
+        >
+          {columnData}
+        </div>
       </div>
     );
   });
@@ -237,7 +229,7 @@ export const ListRow = <T extends Data>({
         [classes.selected]: itemSelected && showItemCheckbox,
         [classes.disabled]: isRowDisabled,
       })}
-      style={cssStyles}
+      style={customRootStyles}
       onClick={() => {
         onItemClickedHandler(data);
       }}
@@ -246,14 +238,7 @@ export const ListRow = <T extends Data>({
     >
       {/* Items */}
       {isLinkable ? (
-        <Link
-          to={onItemClicked as string}
-          className={classes.link}
-          style={{
-            gridTemplateColumns: columnsWithoutActions.join(' '),
-            gridTemplateRows: rowHeight,
-          }}
-        >
+        <Link to={onItemClicked as string} className={classes.link}>
           {generateCells}
         </Link>
       ) : (
@@ -285,7 +270,6 @@ export const ListRow = <T extends Data>({
                   icon={IconName.ChevronRight}
                   height={actionSize}
                   width={actionSize}
-                  onButtonClicked={onItemClicked as () => void}
                   dataTestId="list-entry-action"
                 />
               ))}

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

@@ -5,9 +5,9 @@ import { Loader } from '../../Loaders/Loader/Loader';
 import classes from './ListRow.scss';
 
 export interface ListRowLoaderProps<T extends Data> {
-  /** Spacing between columns */
+  /** Spacing of columns */
   columnSizes: string;
-  /** Header row height */
+  /** Space between columns */
   columnGap: string;
   /** List row height */
   rowHeight: string;
@@ -36,13 +36,23 @@ export const ListRowLoader = <T extends Data>({
       className={classes.columnsRoot}
       style={{
         ...customRowStyles,
-        opacity: (rows - i) / rows,
+        //opacity: (rows - i) / rows,
       }}
     >
       {columns.map((column) => {
         const loaderWidth = getSize(column.size);
         return (
-          <div key={column.propertyName as string} className={classes.cell}>
+          <div
+            key={column.propertyName as string}
+            className={classes.cell}
+            style={{
+              opacity:
+                (rows -
+                  i -
+                  0.5) /* - 0.5 to make the loaders slightly more faint */ /
+                rows,
+            }}
+          >
             <Loader
               showLoader={true}
               height={textLoaderHeight}

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

@@ -1,15 +1,17 @@
 @import '../../../../../styles/common.scss';
 
-.green {
-  background-color: var(--boolean-dot-true-color, $boolean-dot-true-color);
+.circle {
   height: var(--boolean-dot-size, $boolean-dot-size);
   width: var(--boolean-dot-size, $boolean-dot-size);
+  min-width: var(--boolean-dot-size, $boolean-dot-size);
+  min-height: var(--boolean-dot-size, $boolean-dot-size);
   border-radius: 100%;
-}
 
-.red {
-  background-color: var(--boolean-dot-false-color, $boolean-dot-false-color);
-  height: var(--boolean-dot-size, $boolean-dot-size);
-  width: var(--boolean-dot-size, $boolean-dot-size);
-  border-radius: 100%;
+  &.green {
+    background-color: var(--boolean-dot-true-color, $boolean-dot-true-color);
+  }
+
+  &.red {
+    background-color: var(--boolean-dot-false-color, $boolean-dot-false-color);
+  }
 }

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

@@ -16,5 +16,7 @@ import classes from './BooleanDotRenderer.scss';
  *
  */
 export const BooleanDotRenderer = (val: unknown): JSX.Element => (
-  <div className={clsx(val ? [classes.green] : [classes.red])}></div>
+  <div
+    className={clsx(classes.circle, val ? [classes.green] : [classes.red])}
+  ></div>
 );

package/src/components/List/useColumnsSize.ts

@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { Data } from '../../types';
+import { Column, ListSelectMode } from './List.model';
+
+/**
+ * Generates a combined string of all columns.columnSize values, to be used as CSS value
+ * @param columns The list of columns that should be used
+ * @returns a string of all column sizes of the array, combined
+ */
+const getColumnsSizeDefinition = function <T extends Data>(
+  columns: Column<T>[],
+  showActionButton: boolean,
+  selectMode: ListSelectMode,
+  showInlineMenu: boolean,
+): string {
+  const columnSizeDefinition = columns.map((column) => column.size ?? '1fr');
+
+  const hasActionsColumn = hasActionColumn(
+    selectMode,
+    showActionButton,
+    showInlineMenu,
+  );
+
+  if (hasActionsColumn) {
+    columnSizeDefinition.push(
+      getActionsColumnSizePx(showInlineMenu, showActionButton),
+    );
+  }
+
+  return columnSizeDefinition.join(' ');
+};
+
+const getActionsColumnSizePx = (...enableActions: boolean[]): string => {
+  const enabledActionsCount = enableActions.filter(
+    (actionEnabled) => actionEnabled,
+  ).length;
+
+  const defaultActionSizePx = 50;
+  const defaultActionsRawGapPx = 8;
+  const calculateMultiActionsColumnSizePx = (actionsCount: number): number => {
+    return (
+      defaultActionSizePx * actionsCount +
+      defaultActionsRawGapPx * (actionsCount - 1)
+    );
+  };
+
+  const sizePx =
+    enabledActionsCount > 1
+      ? calculateMultiActionsColumnSizePx(enabledActionsCount)
+      : defaultActionSizePx;
+
+  return `${sizePx}px`;
+};
+
+/**
+ * Covers the concern of managing the column sizes for the list component
+ * @param columns input definition of columns
+ * @param showActionButton whether the action button is shown
+ * @param selectMode current select mode
+ * @param showInlineMenu whether the inline menu is shown
+ * @returns an object containing the columnSizes (CSS grid-template-columns),
+ *          a reset function (to reset to the initial column sizes)
+ *          and a setter function (to update the column sizes)
+ */
+export const useColumnsSize = <T extends Data>(
+  columns: Column<T>[],
+  showActionButton: boolean,
+  selectMode: ListSelectMode,
+  showInlineMenu: boolean,
+): {
+  columnSizes: string;
+  resetColumnSizes: () => void;
+  setColumnSizes: React.Dispatch<React.SetStateAction<string>>;
+  hasActionColumn: boolean;
+} => {
+  const [orgColumnSizes, setOrgColumnSizes] = useState<string>(
+    getColumnsSizeDefinition(
+      columns,
+      showActionButton,
+      selectMode,
+      showInlineMenu,
+    ),
+  );
+  const [columnSizes, setColumnSizes] = useState<string>(orgColumnSizes);
+
+  useEffect(() => {
+    setOrgColumnSizes(
+      getColumnsSizeDefinition(
+        columns,
+        showActionButton,
+        selectMode,
+        showInlineMenu,
+      ),
+    );
+  }, [columns, selectMode, showActionButton, showInlineMenu]);
+
+  const resetColumnSizes = (): void => {
+    setColumnSizes(orgColumnSizes);
+  };
+
+  return {
+    columnSizes,
+    resetColumnSizes,
+    setColumnSizes,
+    hasActionColumn: hasActionColumn(
+      selectMode,
+      showActionButton,
+      showInlineMenu,
+    ),
+  };
+};
+function hasActionColumn(
+  selectMode: ListSelectMode,
+  showActionButton: boolean,
+  showInlineMenu: boolean,
+): boolean {
+  return (
+    selectMode !== ListSelectMode.None || showActionButton || showInlineMenu
+  );
+}

package/src/initialize.ts

@@ -5,7 +5,7 @@ import {
   ShowNotification,
 } from './types/ui-config';
 
-export enum IndicatorType {
+export enum SaveIndicatorType {
   Saving = 'saving',
   Inactive = 'inactive',
   Dirty = 'dirty',
@@ -21,8 +21,8 @@ export let removeIndicator: RemoveIndicator | (() => void) =
 
 export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 
-export let setSaveIndicator: (type: IndicatorType) => void =
-  polyfill('showSaveIndicator');
+export let setSaveIndicator: (type: SaveIndicatorType) => void =
+  polyfill('setSaveIndicator');
 
 /**
  * Passes the PiralApi methods to the UI library.
@@ -43,7 +43,7 @@ export interface UiConfig {
   addIndicator: AddIndicator;
   removeIndicator: RemoveIndicator;
   on: CustomEventEmitter['on'];
-  setSaveIndicator: (type: IndicatorType) => void;
+  setSaveIndicator: (type: SaveIndicatorType) => void;
 }
 
 function polyfill(methodName: string): () => void {

package/src/styles/variables.scss

@@ -183,6 +183,9 @@ $tag-border-color-2: $blue;
 $tag-icon-color: $blue;
 $tag-font-color: $dark-gray;
 $tag-background-color: $light-gray-2;
+$tag-enter-color: rgba($blue, 0.25);
+$tag-plus-button-bg-color: $blue;
+$tag-plus-button-hover-stroke-color: $blue;
 $form-error-color: $red;
 $select-arrow-color: $blue;
 $select-disabled-arrow-color: $gray;
@@ -201,6 +204,14 @@ $select-background-color: white;
 $form-indicator-color: $green;
 $radio-hover-stroke-color: $blue;
 $radio-checked-fill-color: $blue;
+$toggle-button-stroke-color: $blue;
+$toggle-button-off-text-color: $blue;
+$toggle-button-on-bg-color: $blue;
+
+/* Inline Menu */
+$inline-menu-button-stroke-color: $blue;
+$inline-menu-button-hover-bg-color: $blue;
+$inline-menu-button-selected-bg-color: $blue;
 
 /* Date Time Picker*/
 $calendar-tile-active: $blue;