@zohodesk/library-platform 1.0.0-exp.1

package/src/library/dot/components/action-location/adapters/presenters/Presenter.ts

@@ -0,0 +1,19 @@
+import IPresenter from '../../usecases/interfaces/output/IPresenter';
+
+export default class Presenter implements IPresenter {
+  private updateState: Function;
+  private state: any;
+
+  updateDependencies(state: any, updateState: Function) {
+    this.updateState = updateState;
+    this.state = state;
+  }
+
+  updateActionLocation(state): void {
+    this.state = {
+      ...this.state,
+      ...state
+    };
+    this.updateState(this.state);
+  }
+}

package/src/library/dot/components/action-location/entities/ActionLocationEntity.ts

@@ -0,0 +1,98 @@
+import ActionViewModel from './interfaces/ActionViewModel';
+import { IActionLocation } from './interfaces/IActionLocation';
+
+export default class ActionLocationEntity implements IActionLocation {
+  constructor(
+    private handlers: {},
+    private actions: ActionViewModel[],
+    private element: HTMLElement | null,
+    private dispatch: Function
+  ) {}
+
+  private createEventHandlers(eventType: string): (e: CustomEvent) => void {
+    // TODO: this code needs to move to custom component or somewhere else
+    return e => {
+      const { eventMappings } = e.detail.payload;
+      const eventMapping = eventMappings.find(eventMapping => eventMapping.eventType === eventType);
+
+      if (!eventMapping) {
+        return;
+      }
+
+      const dispatchType = eventMapping.action.dispatchType;
+      const payload = eventMapping.payload;
+
+      this.dispatch({
+        type: dispatchType,
+        payload: payload
+      });
+    };
+  }
+
+  private getEventNames(actions: ActionViewModel[]) {
+    const eventNames = [];
+    actions.forEach(action => {
+      action.eventMappings.forEach(eventMapping => {
+        if (!eventNames.includes(eventMapping.eventType)) {
+          eventNames.push(eventMapping.eventType);
+        }
+      });
+    });
+
+    return eventNames;
+  }
+
+  private listen(eventName: string) {
+    const handler = this.createEventHandlers(eventName);
+    this.handlers[eventName] = handler;
+
+    this.element?.addEventListener(eventName, handler);
+  }
+
+  private unListen(eventName: string) {
+    const handler = this.handlers[eventName];
+    this.element?.removeEventListener(eventName, handler);
+    this.handlers[eventName] = undefined;
+  }
+
+  initialize() {
+    const eventNames = this.getEventNames(this.actions);
+    eventNames.forEach(eventName => {
+      this.listen(eventName);
+    });
+  }
+
+  processActionsChange(previousActions: ActionViewModel[], currentActions: ActionViewModel[]): void {
+    const previousEventNames = this.getEventNames(previousActions).sort();
+    const currentEventNames = this.getEventNames(currentActions).sort();
+    function compareEventNames() {
+      return (
+        previousEventNames.length === currentEventNames.length &&
+        previousEventNames.every((eventName, index) => eventName === currentEventNames[index])
+      );
+    }
+
+    if (compareEventNames()) {
+      return;
+    }
+
+    previousEventNames.forEach(eventName => {
+      this.unListen(eventName);
+    });
+
+    currentEventNames.forEach(eventName => {
+      this.listen(eventName);
+    });
+  }
+
+  destroy() {
+    const eventNames = this.getEventNames(this.actions);
+    eventNames.forEach(eventName => {
+      this.unListen(eventName);
+    });
+  }
+
+  toObject() {
+    return { handlers: this.handlers };
+  }
+}

package/src/library/dot/components/action-location/entities/interfaces/ActionViewModel.ts

@@ -0,0 +1,9 @@
+import EventMappingViewModel from './EventMappingViewModel';
+
+export interface Properties {}
+
+export default interface ActionViewModel {
+  type: string;
+  properties: Properties;
+  eventMappings: EventMappingViewModel[];
+}

package/src/library/dot/components/action-location/entities/interfaces/EventMappingViewModel.ts

@@ -0,0 +1,10 @@
+export interface Action {
+  id: string;
+  dispatchType: string;
+}
+
+export default interface EventMappingViewModel {
+  action: Action;
+  payload: any;
+  eventType: string;
+}

package/src/library/dot/components/action-location/entities/interfaces/IActionLocation.ts

@@ -0,0 +1,8 @@
+import ActionViewModel from './ActionViewModel';
+
+export interface IActionLocation {
+  initialize(): void;
+  destroy(): void;
+  processActionsChange(previousActions: ActionViewModel[], currentActions: ActionViewModel[]): void;
+  toObject(): object;
+}

package/src/library/dot/components/action-location/frameworks/ui/ActionLocation.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import ActionLocationProperties from '@cc/action-location/Properties';
+
+import EventHandlersFactory from './EventHandlersFactory';
+import ActionLocationView from './ActionLocationView';
+
+export default createCustomComponent({
+  name: 'ActionLocation',
+  properties: ActionLocationProperties,
+  setInitialState: () => ({ handlers: {} }),
+  eventHandlers: EventHandlersFactory.create(),
+  View: ActionLocationView
+});

package/src/library/dot/components/action-location/frameworks/ui/ActionLocationView.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ComponentRegistry from '@library/custom-component/frameworks/ui/ComponentRegistry';
+import ActionIcon from '@library/dot/legacy-to-new-arch/action-icon/ActionIcon';
+
+const defaultUiMapping = {
+  ActionIcon: ActionIcon
+};
+
+export default function ActionLocationView({ state, dispatch }: any, ref) {
+  const { actions } = state.properties;
+
+  return (
+    <Flex ref={ref} $flag_fullsize $ui_displayMode='flex' $ui_alignItems='center' $ui_justifyContent='end'>
+      {actions.map((action, index) => {
+        const { type, properties, eventMappings } = action;
+        const ActionUiType = defaultUiMapping[type] || ComponentRegistry.get(type);
+
+        return <ActionUiType key={index} {...properties} appendToActionPayload={{ eventMappings }} />;
+      })}
+    </Flex>
+  );
+}

package/src/library/dot/components/action-location/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,35 @@
+import EventHandlers from '@cc/component/EventHandlers';
+
+import Repository from '../../adapters/gateway/Repository';
+import Presenter from '../../adapters/presenters/Presenter';
+
+import InitializeUseCase from '../../usecases/interactors/InitializeUseCase';
+import DestroyUseCase from '../../usecases/interactors/DestroyUseCase';
+import PropertiesChangeUseCase from '../../usecases/interactors/PropertiesChangeUseCase';
+
+import MountController from '../../adapters/controllers/MountController';
+import UnmountController from '../../adapters/controllers/UnmountController';
+import PropertiesChangeController from '../../adapters/controllers/PropertiesChangeController';
+import ActionLocationConstants from '@cc/action-location/Constants';
+
+export default class EventHandlersFactory {
+  static create(): EventHandlers {
+    const repository = new Repository();
+    const presenter = new Presenter();
+    const dependencies = { repository, presenter };
+
+    const initializeUseCase = new InitializeUseCase(dependencies);
+    const destroyUseCase = new DestroyUseCase(dependencies);
+    const propertiesChangeUseCase = new PropertiesChangeUseCase(dependencies);
+
+    const initializeController = new MountController(initializeUseCase);
+    const unmountController = new UnmountController(destroyUseCase);
+    const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
+
+    return {
+      [ActionLocationConstants.MOUNT]: initializeController.handle,
+      [ActionLocationConstants.UPDATE_PROPERTIES]: propertiesChangeController.handle,
+      [ActionLocationConstants.UNMOUNT]: unmountController.handle
+    };
+  }
+}

package/src/library/dot/components/action-location/usecases/interactors/AbstractUseCase.ts

@@ -0,0 +1,13 @@
+import IUseCase from '@cc/architecture/IUseCase';
+import { UseCaseDependencies } from '../interfaces/UseCaseDependencies';
+
+export abstract class AbstractUseCase<Input> implements IUseCase<Input> {
+  constructor(protected dependencies: UseCaseDependencies) {}
+
+  updateDependencies(element: HTMLElement, state, dispatch: Function, updateState: Function) {
+    this.dependencies.repository.updateDependencies(element, state, dispatch);
+    this.dependencies.presenter.updateDependencies(state, updateState);
+  }
+
+  abstract execute(input: Input): void;
+}

package/src/library/dot/components/action-location/usecases/interactors/DestroyUseCase.ts

@@ -0,0 +1,12 @@
+import { AbstractUseCase } from './AbstractUseCase';
+
+export default class DestroyUseCase extends AbstractUseCase<{}> {
+  execute() {
+    const { repository, presenter } = this.dependencies;
+    const actionLocation = repository.getActionLocation();
+
+    actionLocation.destroy();
+
+    presenter.updateActionLocation(actionLocation.toObject());
+  }
+}

package/src/library/dot/components/action-location/usecases/interactors/InitializeUseCase.ts

@@ -0,0 +1,12 @@
+import { AbstractUseCase } from './AbstractUseCase';
+
+export default class InitializeUseCase extends AbstractUseCase<{}> {
+  execute() {
+    const { repository, presenter } = this.dependencies;
+    const actionLocation = repository.getActionLocation();
+
+    actionLocation.initialize();
+
+    presenter.updateActionLocation(actionLocation.toObject());
+  }
+}

package/src/library/dot/components/action-location/usecases/interactors/PropertiesChangeUseCase.ts

@@ -0,0 +1,14 @@
+import PropertiesChangeUseCaseInputModel from '../interfaces/input/PropertiesChangeUseCaseInputModel';
+import { AbstractUseCase } from './AbstractUseCase';
+
+export default class PropertiesChangeUseCase extends AbstractUseCase<PropertiesChangeUseCaseInputModel> {
+  execute(input: PropertiesChangeUseCaseInputModel) {
+    const { repository, presenter } = this.dependencies;
+    const actionLocation = repository.getActionLocation();
+    const { currentActions, previousActions } = input;
+
+    actionLocation.processActionsChange(currentActions, previousActions);
+
+    presenter.updateActionLocation(actionLocation.toObject());
+  }
+}

package/src/library/dot/components/action-location/usecases/interfaces/UseCaseDependencies.ts

@@ -0,0 +1,4 @@
+import IRepository from './gateways/IRepository';
+import IPresenter from './output/IPresenter';
+
+export type UseCaseDependencies = { repository: IRepository; presenter: IPresenter };

package/src/library/dot/components/action-location/usecases/interfaces/gateways/IRepository.ts

@@ -0,0 +1,6 @@
+import ActionLocationEntity from '../../../entities/ActionLocationEntity';
+
+export default interface IRepository {
+  updateDependencies(element: HTMLElement, state, dispatch: Function): void;
+  getActionLocation(): ActionLocationEntity;
+}

package/src/library/dot/components/action-location/usecases/interfaces/input/PropertiesChangeUseCaseInputModel.ts

@@ -0,0 +1,8 @@
+import ActionViewModel from '../../../entities/interfaces/ActionViewModel';
+
+type PropertiesChangeUseCaseInputModel = {
+  previousActions: ActionViewModel[];
+  currentActions: ActionViewModel[];
+};
+
+export default PropertiesChangeUseCaseInputModel;

package/src/library/dot/components/action-location/usecases/interfaces/output/IPresenter.ts

@@ -0,0 +1,4 @@
+export default interface IPresenter {
+  updateDependencies(state: any, updateState: Function): void;
+  updateActionLocation(state): void;
+}

package/src/library/dot/components/table-list/adapters/controllers/AbstractController.ts

@@ -0,0 +1,9 @@
+abstract class AbstractController {
+  constructor() {
+    this.handle = this.handle.bind(this);
+  }
+
+  abstract handle(event): void;
+}
+
+export default AbstractController;

package/src/library/dot/components/table-list/adapters/controllers/FieldChangeController.ts

@@ -0,0 +1,22 @@
+import AbstractController from "./AbstractController";
+import { TableListConstants } from "@cc/table-list";
+
+class FieldChangeController extends AbstractController {
+  handle(event) {
+    const { state, dispatch, action } = event;
+    const { properties } = state;
+    const { fieldName, value } = action.payload;
+    const { id } = properties;
+
+    dispatch({
+      type: TableListConstants.TABLE_LIST_FIELD_CHANGED,
+      payload: {
+        rowId: id,
+        fieldName,
+        value
+      }
+    });
+  }
+}
+
+export default FieldChangeController;

package/src/library/dot/components/table-list/adapters/controllers/FieldClickController.ts

@@ -0,0 +1,21 @@
+import AbstractController from './AbstractController';
+import { TableListConstants } from '@cc/table-list';
+
+class FieldClickController extends AbstractController {
+  handle(event): void {
+    const { state, dispatch, action } = event;
+    const { properties } = state;
+    const { fieldName } = action.payload;
+    const { id } = properties;
+
+    dispatch({
+      type: TableListConstants.TABLE_LIST_FIELD_CLICKED,
+      payload: {
+        rowId: id,
+        fieldName
+      }
+    });
+  }
+}
+
+export default FieldClickController;

package/src/library/dot/components/table-list/adapters/controllers/RowClickController.ts

@@ -0,0 +1,18 @@
+import { TableListConstants } from '@cc/table-list';
+import AbstractController from './AbstractController';
+
+class RowClickController extends AbstractController {
+  handle(event): void {
+    const { dispatch, action } = event;
+    const { id } = action.payload;
+
+    dispatch({
+      type: TableListConstants.TABLE_LIST_ROW_CLICKED,
+      payload: {
+        rowId: id
+      }
+    });
+  }
+}
+
+export default RowClickController;

package/src/library/dot/components/table-list/adapters/controllers/ScrollController.ts

@@ -0,0 +1,24 @@
+import { ZLIST_FETCH_MORE } from '@bc/zlist/Constants';
+import AbstractController from './AbstractController';
+
+class ScrollController extends AbstractController {
+  handle(event) {
+    const { dispatch } = event;
+    const { scrollEvent } = event.action.payload;
+    const element = scrollEvent.currentTarget;
+
+    const { scrollHeight, scrollTop, clientHeight } = element;
+    const DELTA = 10;
+
+    const isScrollingDown = scrollTop !== 0;
+    const isEndReached = isScrollingDown && scrollHeight - Math.ceil(scrollTop) < clientHeight + DELTA;
+    if (isEndReached) {
+      dispatch({
+        type: ZLIST_FETCH_MORE,
+        payload: {}
+      });
+    }
+  }
+}
+
+export default ScrollController;

package/src/library/dot/components/table-list/adapters/controllers/SelectAllController.ts

@@ -0,0 +1,14 @@
+import { LIST_SELECTION_TOGGLE_ALL } from '@bc/list-selection/Constants';
+import AbstractController from './AbstractController';
+
+class SelectAllController extends AbstractController {
+  handle(event): void {
+    const { dispatch } = event;
+
+    dispatch({
+      type: LIST_SELECTION_TOGGLE_ALL
+    });
+  }
+}
+
+export default SelectAllController;

package/src/library/dot/components/table-list/adapters/controllers/SelectItemController.ts

@@ -0,0 +1,23 @@
+import { LIST_SELECTION_TOGGLE_ITEMS, LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE } from '@bc/list-selection/Constants';
+import AbstractController from './AbstractController';
+
+class SelectItemController extends AbstractController {
+  handle(event): void {
+    const { dispatch, action } = event;
+    const { id, event: browser_event } = action.payload;
+
+    if (browser_event.shiftKey) {
+      dispatch({
+        type: LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE,
+        payload: { id }
+      });
+    } else {
+      dispatch({
+        type: LIST_SELECTION_TOGGLE_ITEMS,
+        payload: { selected: [id] }
+      });
+    }
+  }
+}
+
+export default SelectItemController;

package/src/library/dot/components/table-list/adapters/controllers/SortByController.ts

@@ -0,0 +1,16 @@
+import { SORTBY_SORT } from '@bc/sort-by/Constants';
+import AbstractController from './AbstractController';
+
+class SortByController extends AbstractController {
+  handle(event) {
+    const { dispatch, action } = event;
+    const { id, name } = action.payload;
+
+    dispatch({
+      type: SORTBY_SORT,
+      payload: { id, name }
+    });
+  }
+}
+
+export default SortByController;

package/src/library/dot/components/table-list/adapters/controllers/SortedController.ts

@@ -0,0 +1,15 @@
+import { ZLIST_FETCH_SORTED } from '@bc/zlist/Constants';
+import AbstractController from './AbstractController';
+
+class SortedController extends AbstractController {
+  handle(event): void {
+    const { action, dispatch } = event;
+
+    dispatch({
+      type: ZLIST_FETCH_SORTED,
+      payload: action.payload
+    });
+  }
+}
+
+export default SortedController;

package/src/library/dot/components/table-list/adapters/controllers/index.ts

@@ -0,0 +1,7 @@
+export { default as SelectItemController } from './SelectItemController';
+export { default as SelectAllController } from './SelectAllController';
+export { default as ScrollController } from './ScrollController';
+export { default as SortByController } from './SortByController';
+export { default as SortedController } from './SortedController';
+export { default as FieldChangeController } from './FieldChangeController';
+export { default as FieldClickController } from './FieldClickController';

package/src/library/dot/components/table-list/adapters/presenters/TableTranslator.ts

@@ -0,0 +1,35 @@
+class TableTranslator {
+  static translate(state) {
+    state = {
+      ...state,
+      properties: {
+        ...state.properties,
+        data: {
+          ...state.properties.data,
+          headers: state.properties.data.headers.map(header => {
+            const sortOrder = state?.behaviours?.sortBy?.id === header.id ? state?.behaviours?.sortBy?.order : 'none';
+            return {
+              ...header,
+              sortOrder,
+              sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+            };
+          }),
+          rows: state.properties.data.rows.map((row, index) => {
+            return {
+              ...row,
+              isSelected: state?.behaviours?.selection?.selected.includes(row.id),
+              isSelectable: state?.behaviours?.selection?.selected.includes(row.id) || !state?.behaviours?.selection?.hasAllSelected,
+              selectionTooltip:
+                !state?.behaviours?.selection?.selected.includes(row.id) && state?.behaviours?.selection?.hasAllSelected
+                  ? state.properties.selectionConfig.limitExceedAlertMessage
+                  : `Record ${index + 1}`
+            };
+          })
+        }
+      }
+    };
+    return state;
+  }
+}
+
+export default TableTranslator;

package/src/library/dot/components/table-list/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,31 @@
+import { TableListConstants } from '@cc/table-list';
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } from '../../adapters/controllers';
+import TableRowConstants from '@cc/table-list/row/Constants';
+import { SORTBY_SORTED } from '@bc/sort-by/Constants';
+import RowClickController from '../../adapters/controllers/RowClickController';
+
+class EventHandlersFactory {
+  static create() {
+    const controller = {
+      listSelectItem: new SelectItemController().handle,
+      listSelectAll: new SelectAllController().handle,
+      scroll: new ScrollController().handle,
+      sortBy: new SortByController().handle,
+      sorted: new SortedController().handle,
+      fieldChange: new FieldChangeController().handle,
+      fieldClick: new FieldClickController().handle
+    };
+    return {
+      [TableRowConstants.TABLE_ROW_CLICKED]: new RowClickController().handle,
+      [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: controller.listSelectItem,
+      [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: controller.listSelectAll,
+      [TableListConstants.TABLE_LIST_SCROLLED]: controller.scroll,
+      [TableListConstants.TABLE_LIST_SORTED]: controller.sortBy,
+      [SORTBY_SORTED]: controller.sorted,
+      [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: controller.fieldChange,
+      [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: controller.fieldClick
+    };
+  }
+}
+
+export default EventHandlersFactory;

package/src/library/dot/components/table-list/frameworks/ui/TableList.tsx

@@ -0,0 +1,36 @@
+import { TableListProperties } from '@cc/table-list';
+import { createCustomComponent } from '../../../../../custom-component';
+import ListItemSelectionBehaviourFactory from '../../../../../behaviours/list-selection/frameworks/ListItemSelectionBehaviourFactory';
+import TableTranslator from '../../adapters/presenters/TableTranslator';
+import TableListView from './TableListView';
+import EventHandlersFactory from './EventHandlersFactory';
+import SortByBehaviourFactory from '@library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory';
+
+const TableList = createCustomComponent({
+  name: 'TableList',
+  View: TableListView,
+  properties: TableListProperties,
+  setInitialState: ({ properties }) => ({}),
+  transformState: TableTranslator.translate,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: [
+    ListItemSelectionBehaviourFactory.create(),
+    SortByBehaviourFactory.create(),
+    {
+      name: 'resizerState',
+      properties: {},
+      eventHandlers: {},
+      setInitialState: () => ({
+        currentlyResizingColumn: '',
+        isCurrentlyResizing: false,
+        resizedColumnsWidth: {},
+        extraWidth: 0,
+        initialPosition: 0,
+        resizedPosition: 0,
+        tooltip: ''
+      })
+    }
+  ]
+});
+
+export default TableList;