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

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/UIComponentMapping.js

@@ -9,14 +9,17 @@ export default class UIComponentMapping {
 
     _defineProperty(this, "component", void 0);
 
-    _defineProperty(this, "properties", void 0);
+    _defineProperty(this, "propertiesValueMapping", void 0);
+
+    _defineProperty(this, "propertiesValueMappingMeta", void 0);
 
     _defineProperty(this, "eventMappings", void 0);
 
     this.id = uiComponentMappingObj.id;
     this.name = uiComponentMappingObj.name;
     this.component = uiComponentMappingObj.component;
-    this.properties = uiComponentMappingObj.properties;
+    this.propertiesValueMapping = uiComponentMappingObj.propertiesValueMapping;
+    this.propertiesValueMappingMeta = uiComponentMappingObj.propertiesValueMapping;
     this.eventMappings = new EventMappings(uiComponentMappingObj.eventMappings);
   }
 
@@ -25,7 +28,8 @@ export default class UIComponentMapping {
       id: this.id,
       name: this.name,
       component: this.component,
-      properties: this.properties,
+      propertiesValueMapping: this.propertiesValueMapping,
+      propertiesValueMappingMeta: this.propertiesValueMappingMeta,
       eventMappings: this.eventMappings.toArray().map(eventMapping => eventMapping.toObject())
     };
   }

package/es/platform/{zclient-actions/frameworks/ClientActionBehaviourFactory.js → client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory.js}

@@ -1,5 +1,5 @@
 import ActionsHandlersFactory from "./ActionsHandlersFactory";
-export default class ClientActionBehaviourFactory {
+export default class ClientActionsBehaviourFactory {
   static create(apiDetails) {
     return {
       name: 'zclientAction',

package/es/platform/client-actions/cc/action-event-mediator/Properties.js

@@ -0,0 +1,34 @@
+import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
+import { actionSchema } from "../dynamic-action-component/Properties";
+export const actionsSchema = {
+  type: 'array',
+  minItems: 0,
+  items: actionSchema
+};
+export default {
+  actions: {
+    required: true,
+    typeMetadata: {
+      schema: actionsSchema
+    }
+  },
+  renderComponentType: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  gap: {
+    required: false,
+    defaultValue: ActionViewGap.NONE,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: Object.values(ActionViewGap)
+      }
+    }
+  }
+};

package/es/platform/client-actions/cc/dynamic-action-component/Properties.js

@@ -0,0 +1,51 @@
+export const actionSchema = {
+  type: 'object',
+  properties: {
+    component: {
+      type: 'string'
+    },
+    id: {
+      type: 'string'
+    },
+    properties: {
+      type: 'object'
+    },
+    eventMappings: {
+      type: 'array',
+      minItems: 0,
+      items: {
+        type: 'object',
+        properties: {
+          action: {
+            type: 'object',
+            properties: {
+              event: {
+                type: 'string'
+              },
+              payload: {
+                type: 'object'
+              }
+            },
+            required: ['event', 'payload']
+          },
+          id: {
+            type: 'string'
+          },
+          sourceEvent: {
+            type: 'string'
+          }
+        },
+        required: ['sourceEvent', 'id']
+      }
+    }
+  },
+  required: ['component', 'properties']
+};
+export default {
+  action: {
+    required: true,
+    typeMetadata: {
+      schema: actionSchema
+    }
+  }
+};

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/MountController.js

@@ -0,0 +1,18 @@
+export default class MountController {
+  constructor(initializeUseCase) {
+    this.initializeUseCase = initializeUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      updateState
+    } = input;
+    this.initializeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.initializeUseCase.execute();
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/PropertiesChangeController.js

@@ -0,0 +1,26 @@
+export default class PropertiesChangeController {
+  constructor(propertiesChangeUseCase) {
+    this.propertiesChangeUseCase = propertiesChangeUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      action,
+      updateState
+    } = input;
+    const {
+      currentProperties,
+      previousProperties
+    } = action.payload;
+    this.propertiesChangeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.propertiesChangeUseCase.execute({
+      currentActions: currentProperties.actions,
+      previousActions: previousProperties.actions
+    });
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/UnmountController.js

@@ -0,0 +1,18 @@
+export default class UnmountController {
+  constructor(destroyUseCase) {
+    this.destroyUseCase = destroyUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      updateState
+    } = input;
+    this.destroyUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.destroyUseCase.execute();
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/gateway/Repository.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 ActionEventMediatorEntity from "../../domain/entities/ActionEventMediatorEntity";
+export default class Repository {
+  init(state) {
+    this.state = state;
+  }
+
+  constructor() {
+    _defineProperty(this, "element", void 0);
+
+    _defineProperty(this, "dispatch", void 0);
+
+    _defineProperty(this, "state", void 0);
+
+    this.element = null;
+  }
+
+  updateDependencies(element, state, dispatch) {
+    this.element = element;
+    this.dispatch = dispatch;
+    this.state = state;
+  }
+
+  getActionEventMediator() {
+    const {
+      actions
+    } = this.state.properties;
+    const {
+      handlers
+    } = this.state;
+    const actionEventMediator = new ActionEventMediatorEntity(handlers, actions, this.element, this.dispatch);
+    return actionEventMediator;
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/presenters/Presenter.js

@@ -0,0 +1,22 @@
+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.updateState = updateState;
+    this.state = state;
+  }
+
+  updateActionEventMediator(newState) {
+    this.state = { ...this.state,
+      ...newState
+    };
+    this.updateState(this.state);
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,15 @@
+export class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  updateDependencies(element, state, dispatch, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.updateDependencies(element, state, dispatch);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/DestroyUseCase.js

@@ -0,0 +1,13 @@
+import { AbstractUseCase } from "./AbstractUseCase";
+export default class DestroyUseCase extends AbstractUseCase {
+  execute() {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const actionLocation = repository.getActionEventMediator();
+    actionLocation.destroy();
+    presenter.updateActionEventMediator(actionLocation.toObject());
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/InitializeUseCase.js

@@ -0,0 +1,13 @@
+import { AbstractUseCase } from "./AbstractUseCase";
+export default class InitializeUseCase extends AbstractUseCase {
+  execute() {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const actionLocation = repository.getActionEventMediator();
+    actionLocation.initialize();
+    presenter.updateActionEventMediator(actionLocation.toObject());
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/PropertiesChangeUseCase.js

@@ -0,0 +1,17 @@
+import { AbstractUseCase } from "./AbstractUseCase";
+export default class PropertiesChangeUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const actionLocation = repository.getActionEventMediator();
+    const {
+      currentActions,
+      previousActions
+    } = input;
+    actionLocation.processActionsChange(currentActions, previousActions);
+    presenter.updateActionEventMediator(actionLocation.toObject());
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/domain/entities/ActionEventMediatorEntity.js

@@ -0,0 +1,108 @@
+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 TemplateResolver from "../../../../template-resolver";
+export default class ActionEventMediatorEntity {
+  constructor(handlers, actions, element, dispatch) {
+    this.handlers = handlers;
+    this.actions = actions;
+    this.element = element;
+    this.dispatch = dispatch;
+
+    _defineProperty(this, "contextResolver", void 0);
+  }
+
+  createEventHandlers(event) {
+    // TODO: this code needs to move to custom component or somewhere else
+    return e => {
+      const {
+        eventMappings,
+        ...payloadItems
+      } = e.detail.payload;
+      const eventMapping = eventMappings.find(eventMapping => eventMapping.sourceEvent === event);
+
+      if (!eventMapping) {
+        return;
+      }
+
+      const dispatchEvent = eventMapping.targetEvent;
+      const payload = eventMapping.payload;
+      const replacementContext = {
+        "@payload": payloadItems
+      };
+      const resolvedPayload = TemplateResolver.replaceContextVariablesInObject(payload, replacementContext);
+      this.dispatch({
+        type: dispatchEvent,
+        payload: resolvedPayload
+      });
+    };
+  }
+
+  getEventNames(actions) {
+    const eventNames = [];
+    actions.forEach(action => {
+      action.eventMappings.forEach(eventMapping => {
+        if (!eventNames.includes(eventMapping.sourceEvent)) {
+          eventNames.push(eventMapping.sourceEvent);
+        }
+      });
+    });
+    return eventNames;
+  }
+
+  listen(eventName) {
+    var _this$element;
+
+    const handler = this.createEventHandlers(eventName);
+    this.handlers[eventName] = handler;
+    (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.addEventListener(eventName, handler);
+  }
+
+  unListen(eventName) {
+    var _this$element2;
+
+    const handler = this.handlers[eventName];
+    (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.removeEventListener(eventName, handler);
+    this.handlers[eventName] = undefined;
+  }
+
+  compareEventNames(previousEventNames, currentEventNames) {
+    return previousEventNames.length === currentEventNames.length && previousEventNames.every((eventName, index) => eventName === currentEventNames[index]);
+  }
+
+  initialize() {
+    const eventNames = this.getEventNames(this.actions);
+    eventNames.forEach(eventName => {
+      this.listen(eventName);
+    });
+  }
+
+  processActionsChange(previousActions, currentActions) {
+    const previousEventNames = this.getEventNames(previousActions).sort();
+    const currentEventNames = this.getEventNames(currentActions).sort();
+
+    if (this.compareEventNames(previousEventNames, currentEventNames)) {
+      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/es/platform/client-actions/components/action-event-mediator/domain/entities/interfaces/IState.js

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

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator.js

@@ -0,0 +1,13 @@
+import { createCustomComponent } from "../../../../../../library/custom-component";
+import ActionEventMediatorProperties from "../../../../cc/action-event-mediator/Properties";
+import EventHandlersFactory from "./EventHandlersFactory";
+import ActionEventMediatorView from "./ActionEventMediatorView";
+export default createCustomComponent({
+  name: 'ActionEventMediator',
+  properties: ActionEventMediatorProperties,
+  setInitialState: () => ({
+    handlers: {}
+  }),
+  eventHandlers: EventHandlersFactory.create(),
+  View: ActionEventMediatorView
+});

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediatorView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import RowActionsRenderer from "../../../row-actions-renderer/frameworks/ui/RowActionsRenderer";
+import { ComponentRegistry } from "../../../../../../library";
+export default function ActionEventMediatorView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions,
+    renderComponentType,
+    gap
+  } = state.properties;
+  const ActionRenderComponent = ComponentRegistry.get(renderComponentType) || RowActionsRenderer;
+  return /*#__PURE__*/React.createElement(ActionRenderComponent, {
+    actions: actions,
+    gap: gap,
+    getRef: ref
+  });
+}

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,30 @@
+import Repository from "../../adapters/gateway/Repository";
+import Presenter from "../../adapters/presenters/Presenter";
+import InitializeUseCase from "../../applications/usecases/InitializeUseCase";
+import DestroyUseCase from "../../applications/usecases/DestroyUseCase";
+import PropertiesChangeUseCase from "../../applications/usecases/PropertiesChangeUseCase";
+import MountController from "../../adapters/controllers/MountController";
+import UnmountController from "../../adapters/controllers/UnmountController";
+import PropertiesChangeController from "../../adapters/controllers/PropertiesChangeController";
+export default class EventHandlersFactory {
+  static create() {
+    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 {
+      ['ActionEventMediator#MOUNT']: initializeController.handle,
+      ['ActionEventMediator#UPDATE_PROPERTIES']: propertiesChangeController.handle,
+      ['ActionEventMediator#UNMOUNT']: unmountController.handle
+    };
+  }
+
+}

package/es/platform/client-actions/components/dynamic-component/domain/entities/interfaces/IState.js

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

package/es/platform/client-actions/components/dynamic-component/frameworks/ui/DynamicActionComponent.js

@@ -0,0 +1,9 @@
+import { createCustomComponent } from "../../../../../../library/custom-component";
+import DynamicActionComponentProperties from "../../../../cc/dynamic-action-component/Properties";
+import DynamicActionComponentView from "./DynamicActionComponentView";
+export default createCustomComponent({
+  name: 'DynamicActionComponent',
+  properties: DynamicActionComponentProperties,
+  eventHandlers: {},
+  View: DynamicActionComponentView
+});

package/es/platform/client-actions/components/dynamic-component/frameworks/ui/DynamicActionComponentView.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../../library/custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../../../../library/dot/components/action-location/frameworks/ui/ActionComponentMapping";
+
+function DynamicComponentView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    action
+  } = state.properties;
+  const {
+    component,
+    properties,
+    eventMappings
+  } = action;
+  const Component = ComponentRegistry.get(component) || ActionComponentMapping[component];
+
+  if (!Component) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Error");
+  }
+
+  return /*#__PURE__*/React.createElement(Component, {
+    getRef: ref,
+    ...properties,
+    appendToActionPayload: {
+      eventMappings
+    }
+  });
+}
+
+export default DynamicComponentView;

package/es/platform/client-actions/components/interfaces/ActionViewModel.js

@@ -0,0 +1,7 @@
+export let ActionViewGap = /*#__PURE__*/function (ActionViewGap) {
+  ActionViewGap["NONE"] = "none";
+  ActionViewGap["SMALL"] = "small";
+  ActionViewGap["MEDIUM"] = "medium";
+  ActionViewGap["LARGE"] = "large";
+  return ActionViewGap;
+}({});

package/es/platform/client-actions/components/row-actions-renderer/domain/entities/interfaces/IState.js

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

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../cc/action-event-mediator/Properties";
+import RowActionsRendererView from "./RowActionsRendererView";
+import { ComponentRegistry } from "../../../../../../library";
+const RowActionsRendererComponent = createCustomComponent({
+  name: 'RowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: RowActionsRendererView
+});
+ComponentRegistry.register("RowActionsRenderer", RowActionsRendererComponent);
+export default RowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -0,0 +1,17 @@
+[dir=ltr] .actions {
+    padding-left: var(--zd_size4) 
+}[dir=rtl] .actions {
+    padding-right: var(--zd_size4) 
+}
+
+.gap_small {
+    gap: var(--zd_size4) 
+}
+
+.gap_medium {
+    gap: var(--zd_size8) 
+}
+
+.gap_large {
+    gap: var(--zd_size12) 
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRendererView.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import DynamicActionComponent from "../../../dynamic-component/frameworks/ui/DynamicActionComponent";
+import { ActionViewGap } from "../../../interfaces/ActionViewModel";
+// @ts-ignore
+import style from "./RowActionsRenderer.module.css";
+
+function RowActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions,
+    gap
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: `${style.actions} ${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+  }, actions.map((action, index) => {
+    return /*#__PURE__*/React.createElement(DynamicActionComponent, {
+      action: action,
+      key: index
+    });
+  }));
+}
+
+;
+export default RowActionsRendererView;

package/es/platform/client-actions/template-resolver/index.js

@@ -0,0 +1,44 @@
+export default class TemplateResolver {
+  static getPathValue(path, obj) {
+    return path.split('.').reduce(function (prev, curr) {
+      return prev !== undefined ? prev[curr] : undefined;
+    }, obj);
+  }
+
+  static replaceContextVariables(inputString, replacementObj) {
+    return inputString.replace(/{{(.*?)}}/g, (match, key) => {
+      let value = this.getPathValue(key.trim(), replacementObj);
+
+      if (Array.isArray(value) || value instanceof Object) {
+        return JSON.stringify(value);
+      }
+
+      return value !== undefined ? value.toString() : match;
+    });
+  }
+
+  static isOnlyContextVariables(inputString) {
+    return /^{{(.*?)}}$/.test(inputString);
+  }
+
+  static replaceContextVariablesInObject(properties, replacementObj) {
+    const replaced = {};
+    Object.entries(properties).forEach(_ref => {
+      let [key, value] = _ref;
+
+      if (typeof value === 'string' && this.isOnlyContextVariables(value)) {
+        const path = value.replace(/{{(.*?)}}/g, '$1');
+        const pathValue = this.getPathValue(path, replacementObj);
+        replaced[key] = pathValue !== undefined ? pathValue : `{{${path}}}`;
+      } else if (typeof value === 'string' && value.includes('{{')) {
+        replaced[key] = this.replaceContextVariables(value, replacementObj);
+      } else if (typeof value === 'object' && value !== null) {
+        replaced[key] = this.replaceContextVariablesInObject(value, replacementObj);
+      } else {
+        replaced[key] = value;
+      }
+    });
+    return Array.isArray(properties) ? Object.values(replaced) : replaced;
+  }
+
+}

package/es/platform/client-actions/template-resolver/interfaces/ITemplate.js

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