@axinom/mosaic-ui 0.35.0-rc.9 → 0.36.0-rc.0

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.spec.tsx

@@ -45,7 +45,6 @@ const defaultProps: DynamicListDataEntryProps<TestData> = {
   verticalTextAlign: 'center',
   positionKey: 'position',
   allowReordering: false,
-  allowAdd: false,
 };
 
 const MockRenderer: DynamicListDataEntryRenderer = (
@@ -139,9 +138,7 @@ describe('DynamicListDataEntry', () => {
   });
 
   it(`Button component should have type of 'button'`, () => {
-    const wrapper = mount(
-      <DynamicListDataEntry {...defaultProps} allowAdd={true} />,
-    );
+    const wrapper = mount(<DynamicListDataEntry {...defaultProps} />);
 
     const button = wrapper.find(Button);
 
@@ -220,40 +217,9 @@ describe('DynamicListDataEntry', () => {
     expect(dragIcon.exists()).toBe(false);
   });
 
-  it(`doesn't display an action button by default`, () => {
-    const wrapper = shallow(
-      <DynamicListDataEntry
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-      />,
-    );
-
-    const button = wrapper.find(Button);
-
-    expect(button.exists()).toBe(false);
-  });
-
-  it(`displays an action button if 'allowAdd' is set to true`, () => {
-    const wrapper = shallow(
-      <DynamicListDataEntry
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
-      />,
-    );
-
-    const button = wrapper.find(Button);
-
-    expect(button.exists()).toBe(true);
-  });
-
   it(`renders "disabled" attribute for action button when set`, () => {
     const wrapper = mount(
-      <DynamicListDataEntry
-        {...defaultProps}
-        allowAdd={true}
-        disabled={true}
-      />,
+      <DynamicListDataEntry {...defaultProps} disabled={true} />,
     );
 
     const button = wrapper.find(Button);
@@ -307,7 +273,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         defaultValuesForNewData={defaultData}
         onActionClicked={spy}
       />,
@@ -332,7 +297,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         rowValidationSchema={Yup.object<ObjectSchemaDefinition<TestData>>({
           id: Yup.number().required(),
@@ -364,7 +328,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={columnWithRenderer}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
       />,
     );
@@ -401,7 +364,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={true}
@@ -445,7 +407,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={false}
@@ -486,7 +447,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={true}
@@ -529,7 +489,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         allowReordering={true}
         newDataPosition={mockNewPos}
@@ -578,7 +537,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={mockColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
       />,
     );

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -15,7 +15,10 @@ import { IconName, Icons } from '../../Icons';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListDataEntry.scss';
 
-// TODO: Add sizing for DragIcon and Input container. Similar to ActionButton sizing
+export enum DynamicListDataEntryMode {
+  Add,
+  Edit,
+}
 
 export interface DynamicListDataEntryProps<T extends Data> {
   /** The column definition */
@@ -34,8 +37,6 @@ export interface DynamicListDataEntryProps<T extends Data> {
   verticalTextAlign?: 'start' | 'center' | 'end';
   /** Property name that is used to determine data position (default: undefined) */
   positionKey?: keyof T;
-  /** If set to true, the add action button will be rendered (default: undefined) */
-  allowAdd?: boolean;
   /** Whether add new item button should be disabled */
   disabled?: boolean;
   /** If set to true, rows can be be repositioned using the input field (default: undefined) */
@@ -58,6 +59,8 @@ export interface DynamicListDataEntryProps<T extends Data> {
   showHeader?: boolean;
   /** If set to true, the position column will be shown (default: false) */
   showPositionColumn?: boolean;
+  /** Determines if the component is in Add or Edit mode (default: Add) */
+  mode?: DynamicListDataEntryMode;
   /** Emits when the action button is clicked. Data is supplied as a parameter */
   onActionClicked?: (data: T) => void;
   /** override default add button (+) */
@@ -73,7 +76,6 @@ export const DynamicListDataEntry = <T extends Data>({
   horizontalTextAlign,
   verticalTextAlign,
   positionKey,
-  allowAdd,
   disabled = false,
   allowReordering,
   allowDragging,
@@ -85,6 +87,7 @@ export const DynamicListDataEntry = <T extends Data>({
   sticky = true,
   showHeader,
   showPositionColumn = false,
+  mode = DynamicListDataEntryMode.Add,
   onActionClicked = noop,
   customAddButton,
 }: PropsWithChildren<DynamicListDataEntryProps<T>>): JSX.Element => {
@@ -221,29 +224,31 @@ export const DynamicListDataEntry = <T extends Data>({
           )}
         </div>
       ))}
-      {allowAdd && (
-        <div className={clsx(classes.actionButtonContainer)}>
-          {(customAddButton && customAddButton(onAddItemHandler)) || (
-            <Button
-              type="button"
-              className={clsx(classes.actionButton)}
-              icon={IconName.Plus}
-              buttonContext={
-                actionButtonContext === undefined
-                  ? isDirty
-                    ? ButtonContext.Active
-                    : ButtonContext.Icon
-                  : actionButtonContext
-              }
-              height={actionSize}
-              width={actionSize}
-              onButtonClicked={() => onAddItemHandler()}
-              dataTestId="dynamic-list-add-button"
-              disabled={disabled}
-            />
-          )}
-        </div>
-      )}
+      <div className={clsx(classes.actionButtonContainer)}>
+        {(customAddButton && customAddButton(onAddItemHandler)) || (
+          <Button
+            type="button"
+            className={clsx(classes.actionButton)}
+            icon={
+              mode === DynamicListDataEntryMode.Add
+                ? IconName.Plus
+                : IconName.Checkmark
+            }
+            buttonContext={
+              actionButtonContext === undefined
+                ? isDirty
+                  ? ButtonContext.Active
+                  : ButtonContext.Icon
+                : actionButtonContext
+            }
+            height={actionSize}
+            width={actionSize}
+            onButtonClicked={onAddItemHandler}
+            dataTestId="dynamic-list-add-button"
+            disabled={disabled}
+          />
+        )}
+      </div>
     </div>
   );
 };
@@ -254,8 +259,11 @@ const renderField = function <T extends Data>(
   error: string | undefined,
   onValueChanged: (value: unknown) => void,
   disabled = false,
+  mode: DynamicListDataEntryMode = DynamicListDataEntryMode.Add,
 ): React.ReactNode {
-  if (column.dataEntryRender) {
+  if (mode === DynamicListDataEntryMode.Edit && column.dataEditRender) {
+    return column.dataEditRender(currentValue, error, onValueChanged, disabled);
+  } else if (column.dataEntryRender) {
     return column.dataEntryRender(
       currentValue,
       error,

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -21,6 +21,18 @@
   justify-items: left;
   align-items: center;
 
+  .wrapper {
+    min-height: 50px;
+    min-width: 100%;
+    display: grid;
+    align-items: center;
+    border: 1px solid transparent;
+  }
+
+  &:hover .editable {
+    border: 1px solid var(--input-hover-color, $input-hover-color);
+  }
+
   .column {
     max-width: 100%;
     max-height: 100%;

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

@@ -11,8 +11,6 @@ import { InlineMenu } from '../../InlineMenu';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListRow.scss';
 
-// TODO: Add sizing for DragIcon and Input container. Similar to ActionButton sizing
-
 export interface DynamicListRowProps<T extends Data> {
   /** The column definition */
   columns: DynamicListColumn<T>[];
@@ -32,6 +30,8 @@ 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, editable fields will be highlighted and row click events will be fired (default: false) */
+  allowEditing?: 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) */
@@ -49,6 +49,7 @@ export interface DynamicListRowProps<T extends Data> {
     currenPosition: number,
     newPosition: number,
   ) => void;
+  onRowClicked?: (data: T) => void;
   /** Emits when the action button is clicked. Data is supplied as a parameter */
   onActionClicked?: (data: T) => void;
   /** CSS Class name for additional styles */
@@ -75,6 +76,7 @@ export const DynamicListRow = <T extends Data>({
   disabled,
   provided,
   onPositionInputChanged = noop,
+  onRowClicked = noop,
   onActionClicked = noop,
   className = '',
   rowClassNameProvider,
@@ -82,6 +84,7 @@ export const DynamicListRow = <T extends Data>({
   dragging = false,
   showPositionColumn = false,
   showActionColumn = false,
+  allowEditing = false,
 }: PropsWithChildren<DynamicListRowProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: `minmax(50px, ${rowHeight})`,
@@ -130,6 +133,7 @@ export const DynamicListRow = <T extends Data>({
       ref={provided?.innerRef}
       {...provided?.draggableProps}
       style={customStyles}
+      onClick={() => allowEditing && onRowClicked(data)}
     >
       {showPositionColumn && (
         <div className={classes.position}>
@@ -169,18 +173,25 @@ export const DynamicListRow = <T extends Data>({
 
         return (
           <div
+            className={clsx(classes.wrapper, {
+              [classes.editable]:
+                column.dataEntryRender !== undefined && allowEditing,
+            })}
             key={column.propertyName as string}
-            className={classes.column}
-            title={
-              column.tooltip !== false
-                ? getTooltipText(data[column.propertyName])
-                : undefined
-            }
-            data-test-id={`dynamic-list-property:${
-              column.propertyName as string
-            }`}
           >
-            {columnData}
+            <div
+              className={classes.column}
+              title={
+                column.tooltip !== false
+                  ? getTooltipText(data[column.propertyName])
+                  : undefined
+              }
+              data-test-id={`dynamic-list-property:${
+                column.propertyName as string
+              }`}
+            >
+              {columnData}
+            </div>
           </div>
         );
       })}

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

@@ -7,7 +7,10 @@ import {
 } from './DynamicListReducer.types';
 
 jest.mock('./DynamicListReducer.init');
-jest.mock('./DynamicListReducer.actions');
+jest.mock('./DynamicListReducer.actions', () => ({
+  addItem: jest.fn(),
+  removeItem: jest.fn().mockReturnValue([]),
+}));
 
 interface Data {
   position?: number;
@@ -69,6 +72,28 @@ describe('Dynamic List Reducer', () => {
     expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
   });
 
+  it('calls removeItem, addItem and DynamicListReducerInit when action is update', () => {
+    DynamicListReducer(initialState, {
+      type: DynamicListReducerActionType.Update,
+      currentItem: { position: 20, id: 20 },
+      newItem: { id: 10, position: 11 },
+    });
+
+    expect(removeItem).toHaveBeenCalledTimes(1);
+    expect(removeItem).toHaveBeenCalledWith(
+      { position: 20, id: 20 },
+      dataSet,
+      'position',
+    );
+    expect(addItem).toHaveBeenCalledTimes(1);
+    expect(addItem).toHaveBeenCalledWith(
+      { id: 10, position: 11 },
+      [],
+      'position',
+    );
+    expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
+  });
+
   it('calls DynamicListReducerInit with new items when action is reset', () => {
     DynamicListReducer(initialState, {
       type: DynamicListReducerActionType.Reset,

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

@@ -22,6 +22,14 @@ export const DynamicListReducer = <T extends Data>(
     case DynamicListReducerActionType.Remove:
       newItems = removeItem(action.item, state.items, positionPropertyName);
       break;
+    case DynamicListReducerActionType.Update:
+      newItems = removeItem(
+        action.currentItem,
+        state.items,
+        positionPropertyName,
+      );
+      newItems = addItem(action.newItem, newItems, positionPropertyName);
+      break;
     case DynamicListReducerActionType.Reset:
       newItems = action.items;
       positionPropertyName = action.positionPropertyName;

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

@@ -10,12 +10,14 @@ export interface DynamicListReducerInitArgs<T extends Data> {
 export enum DynamicListReducerActionType {
   Add = 'add',
   Remove = 'remove',
+  Update = 'update',
   Reset = 'reset',
 }
 
 export type DynamicListReducerAction<T extends Data> =
   | DynamicListReducerAddAction<T>
   | DynamicListReducerRemoveAction<T>
+  | DynamicListReducerUpdateAction<T>
   | DynamicListReducerResetAction<T>;
 
 interface DynamicListReducerAddAction<T extends Data> {
@@ -28,6 +30,12 @@ interface DynamicListReducerRemoveAction<T extends Data> {
   item: T;
 }
 
+interface DynamicListReducerUpdateAction<T extends Data> {
+  type: DynamicListReducerActionType.Update;
+  currentItem: T;
+  newItem: T;
+}
+
 interface DynamicListReducerResetAction<T extends Data> {
   type: DynamicListReducerActionType.Reset;
   items: T[];

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

@@ -22,6 +22,7 @@ export const useDataHandler = <T extends Data>(
   readonly canAddItems: boolean;
   readonly addItem: (item: T) => void;
   readonly removeItem: (item: T) => void;
+  readonly updateItem: (currentItem: T, newItem: T) => void;
 } => {
   const [shouldTriggerOnChange, setShouldTriggerOnChange] = useState(false);
 
@@ -71,7 +72,16 @@ export const useDataHandler = <T extends Data>(
     setShouldTriggerOnChange(true);
   };
 
+  const updateItem = (currentItem: T, newItem: T): void => {
+    dispatch({
+      type: DynamicListReducerActionType.Update,
+      currentItem,
+      newItem,
+    });
+    setShouldTriggerOnChange(true);
+  };
+
   const { items, nextPosition, canAddItems } = state;
 
-  return { items, nextPosition, canAddItems, addItem, removeItem };
+  return { items, nextPosition, canAddItems, addItem, removeItem, updateItem };
 };

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

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Data } from '../../../types';
+
+export const useRowEditing = <T extends Data>(
+  allowEditing: boolean,
+  updateItem: (currentItem: T, newItem: T) => void,
+): {
+  readonly editingRow: T | undefined;
+  readonly isEditing: boolean;
+  readonly startEditing: (item: T) => void;
+  readonly finishEditing: (item: T) => void;
+} => {
+  const [editingRow, setEditingRow] = useState<T>();
+
+  const startEditing = (item: T): void => {
+    allowEditing && setEditingRow(item);
+  };
+
+  const finishEditing = (item: T): void => {
+    updateItem(editingRow as T, item);
+    setEditingRow(undefined);
+  };
+
+  return {
+    editingRow,
+    isEditing: !!editingRow,
+    startEditing,
+    finishEditing,
+  };
+};

package/src/components/FormStation/FormStation.scss

@@ -70,6 +70,10 @@
     }
 
     .formContainer {
+      overflow-x: hidden;
+    }
+
+    .paddedContent {
       padding: 30px;
     }
 

package/src/components/FormStation/FormStation.tsx

@@ -246,8 +246,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
               <MessageBar {...stationMessage}>{stationMessage.body}</MessageBar>
             )}
             <div
-              className={clsx({
-                [classes.formContainer]: !edgeToEdgeContent,
+              className={clsx(classes.formContainer, {
+                [classes.paddedContent]: !edgeToEdgeContent,
               })}
             >
               <Form>

package/src/styles/variables.scss

@@ -223,7 +223,7 @@ $calendar-container-bg-color: $blue;
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;
-$dynamic-list-row-hover-bg-color: $light-gray-2;
+$dynamic-list-row-hover-bg-color: rgba($blue, 0.1);
 $dynamic-list-row-height: 50px;
 $dynamic-list-column-gap: 20px;
 $dynamic-list-row-gap: 0px;