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

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

@@ -0,0 +1,125 @@
+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 { ResizingColumn } from "./ResizingColumn";
+import { ResizeColumnCalculator } from "./ResizeColumnCalculator";
+import { ResizerAutoScrollCalculator } from "./ResizerAutoScrollCalculator";
+export default class ColumnResizer {
+  constructor(table, mouse) {
+    _defineProperty(this, "calculator", void 0);
+
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    _defineProperty(this, "mouse", void 0);
+
+    _defineProperty(this, "autoScrollCalculator", void 0);
+
+    this.calculator = new ResizeColumnCalculator(table, mouse);
+    this.resizingColumn = null;
+    this.table = table;
+    this.mouse = mouse;
+  }
+
+  updateMouseX(mouseX) {
+    this.mouse.updateMouseX(mouseX);
+  }
+
+  restore(restoreModel) {
+    const {
+      calculatorData,
+      resizingColumnData
+    } = restoreModel;
+    this.updateMouseX(calculatorData.mouseX);
+    this.calculator.setInitialData(calculatorData);
+
+    if (resizingColumnData) {
+      this.resizingColumn = new ResizingColumn(resizingColumnData);
+      this.calculator.setResizingColumn(this.resizingColumn);
+      this.autoScrollCalculator = new ResizerAutoScrollCalculator(this.resizingColumn, this.table);
+    }
+  }
+
+  toObject() {
+    return {
+      resizingColumnData: this.resizingColumn ? this.resizingColumn.toObject() : null,
+      calculatorData: this.calculator.toObject()
+    };
+  }
+
+  isResizingHappening() {
+    return this.resizingColumn !== null;
+  }
+
+  calculateDistanceToAutoScroll() {
+    return this.autoScrollCalculator.calculateDistanceToAutoScroll(this.mouse.getMouseX());
+  }
+
+  getResizerEndResult() {
+    if (!this.resizingColumn) {
+      // return null
+      return {
+        columnName: '',
+        newWidth: 0,
+        oldWidth: 0
+      };
+    }
+
+    return this.resizingColumn.getResizerEndResult();
+  }
+
+  resizeStart(_ref) {
+    let {
+      columnName,
+      columnWidth,
+      minWidth,
+      maxWidth,
+      table,
+      initialPosition
+    } = _ref;
+    this.resizingColumn = new ResizingColumn({
+      columnName,
+      columnWidth,
+      resizingWidth: columnWidth,
+      minWidth,
+      maxWidth
+    });
+    this.calculator.setInitialData({
+      initialScrollLeft: table.getScrollLeft(),
+      mouseX: initialPosition,
+      initialPosition
+    });
+    this.calculator.setResizingColumn(this.resizingColumn);
+    return this.getResizerState();
+  }
+
+  getResizerEmptyState() {
+    return {
+      isResizing: false,
+      columnName: '',
+      initialPosition: 0,
+      resizedPosition: 0,
+      allowedWidth: 0
+    };
+  }
+
+  getResizerState() {
+    const {
+      resizingColumn
+    } = this;
+
+    if (!resizingColumn) {
+      return this.getResizerEmptyState();
+    }
+
+    const elementResizeInfo = this.calculator.calculateElementResizeInfo();
+    return {
+      isResizing: this.isResizingHappening(),
+      columnName: resizingColumn.getColumnName(),
+      initialPosition: elementResizeInfo.initialPosition,
+      resizedPosition: elementResizeInfo.resizedPosition,
+      allowedWidth: elementResizeInfo.allowedWidth
+    };
+  }
+
+}

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

@@ -0,0 +1,3 @@
+export const TABLE_COLUMN_MINIMUM_WIDTH = 100;
+export const TABLE_EDGE_DELTA = 20;
+export const SCROLL_MOVE_DELTA = 10;

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

@@ -0,0 +1,11 @@
+export class MinMaxLimiter {
+  static limit(_ref) {
+    let {
+      min,
+      max,
+      value
+    } = _ref;
+    return Math.min(Math.max(min, value), max);
+  }
+
+}

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

@@ -0,0 +1,16 @@
+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 Mouse {
+  constructor() {
+    _defineProperty(this, "mouseX", void 0);
+  }
+
+  updateMouseX(mouseX) {
+    this.mouseX = mouseX;
+  }
+
+  getMouseX() {
+    return this.mouseX;
+  }
+
+}

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/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/{Events.js → Event.js}

@@ -1,7 +1,9 @@
 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; }
 
-class Action {
-  constructor(type, payload) {
+class Event {
+  constructor(type) {
+    let payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     _defineProperty(this, "type", void 0);
 
     _defineProperty(this, "payload", void 0);
@@ -18,6 +20,13 @@ class Action {
     return this.payload;
   }
 
+  toObject() {
+    return {
+      type: this.type,
+      payload: this.payload
+    };
+  }
+
 }
 
-export default Action;
+export default Event;