@zohodesk/library-platform 1.1.3 → 1.1.6

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/action-icon/frameworks/ui/ActionIconView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants";
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIconView.module.css";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -8,6 +10,8 @@ export default function ActionIconView(_ref, ref) {
   } = _ref;
   const {
     icon,
+    iconSize,
+    hasPadding,
     label,
     hoverVariant,
     isDisabled
@@ -18,9 +22,14 @@ export default function ActionIconView(_ref, ref) {
   return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
     $ui_iconName: icon,
+    $ui_size: JSON.stringify(iconSize),
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
+    hasPadding: hasPadding,
+    customStyle: hoverVariant === 'default' ? {
+      icon: style.cursor_default
+    } : undefined,
     $event_onClick: !isDisabled ? () => {
       dispatch({
         type: Constants.ACTION_ICON_CLICKED

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIconView.module.css

@@ -0,0 +1,3 @@
+.cursor_default {
+    cursor: default
+}

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/Button.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ButtonProperties from "../../../../../../cc/button/Properties";
+import ButtonEvents from "../../../../../../cc/button/Events";
+import ButtonView from "./ButtonView";
+let Button = createCustomComponent({
+  name: "Button",
+  View: ButtonView,
+  properties: ButtonProperties,
+  events: ButtonEvents,
+  eventHandlers: {}
+});
+export default Button;

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from '@zohodesk/components/es/Button/Button';
+import ButtonConstants from "../../../../../../cc/button/Constants";
+
+function ButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    text,
+    palette,
+    size,
+    isRounded,
+    isDisabled,
+    id,
+    status,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Button, {
+    getRef: ref,
+    text: text,
+    palette: palette,
+    size: size,
+    isRounded: isRounded,
+    isDisabled: isDisabled,
+    id: id,
+    status: status,
+    tooltip: tooltip,
+    onClick: () => {
+      dispatch({
+        type: ButtonConstants.BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default ButtonView;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ListItemProperties from "../../../../../../cc/list-item/Properties";
+import ListItemEvents from "../../../../../../cc/list-item/Events";
+import ListItemView from "./ListItemView";
+let ListItem = createCustomComponent({
+  name: "ListItem",
+  View: ListItemView,
+  properties: ListItemProperties,
+  events: ListItemEvents,
+  eventHandlers: {}
+});
+export default ListItem;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItemView.js

@@ -0,0 +1,122 @@
+import React from "react";
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import ListItemWithAvatar from '@zohodesk/components/es/ListItem/ListItemWithAvatar';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import ListItemConstants from "../../../../../../cc/list-item/Constants";
+
+function ListItemView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    isDisabled,
+    isActive,
+    text,
+    secondaryText,
+    size,
+    tooltip,
+    icon,
+    iconSize,
+    imgSrc,
+    imgName,
+    href,
+    target,
+    divider
+  } = state.properties;
+  const isLink = !!href;
+  let listItemElement = null;
+
+  if (!!imgSrc || !!imgName) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      imgSrc: imgSrc,
+      name: imgName,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      },
+      customProps: isLink ? {
+        ContainerProps: {
+          isLink,
+          href,
+          target
+        }
+      } : undefined
+    });
+  } else if (!!icon) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      iconName: icon,
+      iconSize: JSON.stringify(iconSize),
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  } else {
+    listItemElement = /*#__PURE__*/React.createElement(ListItem, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider === 'before' && /*#__PURE__*/React.createElement(DropDownSeparator, null), listItemElement, divider === 'after' && /*#__PURE__*/React.createElement(DropDownSeparator, null));
+}
+
+export default ListItemView;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import MoreDropdownProperties from "../../../../../../cc/more-dropdown/Properties";
+import MoreDropdownEvents from "../../../../../../cc/more-dropdown/Events";
+import MoreDropdownView from "./MoreDropdownView";
+let MoreDropdown = createCustomComponent({
+  name: "MoreDropdown",
+  View: MoreDropdownView,
+  properties: MoreDropdownProperties,
+  events: MoreDropdownEvents,
+  eventHandlers: {}
+});
+export default MoreDropdown;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdownView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import MoreDropdown from '@zohodesk-private/desk-components/es/MoreAction/MoreAction';
+import MoreDropdownConstants from "../../../../../../cc/more-dropdown/Constants";
+
+function MoreDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    heading,
+    options,
+    isDisabled,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(MoreDropdown, {
+    $customProps_container: {
+      title: heading,
+      customProps: {
+        ToggleDropDownProps: {
+          ref
+        }
+      }
+    },
+    $data_options: options,
+    $flag_isDisabled: isDisabled // $i18n_heading={heading}
+    ,
+    $i18n_moreIconTooltip: tooltip,
+    $event_onClick: id => {
+      dispatch({
+        type: MoreDropdownConstants.MORE_DROPDOWN_OPTION_CLICKED,
+        payload: {
+          id
+        }
+      });
+    }
+  });
+}
+
+export default MoreDropdownView;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -54,9 +54,10 @@ function TableColumnFilterView(_ref, ref) {
         searchText
       }
     });
-  }; // For SingleSelectFilter, pass selectedOption (object)
-  // For MultiSelectFilter, pass selectedOptions (array)
+  };
 
+  const isFiltered = isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0; // For SingleSelectFilter, pass selectedOption (object)
+  // For MultiSelectFilter, pass selectedOptions (array)
 
   const commonProps = {
     customProps: {
@@ -72,9 +73,12 @@ function TableColumnFilterView(_ref, ref) {
               }
             },
             customStyle: {
-              container: `${style.container} ${(isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0) ? style.active : ''}`
+              container: `${style.container} ${isFiltered ? style.active : ''}`
             }
-          }
+          },
+          iconButtonProps: isFiltered ? {
+            isActive: true
+          } : undefined
         }
       }
     },

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

@@ -6,8 +6,17 @@ import PropertiesChangeUseCase from "../../applications/usecases/PropertiesChang
 import MountController from "../../adapters/controllers/MountController";
 import UnmountController from "../../adapters/controllers/UnmountController";
 import PropertiesChangeController from "../../adapters/controllers/PropertiesChangeController";
+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 = {
@@ -21,9 +30,9 @@ export default class EventHandlersFactory {
     const unmountController = new UnmountController(destroyUseCase);
     const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
     return {
-      ['ActionEventMediator#MOUNT']: initializeController.handle,
-      ['ActionEventMediator#UPDATE_PROPERTIES']: propertiesChangeController.handle,
-      ['ActionEventMediator#UNMOUNT']: 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/client-actions-translator/index.js

@@ -20,8 +20,11 @@ export default class ClientActionsTranslator {
   }
 
   static transform(actions, context) {
-    const resolvedActions = ActionContextResolver.resolveActions(actions, context);
-    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, context, action.id));
+    const replacementContext = {
+      "@context": context
+    };
+    const resolvedActions = ActionContextResolver.resolveActions(actions, replacementContext);
+    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, replacementContext, action.id));
     const finalTransformedActions = evaluatedActions.map(action => this.transformToActionViewModel(action));
     return finalTransformedActions;
   }

package/es/platform/client-actions/translators/condition-resolver/field-evaluators/GetResolvedContextFieldValue.js

@@ -1,6 +1,7 @@
+import TemplateResolver from "../../../template-resolver";
 export function getResolvedContextFieldValue(context, field) {
-  if (field.includes(".")) {
-    let value = field.split(".").reduce((obj, key) => obj && obj[key], context);
+  if (field.includes('.')) {
+    let value = TemplateResolver.replaceContextVariables(field, context);
     return value;
   }
 

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,
@@ -45,10 +45,7 @@ export class ActionContextResolver {
   }
 
   static resolveActions(actions, context) {
-    const replacementContext = {
-      "@context": context
-    };
-    return actions ? actions.map(action => this.resolveAction(action, replacementContext)) : [];
+    return actions ? actions.map(action => this.resolveAction(action, context)) : [];
   }
 
 }