@axinom/mosaic-ui 0.35.0-rc.7 → 0.35.0-rc.9

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

@@ -0,0 +1,118 @@
+import { DynamicListReducerInit } from './DynamicListReducer.init';
+
+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 },
+];
+
+describe('Dynamic List Reducer Init', () => {
+  it('generates the initial state', () => {
+    const result = DynamicListReducerInit({
+      initialValue: dataSet,
+      positionPropertyName: 'position',
+      allowNewData: true,
+      maxItemLimit: 10,
+    });
+
+    expect(result).toStrictEqual({
+      items: dataSet,
+      nextPosition: 101,
+      canAddItems: true,
+      positionPropertyName: 'position',
+      maxItemLimit: 10,
+      allowNewData: true,
+    });
+  });
+
+  it('sorts the data when positionPropertyName is defined', () => {
+    const data = [
+      { position: 5, id: 5 },
+      { position: 2, id: 2 },
+      { position: 6, id: 6 },
+      { position: 1, id: 1 },
+    ];
+
+    const result = DynamicListReducerInit({
+      initialValue: data,
+      positionPropertyName: 'position',
+      allowNewData: true,
+      maxItemLimit: 10,
+    });
+
+    expect(result.items).toEqual([
+      { position: 1, id: 1 },
+      { position: 2, id: 2 },
+      { position: 5, id: 5 },
+      { position: 6, id: 6 },
+    ]);
+  });
+
+  it('calculates the next position', () => {
+    expect(
+      DynamicListReducerInit({
+        initialValue: dataSet,
+        positionPropertyName: 'position',
+        allowNewData: true,
+        maxItemLimit: 10,
+      }).nextPosition,
+    ).toBe(101);
+
+    expect(
+      DynamicListReducerInit({
+        initialValue: dataSet.slice(0, dataSet.length - 1),
+        positionPropertyName: 'position',
+        allowNewData: true,
+        maxItemLimit: 10,
+      }).nextPosition,
+    ).toBe(21);
+
+    expect(
+      DynamicListReducerInit({
+        initialValue: [],
+        positionPropertyName: 'position',
+        allowNewData: true,
+        maxItemLimit: 10,
+      }).nextPosition,
+    ).toBe(1);
+  });
+
+  it('calculates canAddItems', () => {
+    expect(
+      DynamicListReducerInit({
+        initialValue: dataSet,
+        positionPropertyName: 'position',
+        allowNewData: true,
+        maxItemLimit: 10,
+      }).canAddItems,
+    ).toBe(true);
+
+    expect(
+      DynamicListReducerInit({
+        initialValue: dataSet,
+        positionPropertyName: 'position',
+        allowNewData: true,
+        maxItemLimit: 5,
+      }).canAddItems,
+    ).toBe(false);
+
+    expect(
+      DynamicListReducerInit({
+        initialValue: dataSet,
+        positionPropertyName: 'position',
+        allowNewData: false,
+        maxItemLimit: 10,
+      }).canAddItems,
+    ).toBe(false);
+  });
+});

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

@@ -0,0 +1,40 @@
+import { Data } from '../../../../types';
+import {
+  DynamicListReducerInitArgs,
+  DynamicListReducerState,
+} from './DynamicListReducer.types';
+
+export const DynamicListReducerInit = <T extends Data>(
+  args: DynamicListReducerInitArgs<T>,
+): DynamicListReducerState<T> => {
+  const { initialValue, positionPropertyName, maxItemLimit, allowNewData } =
+    args;
+
+  const newState: DynamicListReducerState<T> = {
+    items: initialValue,
+    nextPosition: 1,
+    canAddItems: false,
+    positionPropertyName,
+    maxItemLimit,
+    allowNewData,
+  };
+
+  if (positionPropertyName !== undefined && initialValue.length > 0) {
+    const sortedValue = [...initialValue].sort(
+      (a, b) =>
+        Number(a[positionPropertyName]) - Number(b[positionPropertyName]),
+    );
+
+    newState.nextPosition =
+      sortedValue[sortedValue.length - 1][positionPropertyName] + 1;
+
+    newState.items = sortedValue;
+  }
+
+  newState.canAddItems =
+    allowNewData &&
+    ((maxItemLimit !== undefined && newState.items.length < maxItemLimit) ||
+      maxItemLimit === undefined);
+
+  return newState;
+};

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

@@ -0,0 +1,89 @@
+import { DynamicListReducer } from './DynamicListReducer';
+import { addItem, removeItem } from './DynamicListReducer.actions';
+import { DynamicListReducerInit } from './DynamicListReducer.init';
+import {
+  DynamicListReducerActionType,
+  DynamicListReducerState,
+} from './DynamicListReducer.types';
+
+jest.mock('./DynamicListReducer.init');
+jest.mock('./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 initialState: DynamicListReducerState<Data> = {
+  items: dataSet,
+  nextPosition: 1,
+  canAddItems: false,
+  positionPropertyName: 'position',
+  maxItemLimit: 10,
+  allowNewData: true,
+};
+
+describe('Dynamic List Reducer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls addItem and DynamicListReducerInit when action is add', () => {
+    DynamicListReducer(initialState, {
+      type: DynamicListReducerActionType.Add,
+      item: { id: 10, position: 10 },
+    });
+
+    expect(addItem).toHaveBeenCalledTimes(1);
+    expect(addItem).toHaveBeenCalledWith(
+      { id: 10, position: 10 },
+      dataSet,
+      'position',
+    );
+    expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls removeItem and DynamicListReducerInit when action is remove', () => {
+    DynamicListReducer(initialState, {
+      type: DynamicListReducerActionType.Remove,
+      item: { id: 10, position: 10 },
+    });
+
+    expect(removeItem).toHaveBeenCalledTimes(1);
+    expect(removeItem).toHaveBeenCalledWith(
+      { id: 10, position: 10 },
+      dataSet,
+      'position',
+    );
+    expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls DynamicListReducerInit with new items when action is reset', () => {
+    DynamicListReducer(initialState, {
+      type: DynamicListReducerActionType.Reset,
+      items: dataSet,
+      positionPropertyName: 'id',
+      maxItemLimit: 5,
+      allowNewData: false,
+    });
+
+    expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
+    expect(DynamicListReducerInit).toHaveBeenCalledWith({
+      initialValue: dataSet,
+      positionPropertyName: 'id',
+      maxItemLimit: 5,
+      allowNewData: false,
+    });
+  });
+});

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

@@ -0,0 +1,42 @@
+import { Data } from '../../../../types';
+import { addItem, removeItem } from './DynamicListReducer.actions';
+import { DynamicListReducerInit } from './DynamicListReducer.init';
+import {
+  DynamicListReducerAction,
+  DynamicListReducerActionType,
+  DynamicListReducerState,
+} from './DynamicListReducer.types';
+
+export const DynamicListReducer = <T extends Data>(
+  state: DynamicListReducerState<T>,
+  action: DynamicListReducerAction<T>,
+): DynamicListReducerState<T> => {
+  let { positionPropertyName, allowNewData, maxItemLimit } = state;
+
+  let newItems: T[] = [];
+
+  switch (action.type) {
+    case DynamicListReducerActionType.Add:
+      newItems = addItem(action.item, state.items, positionPropertyName);
+      break;
+    case DynamicListReducerActionType.Remove:
+      newItems = removeItem(action.item, state.items, positionPropertyName);
+      break;
+    case DynamicListReducerActionType.Reset:
+      newItems = action.items;
+      positionPropertyName = action.positionPropertyName;
+      maxItemLimit = action.maxItemLimit;
+      allowNewData = action.allowNewData;
+      break;
+    default:
+      throw new Error();
+  }
+
+  // Init function can also be used as a refresher. This re-orders the items and re-calculates the next position and canAddItems
+  return DynamicListReducerInit({
+    initialValue: newItems,
+    positionPropertyName,
+    maxItemLimit,
+    allowNewData,
+  });
+};

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

@@ -0,0 +1,46 @@
+import { Data } from '../../../../types';
+
+export interface DynamicListReducerInitArgs<T extends Data> {
+  initialValue: T[];
+  positionPropertyName: keyof T | undefined;
+  maxItemLimit: number | undefined;
+  allowNewData: boolean;
+}
+
+export enum DynamicListReducerActionType {
+  Add = 'add',
+  Remove = 'remove',
+  Reset = 'reset',
+}
+
+export type DynamicListReducerAction<T extends Data> =
+  | DynamicListReducerAddAction<T>
+  | DynamicListReducerRemoveAction<T>
+  | DynamicListReducerResetAction<T>;
+
+interface DynamicListReducerAddAction<T extends Data> {
+  type: DynamicListReducerActionType.Add;
+  item: T;
+}
+
+interface DynamicListReducerRemoveAction<T extends Data> {
+  type: DynamicListReducerActionType.Remove;
+  item: T;
+}
+
+interface DynamicListReducerResetAction<T extends Data> {
+  type: DynamicListReducerActionType.Reset;
+  items: T[];
+  allowNewData: boolean;
+  maxItemLimit: number | undefined;
+  positionPropertyName: keyof T | undefined;
+}
+
+export interface DynamicListReducerState<T extends Data> {
+  items: T[];
+  nextPosition: number;
+  canAddItems: boolean;
+  positionPropertyName: keyof T | undefined;
+  maxItemLimit: number | undefined;
+  allowNewData: boolean;
+}

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

@@ -0,0 +1,3 @@
+export { DynamicListReducer } from './DynamicListReducer';
+export { DynamicListReducerInit } from './DynamicListReducer.init';
+export * from './DynamicListReducer.types';

package/src/components/DynamicDataList/helpers/generateId.ts

@@ -0,0 +1,10 @@
+/**
+ * A simple UUID generator. This is not a cryptographically secure generator.
+ * @returns UUID
+ */
+export const uuid = (): string => {
+  const url = URL.createObjectURL(new Blob());
+  const [id] = url.toString().split('/').reverse();
+  URL.revokeObjectURL(url);
+  return id;
+};

package/src/components/DynamicDataList/helpers/useColumnDefs.ts

@@ -0,0 +1,56 @@
+import { Data } from '../../../types';
+import { DynamicListColumn } from '../DynamicDataList.model';
+
+/**
+ * Generates a combined string of all columns.columnSize values, to be used as CSS value
+ * Also produces property key which is used for positioning
+ * @param columns The list of columns that should be used
+ * @returns a string that consists of defined column sizes and a position key that maps to a data property
+ */
+export const useColumnDefs = function <T extends Data>(
+  columns: DynamicListColumn<T>[],
+  allowReordering: boolean,
+  allowNewData: boolean,
+  allowRowDragging: boolean,
+  positionKey?: keyof T,
+  showInlineMenu?: boolean,
+): {
+  readonly columnSizes: string;
+  readonly showPositionColumn: boolean;
+  readonly showActionColumn: boolean;
+} {
+  let positionColumn = '';
+  let actionColumn = '';
+  let showPositionColumn = false;
+  let showActionColumn = false;
+
+  const columnDefinition = columns
+    .filter((columns) => columns.propertyName !== positionKey) // do not allow a column to be created for 'position'
+    .reduce((prev, current) => `${prev} ${current.size ?? '1fr'}`, '')
+    .trim();
+
+  // only show position column if allowReordering is true and the positionKey exists
+  if (allowReordering && positionKey !== undefined) {
+    if (allowRowDragging === true) {
+      positionColumn = '100px';
+    } else {
+      positionColumn = '50px';
+    }
+
+    showPositionColumn = true;
+  }
+
+  if (allowNewData || showInlineMenu) {
+    actionColumn = '50px';
+    showActionColumn = true;
+  }
+
+  const columnSizes =
+    `${positionColumn} ${columnDefinition} ${actionColumn}`.trim();
+
+  return {
+    columnSizes,
+    showPositionColumn,
+    showActionColumn,
+  } as const;
+};

package/src/components/DynamicDataList/helpers/useDataHandler.ts

@@ -0,0 +1,77 @@
+import { Reducer, useEffect, useReducer, useState } from 'react';
+import { Data } from '../../../types';
+import {
+  DynamicListReducer,
+  DynamicListReducerAction,
+  DynamicListReducerActionType,
+  DynamicListReducerInit,
+  DynamicListReducerInitArgs,
+  DynamicListReducerState,
+} from './DynamicListReducer';
+
+export const useDataHandler = <T extends Data>(
+  initialValue: T[],
+  positionPropertyName: keyof T | undefined,
+  maxItemLimit: number | undefined,
+  allowNewData: boolean,
+  onChange: (value: T[]) => void,
+  onAddTransformData?: (data: Partial<T>) => T,
+): {
+  readonly items: T[];
+  readonly nextPosition: number;
+  readonly canAddItems: boolean;
+  readonly addItem: (item: T) => void;
+  readonly removeItem: (item: T) => void;
+} => {
+  const [shouldTriggerOnChange, setShouldTriggerOnChange] = useState(false);
+
+  const [state, dispatch] = useReducer<
+    Reducer<DynamicListReducerState<T>, DynamicListReducerAction<T>>,
+    DynamicListReducerInitArgs<T>
+  >(
+    DynamicListReducer,
+    {
+      initialValue,
+      positionPropertyName,
+      maxItemLimit,
+      allowNewData,
+    },
+    DynamicListReducerInit,
+  );
+
+  useEffect(() => {
+    // Reset the reducer data to new initial value
+    dispatch({
+      type: DynamicListReducerActionType.Reset,
+      items: initialValue,
+      positionPropertyName,
+      maxItemLimit,
+      allowNewData,
+    });
+  }, [allowNewData, initialValue, maxItemLimit, positionPropertyName]);
+
+  useEffect(() => {
+    // This is to prevent the onChange from being triggered on the initial render
+    if (shouldTriggerOnChange) {
+      onChange(state.items);
+      setShouldTriggerOnChange(false);
+    }
+  }, [onChange, shouldTriggerOnChange, state.items]);
+
+  const addItem = (item: T): void => {
+    dispatch({
+      type: DynamicListReducerActionType.Add,
+      item: onAddTransformData ? onAddTransformData(item) : item,
+    });
+    setShouldTriggerOnChange(true);
+  };
+
+  const removeItem = (item: T): void => {
+    dispatch({ type: DynamicListReducerActionType.Remove, item });
+    setShouldTriggerOnChange(true);
+  };
+
+  const { items, nextPosition, canAddItems } = state;
+
+  return { items, nextPosition, canAddItems, addItem, removeItem };
+};

package/src/components/DynamicDataList/helpers/useRowAnimation.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { Data } from '../../../types';
+
+interface RowAnimationProps<T> {
+  data: T;
+}
+
+export const useRowAnimation = <T extends Data>(): {
+  AnimatedRow: React.FC<RowAnimationProps<T>>;
+  setLastAddedItem: React.Dispatch<React.SetStateAction<T | undefined>>;
+  setShouldAnimate: React.Dispatch<React.SetStateAction<boolean>>;
+} => {
+  const [lastAddedItem, setLastAddedItem] = React.useState<T | undefined>();
+  const [shouldAnimate, setShouldAnimate] = React.useState<boolean>(false);
+
+  useEffect(() => {
+    if (shouldAnimate && lastRowRef.current) {
+      lastRowRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+
+      setShouldAnimate(false);
+    }
+  }, [shouldAnimate]);
+
+  const lastRowRef = React.useRef<HTMLDivElement>(null);
+
+  const AnimatedRow: React.FC<RowAnimationProps<T>> = ({ data, children }) => {
+    return (
+      <div ref={lastAddedItem === data ? lastRowRef : undefined}>
+        {children}
+      </div>
+    );
+  };
+
+  return { AnimatedRow, setLastAddedItem, setShouldAnimate };
+};

package/src/components/DynamicDataList/index.ts

@@ -2,8 +2,8 @@ export * from './DynamicDataList';
 export * from './DynamicDataList.model';
 export * from './DynamicListDataEntry';
 export {
-  createInputRenderer,
   CreateInputRendererConfig,
-  createSelectRenderer,
   CreateSelectRendererConfig,
+  createInputRenderer,
+  createSelectRenderer,
 } from './DynamicListDataEntry/Renderers';