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

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/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;