@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

package/es/library/behaviours/table-column-resizer/domain/entities/ResizeColumnCalculator.js

@@ -0,0 +1,84 @@
+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 class ResizeColumnCalculator {
+  constructor(table, mouse) {
+    _defineProperty(this, "initialScrollLeft", void 0);
+
+    _defineProperty(this, "initialPosition", void 0);
+
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    _defineProperty(this, "mouse", void 0);
+
+    this.table = table;
+    this.mouse = mouse;
+  }
+
+  toObject() {
+    return {
+      initialScrollLeft: this.initialScrollLeft,
+      mouseX: this.mouse.getMouseX(),
+      initialPosition: this.initialPosition
+    };
+  }
+
+  setInitialData(_ref) {
+    let {
+      initialScrollLeft,
+      mouseX,
+      initialPosition
+    } = _ref;
+    this.mouse.updateMouseX(mouseX);
+    this.initialScrollLeft = initialScrollLeft;
+    this.initialPosition = initialPosition;
+  }
+
+  setResizingColumn(resizingColumn) {
+    this.resizingColumn = resizingColumn;
+  }
+
+  calculateByMouseXChange() {
+    const {
+      initialPosition,
+      table,
+      mouse
+    } = this;
+    const mouseXWithinContainer = table.getMousePositionWithInTable(mouse.getMouseX());
+    const mouseMovedDistance = mouseXWithinContainer - initialPosition;
+    return mouseMovedDistance;
+  }
+
+  calculateByScrollLeftChange() {
+    const {
+      initialScrollLeft,
+      table
+    } = this;
+    const scrollMovedDistance = table.getScrollLeft() - initialScrollLeft;
+    return scrollMovedDistance;
+  }
+
+  calculateElementResizeInfo() {
+    // NOTE: only use Math.floor or Math.ceil logic here in this  method only more  other places
+    const {
+      table,
+      resizingColumn,
+      initialPosition
+    } = this;
+    const width = resizingColumn.getColumnWidth();
+    const scrollMovedDistance = this.calculateByScrollLeftChange();
+    const mouseMovedDistance = Math.floor(this.calculateByMouseXChange());
+    const rtlDelta = table.isRTL() ? -1 : 1;
+    const possibleWidth = width + mouseMovedDistance * rtlDelta + scrollMovedDistance * rtlDelta;
+    const allowedWidth = Math.round(resizingColumn.calculateConstrainedWidth(possibleWidth));
+    const mouseDelta = resizingColumn.getWidthDiff(allowedWidth) * rtlDelta;
+    resizingColumn.setResizedWidth(allowedWidth);
+    return {
+      allowedWidth,
+      initialPosition: table.getPositionWithInTable(initialPosition - scrollMovedDistance),
+      resizedPosition: table.getPositionWithInTable(initialPosition + mouseDelta - scrollMovedDistance)
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ResizerAutoScrollCalculator.js

@@ -0,0 +1,44 @@
+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 class ResizerAutoScrollCalculator {
+  constructor(resizingColumn, table) {
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    this.resizingColumn = resizingColumn;
+    this.table = table;
+  }
+
+  calculateDistanceToLeftWithinLimits() {
+    const {
+      table,
+      resizingColumn
+    } = this;
+    return table.isRTL() ? resizingColumn.distanceToReachMaxWidth() : resizingColumn.distanceToReachMinWidth();
+  }
+
+  calculateDistanceToRightWithinLimits() {
+    const {
+      table,
+      resizingColumn
+    } = this;
+    return table.isRTL() ? resizingColumn.distanceToReachMinWidth() : resizingColumn.distanceToReachMaxWidth();
+  }
+
+  calculateDistanceToAutoScroll(mouseX) {
+    const {
+      table
+    } = this;
+
+    if (table.isLeftEdgeReached(mouseX)) {
+      // Note to move reverse we multiplied by -1
+      return -1 * this.calculateDistanceToLeftWithinLimits();
+    } else if (table.isRightEdgeReached(mouseX)) {
+      return this.calculateDistanceToRightWithinLimits();
+    }
+
+    return 0;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ResizingColumn.js

@@ -0,0 +1,83 @@
+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_COLUMN_MINIMUM_WIDTH } from "./Constants";
+import { MinMaxLimiter } from "./MinMaxLimiter";
+export class ResizingColumn {
+  constructor(_ref) {
+    let {
+      columnName,
+      columnWidth,
+      resizingWidth,
+      minWidth,
+      maxWidth
+    } = _ref;
+
+    _defineProperty(this, "columnName", void 0);
+
+    _defineProperty(this, "columnWidth", void 0);
+
+    _defineProperty(this, "resizingWidth", void 0);
+
+    _defineProperty(this, "minWidth", void 0);
+
+    _defineProperty(this, "maxWidth", void 0);
+
+    this.columnName = columnName;
+    this.columnWidth = columnWidth;
+    this.resizingWidth = resizingWidth;
+    this.minWidth = minWidth;
+    this.maxWidth = maxWidth;
+  }
+
+  getColumnName() {
+    return this.columnName;
+  }
+
+  distanceToReachMinWidth() {
+    return this.resizingWidth - this.minWidth;
+  }
+
+  distanceToReachMaxWidth() {
+    return this.maxWidth - this.resizingWidth;
+  }
+
+  setResizedWidth(resizingWidth) {
+    this.resizingWidth = resizingWidth;
+  }
+
+  calculateConstrainedWidth(possibleWidth) {
+    const allowedWidth = MinMaxLimiter.limit({
+      min: Math.max(this.minWidth, TABLE_COLUMN_MINIMUM_WIDTH),
+      max: this.maxWidth,
+      value: possibleWidth
+    });
+    return allowedWidth;
+  }
+
+  getResizerEndResult() {
+    return {
+      columnName: this.columnName,
+      newWidth: this.resizingWidth,
+      oldWidth: this.columnWidth
+    };
+  }
+
+  getWidthDiff(allowedWidth) {
+    return allowedWidth - this.columnWidth;
+  }
+
+  getColumnWidth() {
+    return this.columnWidth;
+  }
+
+  toObject() {
+    return {
+      columnName: this.columnName,
+      columnWidth: this.columnWidth,
+      resizingWidth: this.resizingWidth,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/Table.js

@@ -0,0 +1,68 @@
+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_EDGE_DELTA } from "./Constants";
+import { MinMaxLimiter } from "./MinMaxLimiter";
+const SCROLL_MOVE_DELTA = 10;
+export class Table {
+  // private
+  // private
+  constructor(_ref) {
+    let {
+      isRTL,
+      scrollLeft,
+      containerLeft,
+      containerWidth
+    } = _ref;
+
+    _defineProperty(this, "_isRTL", void 0);
+
+    _defineProperty(this, "scrollLeft", void 0);
+
+    _defineProperty(this, "containerLeft", void 0);
+
+    _defineProperty(this, "containerWidth", void 0);
+
+    this._isRTL = isRTL;
+    this.scrollLeft = scrollLeft;
+    this.containerLeft = containerLeft;
+    this.containerWidth = containerWidth;
+  }
+
+  isRTL() {
+    return this._isRTL;
+  }
+
+  getScrollLeft() {
+    return this.scrollLeft;
+  }
+
+  isLeftEdgeReached(mouseX) {
+    return this.containerLeft + SCROLL_MOVE_DELTA >= mouseX;
+  }
+
+  isRightEdgeReached(mouseX) {
+    return this.containerLeft + this.containerWidth - SCROLL_MOVE_DELTA <= mouseX;
+  }
+
+  getPositionWithInTable(pos) {
+    return MinMaxLimiter.limit({
+      min: 0,
+      max: this.containerWidth,
+      value: pos - this.containerLeft
+    });
+  }
+
+  getMousePositionWithInTable(mouseX) {
+    const {
+      containerLeft,
+      containerWidth
+    } = this;
+    const mouseXWithinContainer = MinMaxLimiter.limit({
+      min: containerLeft + TABLE_EDGE_DELTA,
+      max: containerLeft + containerWidth - TABLE_EDGE_DELTA,
+      value: mouseX
+    });
+    return mouseXWithinContainer;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ColumnResizerRestoreModel.js

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

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ElementResizeInfo.js

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

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/IColumnResizer.js

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

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizeColumnCalculatorRestoreModel.js

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

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizerEndResult.js

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

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizingColumnRestoreModel.js

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

package/es/library/behaviours/table-column-resizer/frameworks/TableColumnResizerBehaviorFactory.js

@@ -0,0 +1,38 @@
+import { RESIZE_ENDED, RESIZE_MOUSE, RESIZE_SCROLL, RESIZE_STARTED } from "../../../../bc/table-column-resizer/Constants";
+import Properties from "../../../../bc/table-column-resizer/Properties";
+import ResizeByMouseController from "../adapters/controllers/ResizeByMouseController";
+import ResizeByScrollController from "../adapters/controllers/ResizeByScrollController";
+import ResizeEndController from "../adapters/controllers/ResizeEndController";
+import ResizeStartController from "../adapters/controllers/ResizeStartController";
+import Repository from "../adapters/gateways/Repository";
+import Service from "../adapters/gateways/Service";
+import { TableElementService } from "../adapters/gateways/TableElementService";
+import Presenter from "../adapters/presenters/Presenter";
+export default class TableColumnResizerBehaviorFactory {
+  static create() {
+    const repo = new Repository();
+    const presenter = new Presenter();
+    const tableService = new TableElementService();
+    const service = new Service({
+      repository: repo,
+      presenter,
+      tableService
+    });
+    return {
+      name: 'columnResizer',
+
+      setInitialState() {
+        return null;
+      },
+
+      properties: Properties,
+      eventHandlers: {
+        [RESIZE_STARTED]: new ResizeStartController(service).handle,
+        [RESIZE_SCROLL]: new ResizeByScrollController(service).handle,
+        [RESIZE_MOUSE]: new ResizeByMouseController(service).handle,
+        [RESIZE_ENDED]: new ResizeEndController(service).handle
+      }
+    };
+  }
+
+}

package/es/library/custom-component/applications/entities-factory/BehavioursFactory.js

@@ -30,7 +30,8 @@ class BehavioursFactory {
         name: behaviour.name,
         eventHandlers: EventHandlersFactory(newEventHandlers),
         properties: PropertiesFactory({
-          properties: behaviour.properties
+          properties: behaviour.properties,
+          componentName: ` Component "${input.name}" => behaviour "${behaviour.name}"`
         }),
         setIntialState: behaviour.setInitialState
       });

package/es/library/custom-component/applications/entities-factory/PropertiesFactory.js

@@ -18,4 +18,5 @@ export default function PropertiesFactory(_ref) {
   });
   let propertiesObject = new Properties(propertyMap, componentName);
   return propertiesObject;
+  ``;
 }

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.js

@@ -15,12 +15,12 @@ class UpdatePropertyUseCase extends AbstractUseCase {
     if (isUpdated) {
       let updatedProperties = component.getProperties();
       let state = component.getState();
+      presenter.render(state);
       let updatePropertyAction = component.getPropertyUpdateAction({
         currentProperties: updatedProperties,
         previousProperties: properties
       });
       eventManager.dispatch(updatePropertyAction);
-      presenter.render(state);
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -6,9 +6,12 @@ class UpdateStateUseCase extends AbstractUseCase {
       repository,
       presenter
     } = this.dependencies;
-    let component = repository.getComponent();
+    let component = repository.getComponent(); // let preState=component.getState();
+    // console.log(`preState ${component.getName()}`,preState)
+
     component.updateState(newState);
-    let state = component.getState();
+    let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
+
     presenter.render(state);
   }
 

package/es/library/custom-component/domain/entities/Behaviour.js

@@ -35,11 +35,11 @@ class Behaviour {
     return this.eventHandlers;
   }
 
-  getInitialState() {
+  getInitialState(propertiesValues) {
     if (this.setIntialState) {
       return {
         [this.name]: this.setIntialState({
-          properties: this.getProperties().getAllPropertiesValue()
+          properties: propertiesValues
         })
       };
     } else {

package/es/library/custom-component/domain/entities/Component.js

@@ -44,6 +44,10 @@ export default class Component {
     };
   }
 
+  getName() {
+    return this._name;
+  }
+
   getEventHandlers() {
     return this._eventHandlers.getEventHandlers();
   }
@@ -66,6 +70,11 @@ export default class Component {
     return state;
   }
 
+  getHandlerState() {
+    let state = this.mergeStateAndProps();
+    return state;
+  }
+
   setProperties(properties) {
     this._properties = properties;
   }
@@ -110,27 +119,24 @@ export default class Component {
   }
 
   updateProperties(jsonValidator, newProps) {
+    let isChanged = false;
     Object.keys(newProps).forEach(key => {
-      if (this._behavioursProperties[key]) {
-        let property = this._behavioursProperties[key];
-        let optionalSchema = property.getTypeMetadata().schema;
-
-        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], optionalSchema);
-
-        if (isValid) {
-          property.updateValue(newProps[key]);
-        }
-        /* return isValid */
+      let property = null;
 
+      if (this._behavioursProperties[key]) {
+        property = this._behavioursProperties[key];
       } else if (this._properties.findProperty(key)) {
-        let property = this._properties.findProperty(key);
+        property = this._properties.findProperty(key);
+      }
 
-        let schema = property.getTypeMetadata().schema;
+      if (property) {
+        const optionalSchema = property.getTypeMetadata().schema;
+        const propertyValue = newProps[key] === undefined ? property.getDefaultValue() : newProps[key];
 
-        let isValid = this._properties.validateSingleProperty(jsonValidator, key, newProps[key], schema);
+        const isValid = this._properties.validateSingleProperty(jsonValidator, key, propertyValue, optionalSchema);
 
         if (isValid) {
-          property.updateValue(newProps[key]);
+          isChanged = property.updateValue(newProps[key]) || isChanged;
         }
         /* return isValid */
 
@@ -140,19 +146,19 @@ export default class Component {
     });
     /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
 
-    return true;
+    return isChanged;
   }
 
   updateState(state) {
     this._state.updateState(state);
   }
 
-  getAllBehavioursInitialState() {
+  getAllBehavioursInitialState(propertiesValues) {
     let allBehavioursInitialState = {};
 
     this._behaviours.map(behaviour => {
       allBehavioursInitialState = { ...allBehavioursInitialState,
-        ...behaviour.getInitialState()
+        ...behaviour.getInitialState(propertiesValues)
       };
     });
 
@@ -165,10 +171,10 @@ export default class Component {
     const properties = this._properties.getAllPropertiesValue();
 
     const behavioursProperties = this.getAllBehavioursPropertiesWithValue();
-    const behaviours = this.getAllBehavioursInitialState();
     let allProperties = { ...properties,
       ...behavioursProperties
     };
+    const behaviours = this.getAllBehavioursInitialState(allProperties);
 
     const initialState = this._stateInitializer({
       properties: allProperties
@@ -209,7 +215,7 @@ export default class Component {
     let createActionToEventHandler = (eventHandlers, eventHandlerMap) => {
       eventHandlers.forEach((actionHandler, key) => {
         let eventHandler = new EventHandler(key, event => {
-          let state = this.getState();
+          let state = this.getHandlerState();
           let action = event.detail;
           actionHandler({
             action,

package/es/library/custom-component/domain/entities/DefaultSlotNameAppend.js

@@ -0,0 +1,10 @@
+export default {
+  name: "slotName",
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: 'string'
+    }
+  }
+};

package/es/library/custom-component/domain/entities/Properties.js

@@ -3,6 +3,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import Property from "./Property";
 import defaultAppendToActionPayload from "./DefaultAppendToActionPayload";
 import getRefPropertySchema from "../../../../cc/component/properties/getRefPropertySchema";
+import defaultSlotNameAppend from "./DefaultSlotNameAppend";
 export default class Properties {
   constructor(properties, componentName) {
     this.componentName = componentName;
@@ -12,6 +13,7 @@ export default class Properties {
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));
+    typeof properties.get("slotName") === "undefined" && this.data.set('slotName', new Property(defaultSlotNameAppend));
   }
 
   getAllPropertiesValue() {
@@ -72,7 +74,7 @@ export default class Properties {
 
   validate(validator, key, value, errors) {
     if (!this.data.has(key)) {
-      throw new Error(`props '${key}' not exist `);
+      throw new Error(this.componentName + ` props '${key}' not exist `);
     }
 
     let property = this.data.get(key);
@@ -112,16 +114,21 @@ export default class Properties {
   validateSingleProperty(validator, onePropKey, onePropValue, optionalSchema) {
     let schema = this.getSchema(onePropKey, optionalSchema); // INFO: Validate the property adheres to its schema
 
-    let isValid = validator(schema, onePropValue);
+    const {
+      isValid,
+      errors
+    } = validator(schema, onePropValue);
 
     if (!isValid) {
       const error = {
         key: onePropKey,
         componentName: this.componentName,
         value: onePropValue,
+        isValid,
+        errors,
         schema: schema
       };
-      console.log('Property validation failed', this.componentName, error);
+      console.log('Property validation failed', error);
       throw new Error('Property validation failed');
     }
 

package/es/library/custom-component/domain/entities/Property.js

@@ -48,7 +48,9 @@ export default class Property {
 
 
   updateValue(value) {
+    const isChanged = this.value !== value;
     this.value = value;
+    return isChanged;
   }
 
   clone() {

package/es/library/custom-component/frameworks/json-schema-validator/Validator.js

@@ -3,11 +3,27 @@ let jsonValidator = new Ajv();
 
 class Validator {
   static validate(schema, value) {
-    if (schema.type === "function" && typeof value === "function") {
-      return true;
+    let errors = [];
+
+    if (schema.type === 'function' && typeof value === 'function') {
+      return {
+        isValid: true,
+        errors
+      };
+    } // validate is a type guard for MyData - type is inferred from schema type
+
+
+    const validate = jsonValidator.compile(schema);
+    const isValid = validate(value);
+
+    if (!isValid) {
+      errors = validate.errors;
     }
 
-    return jsonValidator.validate(schema, value);
+    return {
+      isValid,
+      errors
+    };
   }
 
 }

package/es/library/custom-component/frameworks/ui/Compare.js

@@ -44,4 +44,29 @@ export default class Compare {
     return false;
   }
 
+  static deepEqual(obj1, obj2) {
+    if (obj1 === obj2) {
+      return true; // Same reference or primitive value
+    }
+
+    if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+      return false; // If not objects or one is null
+    }
+
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) {
+      return false; // Different number of properties
+    }
+
+    for (const key of keys1) {
+      if (!keys2.includes(key) || !Compare.deepEqual(obj1[key], obj2[key])) {
+        return false; // Recursively check nested properties
+      }
+    }
+
+    return true;
+  }
+
 }