@axinom/mosaic-ui 0.35.0-rc.1 → 0.35.0-rc.10

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { DraggableProvided } from 'react-beautiful-dnd';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { getTooltipText } from '../../../utils/ToolTipHelpers';
@@ -7,10 +8,7 @@ import { ActionData } from '../../Actions';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName, Icons } from '../../Icons';
 import { InlineMenu } from '../../InlineMenu';
-import {
-  DynamicListColumn,
-  DynamicListElevationOptions,
-} from '../DynamicDataList.model';
+import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListRow.scss';
 
 // TODO: Add sizing for DragIcon and Input container. Similar to ActionButton sizing
@@ -34,8 +32,6 @@ export interface DynamicListRowProps<T extends Data> {
   verticalTextAlign?: 'start' | 'center' | 'end';
   /** If set to true, the remove action button will be rendered (default: undefined) */
   allowRemove?: boolean;
-  /** If set to true, rows can be repositioned using the input field (default: undefined) */
-  allowReordering?: boolean;
   /** Property name that is used to determine data position (default: undefined) */
   positionKey?: keyof T;
   /** If set to true, this component can be dragged (default: undefined) */
@@ -44,16 +40,10 @@ export interface DynamicListRowProps<T extends Data> {
   dragging?: boolean;
   /** Whether or not the DDL is disabled (default: false) */
   disabled?: boolean;
-  /** Emits when row dragging event starts. Event and current position are supplied as parameters */
-  onDragStart?: (e: React.DragEvent<HTMLDivElement>, position: number) => void;
-  /** Emits when the row has dropped. Event and new position target are supplied as parameters */
-  onDrop?: (
-    e: React.DragEvent<HTMLDivElement>,
-    newPosition: number,
-    elevation: DynamicListElevationOptions,
-  ) => void;
-  /** Emits when row dragging event ends. Event and data as supplied as parameters */
-  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
+  /** If set to true, the position column will be shown (default: false) */
+  showPositionColumn?: boolean;
+  /** If set to true, the action column will be shown (default: false) */
+  showActionColumn?: boolean;
   /** Emits when the position input has changed. Row data and the new position is supplied */
   onPositionInputChanged?: (
     currenPosition: number,
@@ -65,7 +55,9 @@ export interface DynamicListRowProps<T extends Data> {
   className?: string;
   /** CSS Class name provider for each row. Allows row style to be determined by data */
   rowClassNameProvider?: (data: T) => string;
+  /** Provide inline actions which are available through '...' context menu */
   inlineMenuActions?: (data: T) => ActionData[];
+  provided?: DraggableProvided;
 }
 
 export const DynamicListRow = <T extends Data>({
@@ -78,26 +70,26 @@ export const DynamicListRow = <T extends Data>({
   horizontalTextAlign,
   verticalTextAlign,
   allowRemove,
-  allowReordering,
   positionKey,
   allowDragging,
-  dragging,
   disabled,
-  onDragStart = noop,
-  onDrop = noop,
-  onDragEnd = noop,
+  provided,
   onPositionInputChanged = noop,
   onActionClicked = noop,
   className = '',
   rowClassNameProvider,
   inlineMenuActions,
+  dragging = false,
+  showPositionColumn = false,
+  showActionColumn = false,
 }: PropsWithChildren<DynamicListRowProps<T>>): JSX.Element => {
   const customStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridTemplateColumns: columnSizes,
     gridColumnGap: columnGap,
     justifyItems: horizontalTextAlign,
     alignItems: verticalTextAlign,
+    ...provided?.draggableProps.style,
   } as React.CSSProperties;
 
   const inlineMenuData = inlineMenuActions?.(data);
@@ -110,14 +102,6 @@ export const DynamicListRow = <T extends Data>({
     setPosition(positionKey ? Number(data[positionKey]) : undefined);
   }, [data, positionKey]);
 
-  /* Resources used
-    https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
-    https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
-    https://www.youtube.com/watch?v=jfYWwQrtzzY
-    https://www.youtube.com/watch?v=-MfTv5VRM0A
-   */
-  const [draggedOver, setDraggedOver] = useState<DynamicListElevationOptions>();
-
   /** Emits current position and new position when user changes position via input */
   const onPositionInputChangedHandler = (value: number): void => {
     if (positionKey !== undefined && typeof value === 'number') {
@@ -133,120 +117,49 @@ export const DynamicListRow = <T extends Data>({
     }
   };
 
-  // Dragging has started(only emits if this is the element being dragged)
-  const onDragStartHandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.stopPropagation();
-    e.dataTransfer.effectAllowed = 'move'; // enable moving effects(for visual feedback)
-    onDragStart(e, Number(position));
-  };
-
-  // An element that is being dragged has entered the drop zone
-  const onDragEnterHandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  // Dragged element is currently over the drop zone
-  const onDragOverHandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = 'move'; // change cursor
-
-    const elevation = getElevation(
-      e.clientY,
-      e.currentTarget.getBoundingClientRect(),
-    );
-
-    setDraggedOver(elevation);
-  };
-
-  // Element has dropped(only emits if this was the element being dragged)
-  const onDropHandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const elevation = getElevation(
-      e.clientY,
-      e.currentTarget.getBoundingClientRect(),
-    );
-
-    onDrop(e, Number(position), elevation);
-
-    setDraggedOver(undefined); // remove dragged over styling
-  };
-
-  // An element that is being dragged has left the drop zone
-  const onDragLeaveHandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDraggedOver(undefined); // remove dragged over styling
-  };
-
-  // Dragging has ended(only emits if this was the element being dragged)
-  const onDragEndhandler = (e: React.DragEvent<HTMLDivElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    onDragEnd(e);
-  };
-
   return (
     <div
       className={clsx(
         classes.container,
-        {
-          [classes.draggedAbove]: draggedOver === 'above',
-          [classes.draggedBelow]: draggedOver === 'below',
-          [classes.dragging]: dragging,
-          [classes.disabled]: disabled,
-        },
+        { [classes.dragging]: dragging },
         'dynamic-list-row-container',
         className,
         rowClassNameProvider ? rowClassNameProvider(data) : '',
       )}
-      style={customStyles}
-      draggable={Boolean(!disabled && allowDragging && allowReordering)}
-      onDragStart={onDragStartHandler}
-      onDragEnter={onDragEnterHandler}
-      onDragOver={onDragOverHandler}
-      onDrop={onDropHandler}
-      onDragLeave={onDragLeaveHandler}
-      onDragEnd={onDragEndhandler}
       data-test-id="dynamic-list-row"
+      ref={provided?.innerRef}
+      {...provided?.draggableProps}
+      style={customStyles}
     >
-      {allowReordering === true &&
-        // only show position column if allowReordering is true and the positionKey exists
-        positionKey !== undefined && (
-          <div className={classes.position}>
-            {allowDragging && (
-              <div className={classes.draggable}>
-                <Icons icon={IconName.Drag} className={classes.dragIcon} />
-              </div>
-            )}
+      {showPositionColumn && (
+        <div className={classes.position}>
+          {allowDragging && (
+            <div className={classes.draggable} {...provided?.dragHandleProps}>
+              <Icons icon={IconName.Drag} className={classes.dragIcon} />
+            </div>
+          )}
 
-            <div className={classes.input}>
-              <input
-                type="text"
-                style={{ height: rowHeight, width: rowHeight }}
-                onChange={(event) => {
-                  // check for valid number
-                  if (Number.isNaN(Number(event.target.value))) {
-                    return;
-                  } else {
-                    setPosition(Number(event.target.value));
-                  }
-                }}
-                value={position}
-                disabled={disabled}
-                onKeyDown={(event) =>
-                  event.key === 'Enter' &&
-                  onPositionInputChangedHandler(
-                    Number(event.currentTarget.value),
-                  )
+          <div className={classes.input}>
+            <input
+              type="text"
+              onChange={(event) => {
+                // check for valid number
+                if (Number.isNaN(Number(event.target.value))) {
+                  return;
+                } else {
+                  setPosition(Number(event.target.value));
                 }
-              />
-            </div>
+              }}
+              value={position}
+              disabled={disabled}
+              onKeyDown={(event) =>
+                event.key === 'Enter' &&
+                onPositionInputChangedHandler(Number(event.currentTarget.value))
+              }
+            />
           </div>
-        )}
+        </div>
+      )}
       {columns.map((column: DynamicListColumn<T>) => {
         const columnData: React.ReactNode = renderData<T>(
           column,
@@ -271,7 +184,7 @@ export const DynamicListRow = <T extends Data>({
           </div>
         );
       })}
-      {(inlineMenuData || allowRemove) && (
+      {showActionColumn && (
         <div className={classes.actionButtonContainer}>
           {inlineMenuData && !!inlineMenuData.length && (
             <InlineMenu
@@ -302,13 +215,6 @@ export const DynamicListRow = <T extends Data>({
   );
 };
 
-const getElevation = (
-  clientY: number,
-  box: DOMRect,
-): DynamicListElevationOptions => {
-  return clientY - box.top - box.height / 2 < 0 ? 'above' : 'below';
-};
-
 const renderData = function <T extends Data>(
   column: DynamicListColumn<T>,
   data: T,

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.actions.spec.ts

@@ -0,0 +1,276 @@
+import { addItem, removeItem } from './DynamicListReducer.actions';
+
+interface Data {
+  position?: number;
+  id: number;
+}
+
+const dataSet: Data[] = [
+  { position: 1, id: 1 },
+  { position: 2, id: 2 },
+  { position: 5, id: 5 },
+  { position: 6, id: 6 },
+  { position: 7, id: 7 },
+  { position: 8, id: 8 },
+  { position: 20, id: 20 },
+  { position: 100, id: 100 },
+];
+
+const addItemCases = [
+  {
+    title: 'item at the beginning',
+    item: { position: 1, id: 999 },
+    result: [
+      { position: 1, id: 999 },
+      { position: 2, id: 1 },
+      { position: 3, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item before a sequence',
+    item: { position: 4, id: 999 },
+    result: [
+      { position: 4, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item in the beginning of a sequence',
+    item: { position: 5, id: 999 },
+    result: [
+      { position: 5, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 6, id: 5 },
+      { position: 7, id: 6 },
+      { position: 8, id: 7 },
+      { position: 9, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item in the middle of a sequence',
+    item: { position: 6, id: 999 },
+    result: [
+      { position: 6, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 7, id: 6 },
+      { position: 8, id: 7 },
+      { position: 9, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item before the end of a sequence',
+    item: { position: 8, id: 999 },
+    result: [
+      { position: 8, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 9, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item at the end of a sequence',
+    item: { position: 9, id: 999 },
+    result: [
+      { position: 9, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item without a sequence',
+    item: { position: 50, id: 999 },
+    result: [
+      { position: 50, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item at the end',
+    item: { position: 150, id: 999 },
+    result: [
+      { position: 150, id: 999 },
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+];
+
+const removeItemCases = [
+  {
+    title: 'item at the beginning',
+    item: dataSet[0],
+    result: [
+      { position: 1, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item before a sequence',
+    item: dataSet[1],
+    result: [
+      { position: 1, id: 1 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item in the beginning of a sequence',
+    item: dataSet[2],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 6 },
+      { position: 6, id: 7 },
+      { position: 7, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item in the middle of a sequence',
+    item: dataSet[3],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 7 },
+      { position: 7, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item before the end of a sequence',
+    item: dataSet[4],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item at the end of a sequence',
+    item: dataSet[5],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item without a sequence',
+    item: dataSet[6],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 100, id: 100 },
+    ],
+  },
+  {
+    title: 'item at the end',
+    item: dataSet[7],
+    result: [
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+    ],
+  },
+];
+
+describe('Dynamic List Reducer Actions', () => {
+  it('addItem adds item without position', () => {
+    expect(addItem({ id: 999 }, dataSet, undefined)).toStrictEqual([
+      ...dataSet,
+      { id: 999 },
+    ]);
+  });
+
+  it.each(addItemCases)('addItem adds $title', ({ item, result }) => {
+    expect(addItem(item, dataSet, 'position')).toStrictEqual(result);
+  });
+
+  it('removeItem removes item without position', () => {
+    expect(removeItem(dataSet[3], dataSet, undefined)).toStrictEqual([
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 7, id: 7 },
+      { position: 8, id: 8 },
+      { position: 20, id: 20 },
+      { position: 100, id: 100 },
+    ]);
+  });
+
+  it.each(removeItemCases)('removeItem removes $title', ({ item, result }) => {
+    expect(removeItem(item, dataSet, 'position')).toStrictEqual(result);
+  });
+});

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.actions.ts

@@ -0,0 +1,86 @@
+import { Data } from '../../../../types';
+import { DynamicListReducerState } from './DynamicListReducer.types';
+
+export const addItem = <T extends Data>(
+  item: T,
+  items: DynamicListReducerState<T>['items'],
+  positionPropertyName: DynamicListReducerState<T>['positionPropertyName'],
+): T[] => {
+  let newValue: T[] = [];
+  if (positionPropertyName) {
+    // We can safely push this item anywhere in the array as long as the reducer re-arranges the entire array based on positions
+    newValue.push(item);
+
+    items.forEach((value) => {
+      if (value[positionPropertyName] < item[positionPropertyName]) {
+        // Items before the new item
+        return newValue.push(value);
+      } else if (value[positionPropertyName] === item[positionPropertyName]) {
+        // If an item already exists in the same position, we need to increment the position of the existing item
+        newValue.push({
+          ...value,
+          [positionPropertyName]: value[positionPropertyName] + 1,
+        });
+      } else if (value[positionPropertyName] > item[positionPropertyName]) {
+        // Increment the rest of the items
+        if (newValue[newValue.length - 1].position === value.position) {
+          newValue.push({
+            ...value,
+            [positionPropertyName]: value[positionPropertyName] + 1,
+          });
+        } else {
+          return newValue.push(value);
+        }
+      }
+    });
+  } else {
+    newValue = [...items, item];
+  }
+
+  return newValue;
+};
+
+export const removeItem = <T extends Data>(
+  item: T,
+  items: DynamicListReducerState<T>['items'],
+  positionPropertyName: DynamicListReducerState<T>['positionPropertyName'],
+): T[] => {
+  let newValue: T[] = [];
+  if (positionPropertyName) {
+    let hasReachedGap = false;
+
+    items.forEach((value) => {
+      if (value[positionPropertyName] < item[positionPropertyName]) {
+        // Items before the removed item
+        return newValue.push(value);
+      } else if (value[positionPropertyName] > item[positionPropertyName]) {
+        // Check if a gap was reached
+        hasReachedGap =
+          hasReachedGap || isGap(items[items.indexOf(value) - 1], value);
+
+        // Items after the removed item
+        if (!hasReachedGap) {
+          return newValue.push({
+            ...value,
+            [positionPropertyName]: value[positionPropertyName] - 1,
+          });
+        } else {
+          return newValue.push(value);
+        }
+      }
+    });
+  } else {
+    newValue = items.filter((x) => x !== item);
+  }
+
+  return newValue;
+};
+
+const isGap = <T extends Data>(previousItem: T, nextItem: T): boolean => {
+  const previousPosition = previousItem?.position;
+  const nextPosition = nextItem?.position;
+
+  return (
+    previousPosition && nextPosition && previousPosition + 1 < nextPosition
+  );
+};