@zohodesk/library-platform 1.1.0-exp.2 → 1.1.1-exp.6

package/es/library/behaviours/list-selection/adapters/controllers/SelectionController.js

@@ -5,7 +5,8 @@ class SelectionController extends AbstractController {
     const {
       state,
       action,
-      updateState
+      updateState,
+      dispatch
     } = event;
     const {
       selected
@@ -15,7 +16,8 @@ class SelectionController extends AbstractController {
     } = this.service;
     selectionUseCase.updateDependencies(state, updateState);
     selectionUseCase.execute({
-      selected
+      selected,
+      dispatch
     });
   }
 

package/es/library/behaviours/list-selection/adapters/gateways/Repository.js

@@ -14,7 +14,8 @@ class Repository {
   getListItemSelection() {
     const {
       behaviours,
-      properties
+      properties,
+      data
     } = this.state;
     /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
 
@@ -24,10 +25,9 @@ class Repository {
     /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
 
     const {
-      selectionConfig,
-      data
+      selectionConfig
     } = properties || {};
-    const itemIds = data === null || data === void 0 ? void 0 : data.rows.map(item => item.id);
+    const itemIds = behaviours.zrecord.records.map(item => item.id);
     const maxSelectionCount = selectionConfig === null || selectionConfig === void 0 ? void 0 : selectionConfig.maxSelectionCount;
     return new ListItemSelection(selected, itemIds, maxSelectionCount);
   }

package/es/library/behaviours/list-selection/adapters/gateways/Service.js

@@ -5,6 +5,8 @@ import AllItemsSelection from "../../applications/usecases/AllItemSelection";
 import ItemRangeSelection from "../../applications/usecases/RangeSelection";
 import ItemsSelection from "../../applications/usecases/ItemsSelection";
 import Destruct from "../../applications/usecases/Destruct";
+import Select from "../../applications/usecases/Select";
+import Deselect from "../../applications/usecases/Deselect";
 
 class Service {
   constructor(dependencies) {
@@ -18,11 +20,17 @@ class Service {
 
     _defineProperty(this, "rangeSelectionUseCase", void 0);
 
+    _defineProperty(this, "selectUseCase", void 0);
+
+    _defineProperty(this, "deselectUseCase", void 0);
+
     this.initializeUseCase = new Initialize(dependencies);
     this.destructUseCase = new Destruct(dependencies);
     this.selectionUseCase = new ItemsSelection(dependencies);
     this.allSelectionUseCase = new AllItemsSelection(dependencies);
     this.rangeSelectionUseCase = new ItemRangeSelection(dependencies);
+    this.selectUseCase = new Select(dependencies);
+    this.deselectUseCase = new Deselect(dependencies);
   }
 
 }

package/es/library/behaviours/list-selection/applications/usecases/AllItemSelection.js

@@ -1,13 +1,17 @@
 import AbstractUseCase from "./AbstractUseCase";
 
 class AllItemsSelection extends AbstractUseCase {
-  execute() {
+  execute(_ref) {
+    let {
+      dispatch
+    } = _ref;
     const {
       repository,
       presenter
     } = this.dependencies;
     const listItemSelection = repository.getListItemSelection();
     listItemSelection.toggleAll();
+    listItemSelection.createDispatchProps().map(event => dispatch(event));
     presenter.updateListItemSelection(listItemSelection.toObject());
   }
 

package/es/library/behaviours/list-selection/applications/usecases/Deselect.js

@@ -0,0 +1,21 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class Deselect extends AbstractUseCase {
+  execute(inputModel) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const {
+      ids,
+      dispatch
+    } = inputModel;
+    const listItemSelection = repository.getListItemSelection();
+    listItemSelection.deselectItems(ids);
+    listItemSelection.createDispatchProps(ids).map(event => dispatch(event));
+    presenter.updateListItemSelection(listItemSelection.toObject());
+  }
+
+}
+
+export default Deselect;

package/es/library/behaviours/list-selection/applications/usecases/ItemsSelection.js

@@ -7,10 +7,12 @@ class ItemsSelection extends AbstractUseCase {
       presenter
     } = this.dependencies;
     const {
-      selected
+      selected,
+      dispatch
     } = inputModel;
     const listItemSelection = repository.getListItemSelection();
     listItemSelection.toggleItems(selected);
+    listItemSelection.createDispatchProps(selected).map(event => dispatch(event));
     presenter.updateListItemSelection(listItemSelection.toObject());
   }
 

package/es/library/behaviours/list-selection/applications/usecases/RangeSelection.js

@@ -7,10 +7,12 @@ class ItemRangeSelection extends AbstractUseCase {
       presenter
     } = this.dependencies;
     const {
-      id
+      id,
+      dispatch
     } = inputModel;
     let listItemSelection = repository.getListItemSelection();
     listItemSelection.toggleUpto(id);
+    listItemSelection.createDispatchProps().map(event => dispatch(event));
     presenter.updateListItemSelection(listItemSelection.toObject());
   }
 

package/es/library/behaviours/list-selection/applications/usecases/Select.js

@@ -0,0 +1,21 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class Select extends AbstractUseCase {
+  execute(inputModel) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const {
+      ids,
+      dispatch
+    } = inputModel;
+    const listItemSelection = repository.getListItemSelection();
+    listItemSelection.selectItems(ids);
+    listItemSelection.createDispatchProps().map(event => dispatch(event));
+    presenter.updateListItemSelection(listItemSelection.toObject());
+  }
+
+}
+
+export default Select;

package/es/library/behaviours/list-selection/domain/entities/ListItemSelection.js

@@ -1,34 +1,46 @@
+import Event from "../../../../custom-component/domain/entities/Event";
+import { LIST_SELECTION_RECORDS_DESELECTED, LIST_SELECTION_RECORDS_SELECTED, LIST_SELECTION_SELECTION_LIMIT_EXCEEDED } from "../../../../../bc/list-selection/Constants";
+
 class ListItemSelection {
   constructor(selected, itemIds, maxSelectionCount) {
+    let selectionStatus = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'na';
     this.selected = selected;
     this.itemIds = itemIds;
     this.maxSelectionCount = maxSelectionCount;
+    this.selectionStatus = selectionStatus;
     this.selected = this.selected.filter(selectedId => this.itemIds.includes(selectedId)); // NOTE: Remove items that does not exist
   }
 
-  selectItem(id) {
-    this.selected.push(id);
-  }
+  selectItems(ids) {
+    if (!ids) {
+      this.selectAllItems();
+      return;
+    }
 
-  deselectItem(id) {
-    this.selected = this.selected.filter(selectedId => selectedId !== id);
+    ids.forEach(id => !this.hasAllSelected() && this.selectItem(id));
   }
 
-  isSelected(id) {
-    return this.selected.includes(id);
+  deselectItems(ids) {
+    if (!ids) {
+      this.deselectAllItems();
+      return;
+    }
+
+    ids.forEach(id => this.deselectItem(id));
   }
 
-  hasAllSelected() {
-    const hasMaxSelected = this.selected.length >= this.maxSelectionCount;
-    const allItemsSelected = this.selected.length === this.itemIds.length && this.selected.length > 0;
-    return hasMaxSelected || allItemsSelected;
+  selectAllItems() {
+    this.itemIds.forEach(id => !this.hasAllSelected() && this.selectItem(id));
   }
 
-  getStrategy(id) {
-    return (this.isSelected(id) ? this.deselectItem : this.selectItem).bind(this);
+  deselectAllItems() {
+    this.selected = [];
+    this.selectionStatus = 'na';
   }
 
   toggleItems(ids) {
+    // let selectingItems = ids.filter(id => !this.isSelected(id));
+    // this.selectItems(selectingItems);
     for (let id of ids) {
       if (this.isSelected(id)) {
         this.deselectItem(id);
@@ -54,8 +66,68 @@ class ListItemSelection {
         }
       }
     } else {
-      this.selected = [];
+      this.deselectAllItems();
+    }
+  }
+
+  toggleUpto(id) {
+    let lastItem = this.selected.at(-1) || id;
+    let startIndex = this.itemIds.indexOf(lastItem);
+    let endIndex = this.itemIds.indexOf(id);
+    this.toggleRange(startIndex, endIndex);
+  }
+
+  toObject() {
+    return {
+      selected: this.selected,
+      hasAllSelected: this.hasAllSelected()
+    };
+  }
+
+  createDispatchProps(ids) {
+    const events = [];
+
+    if (this.selectionStatus === 'selected') {
+      events.push(new Event(LIST_SELECTION_RECORDS_SELECTED, {
+        recordIds: this.selected
+      }));
+    }
+
+    if (this.selectionStatus === 'deselected') {
+      events.push(new Event(LIST_SELECTION_RECORDS_DESELECTED, {
+        recordIds: ids
+      }));
+    }
+
+    if (this.selectionStatus === 'na' && this.hasAllSelected()) {
+      events.push(new Event(LIST_SELECTION_SELECTION_LIMIT_EXCEEDED));
     }
+
+    return events.map(event => event.toObject());
+  }
+
+  selectItem(id) {
+    this.selected.push(id);
+    this.selectionStatus = 'selected';
+  }
+
+  deselectItem(id) {
+    this.selected = this.selected.filter(selectedId => selectedId !== id);
+    this.selectionStatus = 'deselected';
+  }
+
+  isSelected(id) {
+    return this.selected.includes(id);
+  }
+
+  hasAllSelected() {
+    const hasMaxSelected = this.selected.length >= this.maxSelectionCount;
+    const allItemsSelected = this.selected.length === this.itemIds.length && this.selected.length > 0;
+    return hasMaxSelected || allItemsSelected;
+  }
+
+  getStrategy(id) {
+    return (this.isSelected(id) ? this.deselectItem : this.selectItem).bind(this);
   }
 
   toggleRange(startIndex, endIndex) {
@@ -94,20 +166,6 @@ class ListItemSelection {
     }
   }
 
-  toggleUpto(id) {
-    let lastItem = this.selected.at(-1) || id;
-    let startIndex = this.itemIds.indexOf(lastItem);
-    let endIndex = this.itemIds.indexOf(id);
-    this.toggleRange(startIndex, endIndex);
-  }
-
-  toObject() {
-    return {
-      selected: this.selected,
-      hasAllSelected: this.hasAllSelected()
-    };
-  }
-
 }
 
 export default ListItemSelection;

package/es/library/behaviours/list-selection/frameworks/ActionHandlerFactory.js

@@ -1,4 +1,4 @@
-import { LIST_SELECTION_TOGGLE_ALL, LIST_SELECTION_TOGGLE_ITEMS, LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE } from "../../../../bc/list-selection/Constants";
+import { LIST_SELECTION_DESELECT_ITEM, LIST_SELECTION_SELECT_ITEM, LIST_SELECTION_TOGGLE_ALL, LIST_SELECTION_TOGGLE_ITEMS, LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE } from "../../../../bc/list-selection/Constants";
 import InitializeController from "../adapters/controllers/InitializeController";
 import Repository from "../adapters/gateways/Repository";
 import Presenter from "../adapters/presenters/Presenter";
@@ -8,6 +8,8 @@ import AllSelectionController from "../adapters/controllers/AllSelectionControll
 import RangeSelectionController from "../adapters/controllers/RangeSelectionController";
 import UpdateController from "../adapters/controllers/UpdateController";
 import DestructController from "../adapters/controllers/DestructController";
+import SelectController from "../adapters/controllers/SelectController";
+import DeselectController from "../adapters/controllers/DeselectController";
 
 class ActionHandlerFactory {
   static create() {
@@ -29,6 +31,8 @@ class ActionHandlerFactory {
       ['MOUNT']: new InitializeController(service).handle,
       ['UPDATE_PROPERTIES']: new UpdateController(service).handle,
       ['UNMOUNT']: new DestructController(service).handle,
+      [LIST_SELECTION_SELECT_ITEM]: new SelectController(service).handle,
+      [LIST_SELECTION_DESELECT_ITEM]: new DeselectController(service).handle,
       [LIST_SELECTION_TOGGLE_ITEMS]: new SelectionController(service).handle,
       [LIST_SELECTION_TOGGLE_ALL]: new AllSelectionController(service).handle,
       [LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE]: new RangeSelectionController(service).handle

package/es/library/behaviours/local-storage/adapters/controllers/AbstractController.js

@@ -0,0 +1,7 @@
+export default class AbstractController {
+  constructor(service) {
+    this.service = service;
+    this.handle = this.handle.bind(this);
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/controllers/SetDataController.js

@@ -0,0 +1,22 @@
+import AbstractController from "./AbstractController";
+export class SetDataController extends AbstractController {
+  handle(event) {
+    const {
+      storeKey,
+      data
+    } = event.action.payload;
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      setDataUseCase
+    } = this.service;
+    setDataUseCase.updateDependency(state, updateState);
+    setDataUseCase.execute({
+      id: storeKey,
+      data
+    });
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/gateways/LocalStorageRepository.js

@@ -0,0 +1,26 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import Storage from "../../domain/entities/Storage";
+import { STORE_KEY } from "../../../../../bc/local-storage/Constants";
+export class LocalStorageRepository {
+  constructor() {
+    _defineProperty(this, "state", void 0);
+  }
+
+  init(state) {
+    this.state = state;
+  }
+
+  getStorage() {
+    const dataString = window.localStorage.getItem(STORE_KEY);
+    const data = typeof dataString === 'string' ? JSON.parse(dataString) : {};
+    const storage = new Storage(data);
+    return storage;
+  }
+
+  setStorage(storage) {
+    const data = storage.toObject();
+    window.localStorage.setItem(STORE_KEY, JSON.stringify(data));
+  }
+
+}

package/es/library/behaviours/local-storage/adapters/gateways/Service.js

@@ -0,0 +1,14 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import SetDataUseCase from "../../applications/usecases/SetDataUseCase";
+
+class Service {
+  constructor(dependencies) {
+    _defineProperty(this, "setDataUseCase", void 0);
+
+    this.setDataUseCase = new SetDataUseCase(dependencies);
+  }
+
+}
+
+export default Service;

package/es/library/behaviours/local-storage/adapters/presenters/Presenter.js

@@ -0,0 +1,38 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+export default class Presenter {
+  constructor() {
+    _defineProperty(this, "updateState", void 0);
+
+    _defineProperty(this, "state", void 0);
+  }
+
+  updateDependencies(state, updateState) {
+    this.state = state;
+    this.updateState = updateState; // this.updateState =
+    //   typeof updateState === 'function' ? updateState : () => {};
+  } // getViewModel(): BehaviourState | null {
+  //   return this.state.behaviours.localStorage;
+  // }
+
+
+  setBehaviourState(newState) {
+    const {
+      state
+    } = this;
+    this.state = { ...state,
+      behaviours: { ...state.behaviours,
+        localStorage: newState
+      }
+    };
+    this.updateState(this.state);
+  } // clearBehaviourState() {
+  //   this.setBehaviourState(null);
+  // }
+
+
+  updateBehaviourState(newState) {
+    this.setBehaviourState(newState);
+  }
+
+}

package/es/library/behaviours/local-storage/applications/usecases/SetDataUseCase.js

@@ -0,0 +1,17 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class SetDataUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const storage = repository.getStorage();
+    storage.setData(input.id, input.data);
+    repository.setStorage(storage);
+    presenter.updateBehaviourState(storage.toObject());
+  }
+
+}
+
+export default SetDataUseCase;

package/es/library/behaviours/local-storage/domain/entities/Storage.js

@@ -0,0 +1,28 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Storage {
+  constructor(data) {
+    _defineProperty(this, "data", void 0);
+
+    this.data = data;
+  }
+
+  setData(id, data) {
+    this.data[id] = data;
+  }
+
+  getData(id) {
+    return this.data[id];
+  }
+
+  deleteData(id) {
+    delete this.data[id];
+  }
+
+  toObject() {
+    return this.data;
+  }
+
+}
+
+export default Storage;

package/es/library/behaviours/local-storage/frameworks/LocalStorageBehaviourFactory.js

@@ -0,0 +1,28 @@
+import { STORE_KEY, STORE_REQUESTED } from "../../../../bc/local-storage/Constants";
+import Properties from "../../../../bc/local-storage/Properties";
+import { SetDataController } from "../adapters/controllers/SetDataController";
+import { LocalStorageRepository } from "../adapters/gateways/LocalStorageRepository";
+import Service from "../adapters/gateways/Service";
+import Presenter from "../adapters/presenters/Presenter";
+export default class LocalStorageBehaviourFactory {
+  static create() {
+    const presenter = new Presenter();
+    const repository = new LocalStorageRepository();
+    const service = new Service({
+      repository,
+      presenter
+    });
+    return {
+      name: 'localStorage',
+      setInitialState: () => {
+        const data = localStorage.getItem(STORE_KEY);
+        return typeof data === 'string' ? JSON.parse(data) : {};
+      },
+      properties: Properties,
+      eventHandlers: {
+        [STORE_REQUESTED]: new SetDataController(service).handle
+      }
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/Readme.md

@@ -0,0 +1,141 @@
+# Table Column Resizer Behavior
+
+This document outlines the properties, action handlers, and dispatching actions related to the Table Column Resizer Behavior. This behavior is designed to handle the resizing of table columns in a user interface.
+
+## Properties
+
+### `resizeConfig`
+
+The `resizeConfig` object contains configuration settings for the column resizer.
+
+```typescript
+type ResizeConfig = {
+  enabled: boolean;
+  isRTL: boolean;
+  maxWidth: number;
+  minWidth: number;
+};
+```
+
+#### Note: State and Properties
+
+The properties used by the behavior are derived from the state. The following state structure is expected:
+
+```typescript
+export type State = {
+  properties: {
+    resizeConfig: ResizeConfig;
+  };
+};
+```
+
+## Listening Action Handlers
+
+Action handlers respond to various actions related to column resizing. Each action handler receives a `dispatch`, `updateState`, and `state` parameter, so we only describe the payload here.
+
+### `MOUNT`
+
+This action is triggered when the column resizer is mounted.
+
+```typescript
+export type InitActionHandlerPayload = {
+  tableElement: HTMLElement;
+  columnName: string;
+  columnWidth: number;
+  initialPosition: number;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_STARTED`
+
+This action is triggered when a column resize operation starts.
+
+> Payload: `ResizeStartPayload`
+
+```typescript
+export type ResizeStartPayload = {
+  columnName: string;
+  initialPosition: number;
+  tableElement: HTMLElement;
+  columnWidth: number;
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_SCROLL`
+
+This action is triggered when the column is resized via a scroll event.
+
+> Payload: `ResizeByMouseActionPayload`
+
+```typescript
+export type ResizeByMouseActionPayload = {
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_MOUSE`
+
+This action is triggered when the column is resized via a mouse event.
+
+> Payload: `ResizeByScrollActionPayload`
+
+```typescript
+export type ResizeByScrollActionPayload = {}; // No payload needed
+```
+
+### `COLUMN_RESIZER#RESIZE_ENDED`
+
+This action is triggered when the column resize operation ends.
+
+> Payload: `ResizeEndActionPayload`
+
+```typescript
+export type ResizeEndActionPayload = {}; // No payload needed
+```
+
+#### Note: BaseActionParams
+
+Action handlers within the behavior expect payloads to be structured as shown below. This ensures consistency when handling actions.
+
+```typescript
+type BaseActionParams<Payload> = {
+  action: { payload: Payload };
+  dispatch: Dispatch;
+  updateState: UpdateState;
+  state: State;
+};
+```
+
+## Dispatching Actions from Behavior
+
+The behavior dispatches actions to update the state in response to user interactions.
+
+### `COLUMN_RESIZER#RESIZE_FINISHED`
+
+This action is dispatched when a column resize operation is completed.
+
+```typescript
+type ResizeFinishedAction = {
+  type: 'COLUMN_RESIZER#RESIZE_FINISHED';
+  payload: {
+    columnName: string;
+    oldWidth: number;
+    newWidth: number;
+  };
+};
+```
+
+#### Example Usage
+
+When using this behavior, to listen for the `ResizeFinishedAction`, you need to set up an action handler with the name `'COLUMN_RESIZER#RESIZE_FINISHED'`. This handler will receive the action's payload.
+
+```typescript
+{
+  actionHandlers: {
+    'COLUMN_RESIZER#RESIZE_FINISHED': (resizeFinishedAction: ResizeFinishedAction): void => {
+      // Handle the resize finished action
+    }
+  }
+}
+```