@zohodesk/library-platform 1.1.3-exp.2 → 1.1.3-temp-1

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

@@ -29,7 +29,8 @@ function RowView(_ref, ref) {
     isFocussed,
     selectionTooltip,
     isDroppable,
-    dropPosition
+    dropPosition,
+    isReOrderLoading
   } = state.properties;
   const {
     id,
@@ -44,7 +45,7 @@ function RowView(_ref, ref) {
     type,
     actions
   } = rowActionLocation;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, {
+  return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
     testId: id,
@@ -59,16 +60,14 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
+      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({
-    isSelectionEnabled,
     isReorderEnabled,
-    isKeyboardControlsEnabled
+    isReOrderLoading
   }), renderRowSelection({
     isSelectionEnabled,
-    isReorderEnabled,
-    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -84,14 +83,12 @@ function RowView(_ref, ref) {
     actions
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
-  })));
+  }));
 }
 
 function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
-    isReorderEnabled,
-    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -100,8 +97,6 @@ function renderRowSelection(_ref2) {
   } = _ref2;
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
-    isReorderEnabled: isReorderEnabled,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     id: id,
     tooltip: selectionTooltip,
     selected: isSelected,
@@ -110,32 +105,34 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderReorderer(_ref3) {
+const DragHandler = SortableHandle(_ref3 => {
   let {
-    isSelectionEnabled,
-    isReorderEnabled,
-    isKeyboardControlsEnabled
+    isDisabled
   } = _ref3;
-  const DragHandler = SortableHandle(_ref4 => {
-    let {
-      isSelectionEnabled,
-      isReorderEnabled,
-      isKeyboardControlsEnabled
-    } = _ref4;
-    return /*#__PURE__*/React.createElement("td", {
-      tabIndex: 0,
-      className: `${style.dragHandleWrapper} ${isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled ? style.paddingRight16 : isKeyboardControlsEnabled ? `${style.offsetLeft8} ${style.paddingLeft0} ${style.paddingRight8}` : `${style.offsetLeft0} ${style.paddingLeft8}`}`
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      customStyle: {
-        container: `${style.dragHandleContainer} `
-      }
-    }));
+  return /*#__PURE__*/React.createElement(DragHandle, {
+    isDisabled: isDisabled,
+    customStyle: {
+      container: style.dragHandleContainer
+    }
   });
-  return isReorderEnabled ? /*#__PURE__*/React.createElement(DragHandler, {
-    isSelectionEnabled: isSelectionEnabled,
-    isReorderEnabled: isReorderEnabled,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled
-  }) : null;
+});
+
+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) {

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

@@ -1,13 +1,12 @@
 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 {
     isSelectionEnabled,
-    isReorderEnabled,
-    isKeyboardControlsEnabled,
     id,
     tooltip,
     selected,
@@ -19,17 +18,13 @@ function RowSelection(_ref) {
     return null;
   }
 
-  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
-    $data_width: 56
-  } : {};
   return /*#__PURE__*/React.createElement(TableListSelect, {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
     customStyle: {
-      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.paddingRight16} ${style.offsetLeft8}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+      container: style.tableListSelectContainer
     },
-    $customProps_container: customPropsContainer,
     $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

@@ -23,9 +23,13 @@ export function parseCssNumberWithUnit(value) {
     unit: match[3] || ""
   };
 }
-export function setTableUserSelect(ref, value) {
+export function setTableInteractionClass(ref, className, add) {
   if (ref.current) {
-    ref.current.style.userSelect = value;
+    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) {
@@ -39,6 +43,8 @@ export function adjustHelperElementPosition(ref, draggingClass) {
       if (helperLeft && helperLeft.unit === 'px') {
         helperElement.style.left = `${helperLeft.number + TableScrollLeft}px`;
       }
+
+      helperElement.scrollLeft = TableScrollLeft;
     }
   }
 }
@@ -52,21 +58,29 @@ export function getDropIndicator(_ref) {
   const isMovingDown = newIndex > oldIndex;
   let dropIndex, normalizedDropIndex, dropPosition;
 
-  if (isMovingDown) {
-    dropIndex = newIndex < index ? newIndex : newIndex + 1;
+  if (index === newIndex && newIndex === 0) {
+    normalizedDropIndex = 1;
+    dropPosition = 'downward';
+  } else if (index === newIndex && newIndex === rowsLength - 1) {
+    normalizedDropIndex = rowsLength - 2;
+    dropPosition = 'upward';
   } else {
-    dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
-  }
+    if (isMovingDown) {
+      dropIndex = newIndex < index ? newIndex : newIndex + 1;
+    } else {
+      dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
+    }
 
-  normalizedDropIndex = dropIndex;
-  dropPosition = isMovingDown ? 'downward' : 'upward';
+    normalizedDropIndex = dropIndex;
+    dropPosition = isMovingDown ? 'downward' : 'upward';
 
-  if (dropIndex < 0) {
-    normalizedDropIndex = 0;
-    dropPosition = 'downward';
-  } else if (dropIndex >= rowsLength) {
-    normalizedDropIndex = rowsLength - 1;
-    dropPosition = 'upward';
+    if (dropIndex < 0) {
+      normalizedDropIndex = 0;
+      dropPosition = 'downward';
+    } else if (dropIndex >= rowsLength) {
+      normalizedDropIndex = rowsLength - 1;
+      dropPosition = 'upward';
+    }
   }
 
   return {

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/frameworks/TableConnectedView.js

@@ -8,6 +8,7 @@ function View(_ref, ref) {
   } = _ref;
   const {
     isLoading,
+    isReOrderLoading,
     data = [],
     rowActionsConfig,
     rowCursor,
@@ -30,6 +31,7 @@ function View(_ref, ref) {
   } = preferences ? preferences : {};
   return /*#__PURE__*/React.createElement(TableList, {
     reOrderConfig: reOrderConfig,
+    isReOrderLoading: isReOrderLoading,
     data: data,
     rowCursor: rowCursor,
     sortBy: sortBy,

package/es/platform/zform/adapters/presenter/FormTranslator.js

@@ -1,3 +1,4 @@
+import SectionTranslator from "./translators/SectionTranslator";
 let fieldTypeToUIType = {
   Text: 'TextBox',
   Textarea: 'TextArea',
@@ -45,133 +46,11 @@ export default class FormTranslator {
         }
       };
     } else {
-      let sections = state.behaviours.zform.sections.map(section => {
-        return {
-          type: uiMapping.sections[section.id],
-          id: section.id + '',
-          title: section.i18NLabel,
-          description: '',
-          //section.description,
-          isVisible: section.visibility,
-          fields: section.fields.map(field => {
-            let type = uiMapping.fields[field.apiName] || fieldTypeToUIType[field.type];
-
-            if (field.type == 'DateTime' || field.type == 'Date') {
-              let value = field.value;
-              return {
-                id: field.id,
-                label: field.i18NLabel,
-                type,
-                value: value || '',
-                //state.behaviours.zform.values[field.apiName],
-                name: field.apiName,
-                // placeholder: field.i18NLabel,//field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility
-              };
-            } else if (field.type == 'Picklist') {
-              let value = field.value;
-              let errorMessage = field.errorMessage || '';
-              return {
-                id: field.id,
-                label: field.i18NLabel,
-                options: field.pickListValues.map(picklistValue => {
-                  return {
-                    value: picklistValue.value,
-                    label: picklistValue.value
-                  };
-                }),
-                type,
-                subType: field.subType.toLowerCase(),
-                value: value || '',
-                //state.behaviours.zform.values[field.apiName],
-                name: field.apiName,
-                // placeholder: field.i18NLabel,//field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility,
-                errorMessage
-              };
-            } else if (field.type == 'Multiselect') {
-              let value = field.value;
-              let errorMessage = field.errorMessage || '';
-              return {
-                id: field.id,
-                label: field.i18NLabel,
-                options: field.pickListValues ? field.pickListValues.map(picklistValue => {
-                  return {
-                    value: picklistValue.value,
-                    label: picklistValue.value
-                  };
-                }) : [],
-                type,
-                subType: field.subType,
-                value: value || [],
-                //state.behaviours.zform.values[field.apiName],
-                name: field.apiName,
-                // placeholder: field.i18NLabel,//field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility,
-                errorMessage
-              };
-            } else if (field.type == 'Boolean') {
-              let value = field.value;
-              return {
-                id: field.id,
-                label: field.i18NLabel,
-                type,
-                value: value || false,
-                name: field.apiName,
-                // placeholder: field.i18NLabel,//field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility
-              };
-            } else if (field.type == 'Text') {
-              let value = field.value;
-              let errorMessage = field.errorMessage || '';
-              return {
-                type,
-                value: value || '',
-                //state.behaviours.zform.values[field.apiName],
-                name: field.apiName,
-                id: field.id,
-                label: field.i18NLabel,
-                tooltip: '',
-                //field.tooltip,
-                ePHI: false,
-                //field.ePHI,
-                placeholder: field.i18NLabel,
-                //field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility,
-                errorMessage
-              };
-            } else {
-              let value = field.value;
-              let errorMessage = field.errorMessage || '';
-              const fieldModified = {
-                type,
-                value: value || '',
-                //state.behaviours.zform.values[field.apiName],
-                name: field.apiName,
-                id: field.id,
-                label: field.i18NLabel,
-                tooltip: '',
-                //field.tooltip,
-                placeholder: field.i18NLabel,
-                //field.placeholder,
-                required: field.isMandatory,
-                isVisible: field.visibility,
-                errorMessage
-              };
-
-              if (ePHIFields[field.type]) {
-                fieldModified.ePHI = true;
-              }
-
-              return fieldModified;
-            }
-          })
-        };
+      let sections = SectionTranslator({
+        state,
+        fieldTypeToUIType,
+        ePHIFields,
+        uiMapping
       });
       return { ...state,
         viewModel: {

package/es/platform/zform/adapters/presenter/translators/SectionTranslator.js

@@ -0,0 +1,32 @@
+import * as FieldTranslators from "./fields";
+
+const SectionTranslator = _ref => {
+  let {
+    state,
+    fieldTypeToUIType,
+    ePHIFields,
+    uiMapping
+  } = _ref;
+  let sections = state.behaviours.zform.sections.map(section => {
+    return {
+      type: uiMapping.sections[section.id],
+      id: section.id + '',
+      title: section.i18NLabel,
+      description: section.description,
+      //section.description,
+      // isVisible: section.visibility,
+      isVisible: section.isVisible,
+      fields: section.fields.map(field => {
+        const fieldTranslator = FieldTranslators[field.type];
+        let type = uiMapping.fields[field.apiName] || fieldTypeToUIType[field.type];
+        return fieldTranslator({
+          field,
+          type
+        });
+      })
+    };
+  });
+  return sections;
+};
+
+export default SectionTranslator;