@zohodesk/library-platform 1.1.1 → 1.1.2

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
+    }
+  }
+}
+```

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/controllers/interfaces/ActionHandlerParams.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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/interfaces/InputDependencies.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/gateways/IRepo.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/gateways/IService.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/gateways/ITableElementService.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/input/ResizeByMouseInputModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/input/ResizeByScrollInputModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/input/ResizeEndInputModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/input/ResizeStartInputModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/input/StateStructure.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/output/BehaviourState.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/applications/interfaces/output/IPresenter.js

@@ -0,0 +1 @@
+export {};

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;