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

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

@@ -0,0 +1,141 @@
+# Table Column Resizer Behavior
+
+This document outlines the properties, event handlers, and dispatching events 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 Event Handlers
+
+Event handlers respond to various events related to column resizing. Each event handler receives a `dispatch`, `updateState`, and `state` parameter, so we only describe the payload here.
+
+### `MOUNT`
+
+This event is triggered when the column resizer is mounted.
+
+```typescript
+export type InitEventHandlerPayload = {
+  tableElement: HTMLElement;
+  columnName: string;
+  columnWidth: number;
+  initialPosition: number;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_STARTED`
+
+This event 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 event is triggered when the column is resized via a scroll event.
+
+> Payload: `ResizeByMouseEventPayload`
+
+```typescript
+export type ResizeByMouseEventPayload = {
+  mouseEvent: MouseEvent;
+};
+```
+
+### `COLUMN_RESIZER#RESIZE_MOUSE`
+
+This event is triggered when the column is resized via a mouse event.
+
+> Payload: `ResizeByScrollEventPayload`
+
+```typescript
+export type ResizeByScrollEventPayload = {}; // No payload needed
+```
+
+### `COLUMN_RESIZER#RESIZE_ENDED`
+
+This event is triggered when the column resize operation ends.
+
+> Payload: `ResizeEndEventPayload`
+
+```typescript
+export type ResizeEndEventPayload = {}; // No payload needed
+```
+
+#### Note: BaseEventParams
+
+Event handlers within the behavior expect payloads to be structured as shown below. This ensures consistency when handling events.
+
+```typescript
+type BaseEventParams<Payload> = {
+  action: { payload: Payload };
+  dispatch: Dispatch;
+  updateState: UpdateState;
+  state: State;
+};
+```
+
+## Dispatching Events from Behavior
+
+The behavior dispatches events to update the state in response to user interactions.
+
+### `COLUMN_RESIZER#RESIZE_FINISHED`
+
+This event is dispatched when a column resize operation is completed.
+
+```typescript
+type ResizeFinishedEvent = {
+  type: 'COLUMN_RESIZER#RESIZE_FINISHED';
+  payload: {
+    columnName: string;
+    oldWidth: number;
+    newWidth: number;
+  };
+};
+```
+
+#### Example Usage
+
+When using this behavior, to listen for the `ResizeFinishedEvent`, you need to set up an action handler with the name `'COLUMN_RESIZER#RESIZE_FINISHED'`. This handler will receive the event's payload.
+
+```typescript
+{
+  actionHandlers: {
+    'COLUMN_RESIZER#RESIZE_FINISHED': (resizeFinishedEvent: ResizeFinishedEvent): void => {
+      // Handle the resize finished event
+    }
+  }
+}
+```

package/es/library/behaviours/table-column-resizer/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/table-column-resizer/adapters/controllers/ResizeByMouseController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+export default class ResizeByMouseController extends AbstractController {
+  handle(event) {
+    const {
+      mouseEvent,
+      tableElement
+    } = event.action.payload;
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      resizeByMouseUsecase
+    } = this.service;
+    resizeByMouseUsecase.updateDependency(state, updateState, tableElement);
+    resizeByMouseUsecase.execute({
+      mouseX: mouseEvent.clientX
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/controllers/ResizeByScrollController.js

@@ -0,0 +1,18 @@
+import AbstractController from "./AbstractController";
+export default class ResizeByScrollController extends AbstractController {
+  handle(event) {
+    const {
+      tableElement
+    } = event.action.payload;
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      resizeByScrollUsecase
+    } = this.service;
+    resizeByScrollUsecase.updateDependency(state, updateState, tableElement);
+    resizeByScrollUsecase.execute({});
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/controllers/ResizeEndController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+export default class ResizeEndController extends AbstractController {
+  handle(event) {
+    const {
+      tableElement
+    } = event.action.payload;
+    const {
+      state,
+      updateState,
+      dispatch
+    } = event;
+    const {
+      resizeEndUsecase
+    } = this.service;
+    resizeEndUsecase.updateDependency(state, updateState, tableElement);
+    resizeEndUsecase.execute({
+      dispatch
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/controllers/ResizeStartController.js

@@ -0,0 +1,32 @@
+import AbstractController from "./AbstractController";
+export default class ResizeStartController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState
+    } = event;
+    const {
+      maxWidth,
+      minWidth
+    } = event.state.properties.resizeConfig;
+    const {
+      tableElement,
+      columnName,
+      columnWidth,
+      initialPosition
+    } = event.action.payload;
+    const {
+      resizeStartUsecase
+    } = this.service;
+    resizeStartUsecase.updateDependency(state, updateState, tableElement);
+    resizeStartUsecase.execute({
+      maxWidth,
+      minWidth,
+      // Resize Start Inputs
+      columnName,
+      initialPosition,
+      columnWidth
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/gateways/Repository.js

@@ -0,0 +1,32 @@
+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 ColumnResizer from "../../domain/entities/ColumnResizer";
+import { Mouse } from "../../domain/entities/Mouse";
+export default class Repository {
+  constructor() {
+    _defineProperty(this, "state", void 0);
+  }
+
+  init(state) {
+    this.state = state;
+  }
+
+  getColumnResizerEntity(table) {
+    const {
+      isEnabled: isEnabled
+    } = this.state.properties.resizeConfig;
+
+    if (isEnabled === false) {
+      return null;
+    }
+
+    const {
+      columnResizer
+    } = this.state.behaviours;
+    const mouse = new Mouse();
+    const columnResizerEntity = new ColumnResizer(table, mouse);
+    columnResizer && columnResizer.restoreModel && columnResizerEntity.restore(columnResizer.restoreModel);
+    return columnResizerEntity;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/gateways/Service.js

@@ -0,0 +1,23 @@
+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 ResizeByMouseUsecase from "../../applications/usecases/ResizeByMouseUsecase";
+import ResizeEndUsecase from "../../applications/usecases/ResizeEndUsecase";
+import ResizeStartUsecase from "../../applications/usecases/ResizeStartUsecase";
+import ResizeByScrollUsecase from "../../applications/usecases/ResizeByScrollUsecase";
+export default class Service {
+  constructor(dependencies) {
+    _defineProperty(this, "resizeByMouseUsecase", void 0);
+
+    _defineProperty(this, "resizeEndUsecase", void 0);
+
+    _defineProperty(this, "resizeStartUsecase", void 0);
+
+    _defineProperty(this, "resizeByScrollUsecase", void 0);
+
+    this.resizeByMouseUsecase = new ResizeByMouseUsecase(dependencies);
+    this.resizeEndUsecase = new ResizeEndUsecase(dependencies);
+    this.resizeStartUsecase = new ResizeStartUsecase(dependencies);
+    this.resizeByScrollUsecase = new ResizeByScrollUsecase(dependencies);
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/gateways/TableElementService.js

@@ -0,0 +1,36 @@
+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 { Table } from "../../domain/entities/Table";
+export class TableElementService {
+  constructor() {
+    _defineProperty(this, "tableElement", void 0);
+
+    _defineProperty(this, "state", void 0);
+  }
+
+  updateDependencies(tableElement, state) {
+    this.tableElement = tableElement;
+    this.state = state;
+  }
+
+  getTableEntity() {
+    const {
+      isRTL
+    } = this.state.properties.resizeConfig;
+    const {
+      scrollLeft
+    } = this.tableElement;
+    const {
+      left,
+      width
+    } = this.tableElement.getBoundingClientRect();
+    const tableEntity = new Table({
+      isRTL,
+      scrollLeft: scrollLeft,
+      containerLeft: left,
+      containerWidth: width
+    });
+    return tableEntity;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/presenters/AutoScroll.js

@@ -0,0 +1,50 @@
+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; }
+
+const AUTO_SCROLL_INTERVAL_TIME = 20;
+export class AutoScroll {
+  constructor() {
+    _defineProperty(this, "element", void 0);
+
+    _defineProperty(this, "interval", void 0);
+
+    _defineProperty(this, "remaining", void 0);
+
+    _defineProperty(this, "delta", void 0);
+
+    _defineProperty(this, "direction", void 0);
+
+    this.scrollStepByStep = this.scrollStepByStep.bind(this);
+  }
+
+  updateDependencies(element) {
+    this.element = element;
+  }
+
+  scrollStepByStep() {
+    if (!this.element) {
+      this.cancelAutoScroll();
+      return;
+    }
+
+    if (this.remaining <= this.delta) {
+      this.element.scrollBy(this.direction * this.remaining, 0);
+      this.cancelAutoScroll();
+      return;
+    }
+
+    this.remaining -= this.delta;
+    this.element.scrollBy(this.direction * this.delta, 0);
+  }
+
+  autoScrollLeft(left, delta) {
+    this.delta = delta;
+    this.direction = left < 0 ? -1 : 1;
+    this.remaining = left * this.direction;
+    this.interval = window.setInterval(this.scrollStepByStep, AUTO_SCROLL_INTERVAL_TIME);
+  }
+
+  cancelAutoScroll() {
+    window.clearInterval(this.interval);
+  }
+
+}

package/es/library/behaviours/table-column-resizer/adapters/presenters/Presenter.js

@@ -0,0 +1,53 @@
+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 { AutoScroll } from "./AutoScroll";
+export default class Presenter {
+  constructor() {
+    _defineProperty(this, "updateState", void 0);
+
+    _defineProperty(this, "state", void 0);
+
+    _defineProperty(this, "autoScroll", void 0);
+
+    this.autoScroll = new AutoScroll();
+  }
+
+  updateDependencies(state, updateState) {
+    this.state = state;
+    this.updateState = updateState;
+  }
+
+  setTableElement(table) {
+    this.autoScroll.updateDependencies(table);
+  }
+
+  autoScrollLeft(leftBy, delta) {
+    this.cancelAutoScroll();
+    leftBy && this.autoScroll.autoScrollLeft(leftBy, delta);
+  }
+
+  cancelAutoScroll() {
+    this.autoScroll.cancelAutoScroll();
+  }
+
+  setBehaviourState(newState) {
+    const {
+      state
+    } = this;
+    this.state = { ...state,
+      behaviours: { ...state.behaviours,
+        columnResizer: newState
+      }
+    };
+    this.updateState(this.state);
+  }
+
+  clearBehaviourState() {
+    this.setBehaviourState(null);
+  }
+
+  updateBehaviourState(newState) {
+    this.setBehaviourState(newState);
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/AbstractUsecase.js

@@ -0,0 +1,20 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  updateDependency(state, updateState, tableElement) {
+    const {
+      repository,
+      presenter,
+      tableService
+    } = this.dependencies;
+    repository.init(state);
+    tableService.updateDependencies(tableElement, state);
+    presenter.setTableElement(tableElement);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}
+
+export default AbstractUseCase;

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeByMouseUsecase.js

@@ -0,0 +1,30 @@
+import { SCROLL_MOVE_DELTA } from "../../domain/entities/Constants";
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeByMouseUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      mouseX
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    resizer.updateMouseX(mouseX);
+    const elementResizeInfo = resizer.getResizerState();
+    const distanceAvailableToMove = resizer.calculateDistanceToAutoScroll();
+    presenter.autoScrollLeft(distanceAvailableToMove, SCROLL_MOVE_DELTA);
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeByScrollUsecase.js

@@ -0,0 +1,27 @@
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeByScrollUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    const elementResizeInfo = resizer.getResizerState(); // const distanceAvailableToMove = resizer.calculateDistanceToAutoScroll();
+    // if (!distanceAvailableToMove) {
+    //   presenter.cancelAutoScroll();
+    // }
+
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeEndUsecase.js

@@ -0,0 +1,33 @@
+import AbstractUsecase from "./AbstractUsecase";
+import { RESIZE_FINISHED } from "../../../../../bc/table-column-resizer/Constants";
+export default class ResizeEndUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      dispatch
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    const result = resizer.getResizerEndResult();
+    presenter.cancelAutoScroll();
+    presenter.clearBehaviourState();
+    dispatch({
+      type: RESIZE_FINISHED,
+      payload: {
+        columnName: result.columnName,
+        oldWidth: result.oldWidth,
+        newWidth: result.newWidth
+      }
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeStartUsecase.js

@@ -0,0 +1,39 @@
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeStartUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      columnName,
+      minWidth,
+      maxWidth,
+      initialPosition,
+      columnWidth
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer) {
+      return;
+    }
+
+    resizer.updateMouseX(initialPosition);
+    resizer.resizeStart({
+      columnName,
+      table: tableEntity,
+      minWidth,
+      maxWidth,
+      initialPosition,
+      columnWidth
+    });
+    const elementResizeInfo = resizer.getResizerState();
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}