@zohodesk/library-platform 1.1.3-exp.3 → 1.1.3-exp.4

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/Row.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import TableRow from '@zohodesk-private/desk-components/es/table/TableList/TableList';
+import DragHandle from '@zohodesk-private/desk-components/es/DragHandle/DragHandle';
 import RowSelection from "./RowSelection";
 import Columns from "./Columns";
 import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
 import style from "../../css/TableList.module.css";
 
@@ -19,12 +21,16 @@ function RowView(_ref, ref) {
     dispatch
   } = helpers;
   const {
+    isReorderEnabled,
     isSelectionEnabled,
     isSelected,
     isSelectable,
     isKeyboardControlsEnabled,
     isFocussed,
-    selectionTooltip
+    selectionTooltip,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   } = state.properties;
   const {
     id,
@@ -43,7 +49,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -54,9 +60,13 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
+      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
       $pointer: style[`rowCursor_${cursor}`]
     }
-  }, renderRowSelection({
+  }, renderReorderer({
+    isReorderEnabled,
+    isReOrderLoading
+  }), renderRowSelection({
     isSelectionEnabled,
     id,
     selectionTooltip,
@@ -71,6 +81,8 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions
+  }), isDroppable && /*#__PURE__*/React.createElement("div", {
+    className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
 }
 
@@ -93,24 +105,54 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderColumns(_ref3) {
+const DragHandler = SortableHandle(_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(DragHandle, {
+    isDisabled: isDisabled,
+    customStyle: {
+      container: style.dragHandleContainer
+    }
+  });
+});
+
+function renderReorderer(_ref4) {
+  let {
+    isReorderEnabled,
+    isReOrderLoading
+  } = _ref4;
+
+  if (!isReorderEnabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("td", {
+    tabIndex: 0,
+    className: style.dragHandleWrapper
+  }, /*#__PURE__*/React.createElement(DragHandler, {
+    isDisabled: isReOrderLoading
+  }));
+}
+
+function renderColumns(_ref5) {
   let {
     columns,
     isFlexibleColumns
-  } = _ref3;
+  } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
     isFlexibleColumns: isFlexibleColumns
   });
 }
 
-function renderRowActions(_ref4) {
+function renderRowActions(_ref6) {
   let {
     hasActions,
     columnWidth,
     actions,
     type
-  } = _ref4;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     columnWidth: columnWidth,

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/RowSelection.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import TableListSelect from '@zohodesk-private/desk-components/es/table/TableListSelect/TableListSelect';
-import { TableListConstants } from "../../../../../../../../cc/table-list";
+import { TableListConstants } from "../../../../../../../../cc/table-list"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function RowSelection(_ref) {
   let {
@@ -20,6 +22,9 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    customStyle: {
+      container: style.tableListSelectContainer
+    },
     $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,

package/es/library/dot/components/table-list/frameworks/utils/getHeaderClasses.js

@@ -0,0 +1,37 @@
+export default function getTableListHeaderClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListHeader-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListHeader-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-selection';
+  }
+
+  return 'tableListHeader';
+}

package/es/library/dot/components/table-list/frameworks/utils/getTableListClassName.js

@@ -0,0 +1,37 @@
+export default function getTableListClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListRow-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListRow-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-selection';
+  }
+
+  return 'tableListRow';
+}

package/es/library/dot/components/table-list/frameworks/utils/reOrder.js

@@ -0,0 +1,90 @@
+function reorderImmutableArray(arr, fromIndex, toIndex) {
+  const start = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+
+  if (start >= 0 && start < arr.length) {
+    const end = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(start, 1);
+    arr.splice(end, 0, item);
+  }
+}
+
+export function reorderArray(arr, fromIndex, toIndex) {
+  const copy = [...arr];
+  reorderImmutableArray(copy, fromIndex, toIndex);
+  return copy;
+}
+export function parseCssNumberWithUnit(value) {
+  if (typeof value !== "string") return null;
+  const regex = /^(-?\d+(\.\d+)?)([a-z%]*)$/i;
+  const match = value.trim().match(regex);
+  if (!match) return null;
+  return {
+    number: parseFloat(match[1]),
+    unit: match[3] || ""
+  };
+}
+export function setTableInteractionClass(ref, className, add) {
+  if (ref.current) {
+    if (add && !ref.current.classList.contains(className)) {
+      ref.current.classList.add(className);
+    } else if (!add && ref.current.classList.contains(className)) {
+      ref.current.classList.remove(className);
+    }
+  }
+}
+export function adjustHelperElementPosition(ref, draggingClass) {
+  if (ref.current) {
+    const TableScrollLeft = ref.current.scrollLeft;
+    const helperElement = ref.current.querySelector(`.${draggingClass}`);
+
+    if (helperElement) {
+      const helperLeft = parseCssNumberWithUnit(helperElement.style.left);
+
+      if (helperLeft && helperLeft.unit === 'px') {
+        helperElement.style.left = `${helperLeft.number + TableScrollLeft}px`;
+      }
+
+      helperElement.scrollLeft = TableScrollLeft;
+    }
+  }
+}
+export function getDropIndicator(_ref) {
+  let {
+    index,
+    oldIndex,
+    newIndex,
+    rowsLength
+  } = _ref;
+  const isMovingDown = newIndex > oldIndex;
+  let dropIndex, normalizedDropIndex, dropPosition;
+
+  if (index === newIndex && newIndex === 0) {
+    normalizedDropIndex = 1;
+    dropPosition = 'downward';
+  } else if (index === newIndex && newIndex === rowsLength - 1) {
+    normalizedDropIndex = rowsLength - 2;
+    dropPosition = 'upward';
+  } else {
+    if (isMovingDown) {
+      dropIndex = newIndex < index ? newIndex : newIndex + 1;
+    } else {
+      dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
+    }
+
+    normalizedDropIndex = dropIndex;
+    dropPosition = isMovingDown ? 'downward' : 'upward';
+
+    if (dropIndex < 0) {
+      normalizedDropIndex = 0;
+      dropPosition = 'downward';
+    } else if (dropIndex >= rowsLength) {
+      normalizedDropIndex = rowsLength - 1;
+      dropPosition = 'upward';
+    }
+  }
+
+  return {
+    index: normalizedDropIndex,
+    position: dropPosition
+  };
+}

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -27,7 +27,7 @@ function TextAreaView(_ref, ref) {
     text: value,
     isReadOnly: readonly,
     isDisabled: disabled,
-    animated: true,
+    animated: !readonly && !disabled,
     size: "xsmall",
     customAttributes: {
       required

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

@@ -0,0 +1,96 @@
+import { createCustomComponent } from "../../../../../../library/custom-component";
+import ActionEventMediatorProperties from "../../../../cc/action-event-mediator/Properties";
+import EventHandlersFactory from "./EventHandlersFactory";
+import ActionEventMediatorView from "./ActionEventMediatorView"; // import ClientActionsSDKFactory from '../../../../behaviour/zclient-actions/frameworks/sdk/ClientActionsSDKFactory'; TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
+
+import ClientActionsBehaviourFactory from "../../../../behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
+import getClientActions from "../../../../../data-source/http-template/getClientActions";
+import ClientActionsTranslator from "../../../../translators/client-actions-translator";
+import FetchGateWay from "../../../../../zhttp/adapters/gateway/FetchGateWay";
+import APITemplate from "../../../../../zdata-source/domain/entities/APITemplate";
+import TemplateHelpers from "../../../../../zdata-source/adapters/gateways/TemplateHelpers";
+;
+const windowWrapper = window;
+const ClientActionsAdapterUtils = {
+  getClientActionsAPIDetails(args) {
+    const apiTemplate = new APITemplate(getClientActions, new TemplateHelpers());
+    args.servicePrefix = 'supportapi/zd';
+    args.orgName = windowWrapper.currentOrg.portalName;
+    const apiDetails = apiTemplate.getApiDetails(args);
+    apiDetails.options = {
+      headers: {
+        orgId: windowWrapper.currentOrg.id
+      },
+      method: apiDetails.method
+    };
+    return apiDetails;
+  },
+
+  transform(input) {
+    return ClientActionsTranslator.transform(input, {
+      departmentName: windowWrapper.currentDepartment.sanitizedName,
+      orgId: windowWrapper.currentOrg.id,
+      orgName: windowWrapper.currentOrg.portalName,
+      servicePrefix: 'supportapi/zd'
+    });
+  }
+
+};
+const ClientActionsAdapter = {
+  createEventHandler(clientScript) {
+    return event => {
+      let response = {
+        event: event,
+        sdk: {}
+      }; // response.sdks.clientActions = ClientActionsSDKFactory.create({ TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
+      //     state: event.state,
+      //     dispatch: event.dispatch
+      // });
+
+      clientScript(response);
+    };
+  },
+
+  createActionToEventHandlers(clientScripts) {
+    const actionEventHandlers = {};
+    Object.keys(clientScripts).map(targetEvent => {
+      const clientScript = clientScripts[targetEvent];
+      actionEventHandlers[targetEvent] = ClientActionsAdapter.createEventHandler(clientScript);
+    });
+    return actionEventHandlers;
+  },
+
+  fetchClientActions(args) {
+    const apiDetails = ClientActionsAdapterUtils.getClientActionsAPIDetails(args);
+    const fetchGateway = new FetchGateWay(window.fetch.bind(window));
+    return fetchGateway.fetch(apiDetails.url, apiDetails.options).then(response => {
+      return response.json();
+    }).then(response => {
+      if (response.errorCode) {
+        return Promise.reject(response);
+      } else {
+        const actions = ClientActionsAdapterUtils.transform(response);
+        return Promise.resolve(actions);
+      }
+    });
+  },
+
+  getClientActionComponent: clientScripts => {
+    return createCustomComponent({
+      name: 'ClientActionsAdapter',
+      properties: ActionEventMediatorProperties,
+      setInitialState: () => ({
+        handlers: {}
+      }),
+      eventHandlers: { ...EventHandlersFactory.createClientActionsAdapterEventHandlers(),
+        ...ClientActionsAdapter.createActionToEventHandlers(clientScripts)
+      },
+      behaviours: [ClientActionsBehaviourFactory.create({
+        getClientActions: getClientActions
+      })],
+      View: ActionEventMediatorView
+    });
+  }
+};
+export const getClientActionsAdapter = ClientActionsAdapter.getClientActionComponent;
+export const fetchClientActions = ClientActionsAdapter.fetchClientActions;

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

@@ -9,6 +9,14 @@ import PropertiesChangeController from "../../adapters/controllers/PropertiesCha
 import LifeCycleEvents from "../../../../../../cc/component/LifeCycleEventsEnum";
 export default class EventHandlersFactory {
   static create() {
+    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ActionEventMediator');
+  }
+
+  static createClientActionsAdapterEventHandlers() {
+    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ClientActionsAdapter');
+  }
+
+  static createClientActionsLifeCycleEventHandlers(componentName) {
     const repository = new Repository();
     const presenter = new Presenter();
     const dependencies = {
@@ -22,9 +30,9 @@ export default class EventHandlersFactory {
     const unmountController = new UnmountController(destroyUseCase);
     const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
     return {
-      [`ActionEventMediator#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
-      [`ActionEventMediator#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
-      [`ActionEventMediator#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
+      [`${componentName}#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
+      [`${componentName}#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
+      [`${componentName}#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
     };
   }
 

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

@@ -22,6 +22,7 @@ export default class TemplateResolver {
   }
 
   static replaceContextVariablesInObject(properties, replacementObj) {
+    if (!properties) return {};
     const replaced = {};
     Object.entries(properties).forEach(_ref => {
       let [key, value] = _ref;

package/es/platform/client-actions/translators/context-resolver/index.js

@@ -4,7 +4,7 @@ export class ActionContextResolver {
 
   static resolveContextInEventMappingPayload(eventMapping, context) {
     return { ...eventMapping,
-      payloadValueMapping: TemplateResolver.replaceContextVariablesInObject(eventMapping.payloadValueMappingMeta, context)
+      payloadValueMapping: TemplateResolver.replaceContextVariablesInObject(eventMapping.payloadValueMapping, context)
     };
   }
 
@@ -14,9 +14,9 @@ export class ActionContextResolver {
       pattern
     } = condition;
     const resolvedFields = fields.map(field => {
-      const resolvedValue = TemplateResolver.replaceContextVariables(field.value.join(","), templateContext);
+      const resolvedValue = TemplateResolver.replaceContextVariables(field.value.join(','), templateContext);
       return { ...field,
-        value: resolvedValue.split(",")
+        value: resolvedValue.split(',')
       };
     });
     return { ...condition,
@@ -31,10 +31,10 @@ export class ActionContextResolver {
 
   static resolveAction(action, context) {
     const eventMappings = action.uiComponentMapping.eventMappings;
-    const conditions = action.conditionsMeta;
+    const conditions = action.conditions;
     const resolvedEventMappings = eventMappings.map(eventMapping => this.resolveContextInEventMappingPayload(eventMapping, context));
-    const resolvedProperty = this.resolveContextInProperties(action.uiComponentMapping.propertiesValueMappingMeta, context);
-    const resolveConditionValues = this.resolveConditionValueContext(conditions, context);
+    const resolvedProperty = this.resolveContextInProperties(action.uiComponentMapping.propertiesValueMapping, context);
+    const resolveConditionValues = conditions ? this.resolveConditionValueContext(conditions, context) : conditions;
     return { ...action,
       conditions: resolveConditionValues,
       uiComponentMapping: { ...action.uiComponentMapping,

package/es/platform/components/table-connected/adapters/controllers/ColumnChooserOpenedController.js

@@ -10,7 +10,7 @@ export default class ColumnChooserOpenedController extends AbstractController {
       fields: availableFields,
       selectedFields
     } = zfield;
-    const columnChooserOptionsOrder = selectedFields;
+    const columnChooserOptionsOrder = [...selectedFields];
     availableFields.forEach(field => {
       if (!selectedFields.includes(field.name)) {
         columnChooserOptionsOrder.push(field.name);

package/es/platform/components/table-connected/adapters/controllers/ReOrderFinishController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+import { ZLIST_RECORD_REORDER } from "../../../../../bc/zlist/Constants";
+export class ReOrderFinishController extends AbstractController {
+  handle(event) {
+    const {
+      dispatch
+    } = event;
+    const {
+      oldIndex,
+      newIndex
+    } = event.action.payload;
+    dispatch({
+      type: ZLIST_RECORD_REORDER,
+      payload: {
+        oldIndex,
+        newIndex
+      }
+    });
+  }
+
+}

package/es/platform/components/table-connected/adapters/resources/ErrorPrinter.js

@@ -0,0 +1,20 @@
+export default class ErrorPrinter {
+  static printError(error) {
+    console.error('Error occurred:', error);
+  }
+
+  static displaySchemaErrors(title, errors) {
+    let dataName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '(root)';
+    console.group(title.msg, ...title.styles);
+    errors.forEach((_ref, i) => {
+      let {
+        dataPath,
+        keyword,
+        message
+      } = _ref;
+      console.error(`%c${i + 1}. %c${dataName + dataPath}%c → ${keyword} ${message}`, 'color: initial;', 'color: #FF6F61; font-weight: bold;', 'color: #FFA500;');
+    });
+    console.groupEnd();
+  }
+
+}