@zohodesk/library-platform 1.2.2-exp.6 → 1.2.3

package/es/platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer.module.css

@@ -1,23 +1,23 @@
 .wrapper {
-    max-width: 100%
+    max-width: 100% 
 }
 
 .gap_small {
-    gap: 4px
+    gap: var(--zd_size4) 
 }
 
 .gap_xmedium {
-    gap: 6px
+    gap: var(--zd_size6) 
 }
 
 .gap_medium {
-    gap: 8px
+    gap: var(--zd_size8) 
 }
 
 .gap_large {
-    gap: 10px
+    gap: var(--zd_size10) 
 }
 
 .gap_xlarge {
-    gap: 12px
+    gap: var(--zd_size12) 
 }

package/es/platform/client-actions/components/interfaces/ActionViewModel.js

@@ -6,11 +6,4 @@ export let ActionViewGap = /*#__PURE__*/function (ActionViewGap) {
   ActionViewGap["LARGE"] = "large";
   ActionViewGap["XLARGE"] = "xlarge";
   return ActionViewGap;
-}({});
-export let Layout = /*#__PURE__*/function (Layout) {
-  Layout["HORIZONTAL"] = "horizontal";
-  Layout["VERTICAL"] = "vertical";
-  Layout["HORIZONTAL_WITH_MORE_ACTIONS"] = "horizontal-with-more-actions";
-  Layout["VERTICAL_WITH_MORE_ACTIONS"] = "vertical-with-more-actions";
-  return Layout;
 }({});

package/es/platform/client-actions/components/row-actions-renderer/domain/entities/interfaces/IState.js

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

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import { ComponentRegistry } from "../../../../../../../library";
+import AdaptiveRowActionsRendererView from "./AdaptiveRowActionsRendererView";
+const AdaptiveRowActionsRendererComponent = createCustomComponent({
+  name: 'AdaptiveRowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: AdaptiveRowActionsRendererView
+});
+ComponentRegistry.register("AdaptiveRowActionsRenderer", AdaptiveRowActionsRendererComponent);
+export default AdaptiveRowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRendererView.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import MoreActionsRenderer from "../MoreActions/MoreActionsRenderer";
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils"; // @ts-ignore
+
+import style from "../RowActions/RowActionsRenderer.module.css";
+export default function AdaptiveRowActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    gap,
+    testId,
+    clientScripts
+  } = state.properties;
+  const [firstAction, secondAction, ...moreActions] = actions;
+  const showMore = actions.length > 3;
+  const actionsList = showMore ? [firstAction, secondAction] : actions;
+
+  const renderAction = action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName
+  });
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId ? testId : '',
+    $ui_className: gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : '',
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, actionsList.map(renderAction), /*#__PURE__*/React.createElement(MoreActionsRenderer, {
+    actions: moreActions,
+    clientScripts: clientScripts
+  })) : actionsList.map(renderAction));
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRenderer.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import MoreActionsRendererView from "./MoreActionsRendererView";
+const MoreActionsRenderer = createCustomComponent({
+  name: "MoreActionsRenderer",
+  eventHandlers: {},
+  properties: RowActionsRendererProperties,
+  View: MoreActionsRendererView
+});
+export default MoreActionsRenderer;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRendererView.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import CustomDropdown from '@zohodesk-private/desk-components/es/CustomDropdown/CustomDropdown';
+import ListItemConstants from "../../../../../../../cc/list-item/Constants";
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+export const ListItemConvertor = action => {
+  const {
+    id,
+    properties: {
+      icon
+    },
+    eventMappings,
+    instanceName
+  } = action;
+  const label = action.properties.label ? action.properties.label : action.properties.text;
+  const updatedEventMappings = eventMappings.map(eventMapping => {
+    return { ...eventMapping,
+      sourceEvent: ListItemConstants.LISTITEM_CLICKED
+    };
+  });
+  return {
+    component: 'ListItem',
+    properties: {
+      text: label,
+      tooltip: label,
+      icon,
+      id
+    },
+    eventMappings: updatedEventMappings,
+    id,
+    instanceName
+  };
+};
+
+function MoreActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    clientScripts
+  } = state.properties;
+  const listItemActions = actions.map(action => {
+    return ListItemConvertor(action);
+  });
+
+  const renderTargetElement = _ref2 => {
+    let {
+      handleTogglePopup,
+      isPopupOpen
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IconButton, {
+      iconName: "ZD-GN-more",
+      iconSize: "16",
+      isActive: isPopupOpen,
+      onClick: handleTogglePopup
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(CustomDropdown, {
+    $ui_boxSize: "medium",
+    $flag_padding: true,
+    $render_targetElement: renderTargetElement,
+    $method_getRef: ref,
+    $customProps_dropbox: {
+      onClick: undefined
+    }
+  }, listItemActions.map(action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName // getRef={ref}
+
+  })));
+}
+
+export default MoreActionsRendererView;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import RowActionsRendererView from "./RowActionsRendererView";
+import { ComponentRegistry } from "../../../../../../../library";
+const RowActionsRendererComponent = createCustomComponent({
+  name: 'RowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: RowActionsRendererView
+});
+ComponentRegistry.register("RowActionsRenderer", RowActionsRendererComponent);
+export default RowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer.module.css

@@ -0,0 +1,23 @@
+.wrapper {
+    max-width: 100% 
+}
+
+.gap_small {
+    gap: var(--zd_size4) 
+}
+
+.gap_xmedium {
+    gap: var(--zd_size6) 
+}
+
+.gap_medium {
+    gap: var(--zd_size8) 
+}
+
+.gap_large {
+    gap: var(--zd_size10) 
+}
+
+.gap_xlarge {
+    gap: var(--zd_size12) 
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRendererView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
+// @ts-ignore
+import style from "./RowActionsRenderer.module.css";
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+
+function RowActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions,
+    gap,
+    clientScripts,
+    testId
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId ? testId : "",
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+  }, actions.map((action, index) => {
+    // @ts-ignore
+    return /*#__PURE__*/React.createElement(ActionEventMediator, {
+      action: action,
+      clientScripts: findMappedClientScripts(action, clientScripts),
+      key: index,
+      instanceName: action.instanceName
+    });
+  }));
+}
+
+;
+export default RowActionsRendererView;

package/es/platform/client-scripts/cc/zclient-scripts-execution/clientScriptsSchema.js

@@ -4,14 +4,11 @@ export const clientScriptsSchema = {
   items: {
     type: 'object',
     properties: {
-      targetEvent: {
+      targetEventName: {
         type: 'string'
       },
       clientScript: {
         type: 'string'
-      },
-      type: {
-        type: 'string'
       }
     }
   }

package/es/platform/components/form-connected/frameworks/FormConnectedView.js

@@ -16,7 +16,6 @@ function View(_ref, ref) {
     headerRightActions,
     footerLeftActions,
     footerRightActions,
-    context,
     clientScripts
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Form, {
@@ -29,7 +28,6 @@ function View(_ref, ref) {
     headerRightActions: headerRightActions,
     footerLeftActions: footerLeftActions,
     footerRightActions: footerRightActions,
-    context: context,
     rightPanel: rightPanel,
     clientScripts: clientScripts
   });

package/es/platform/components/smart-action-band/adapters/presenters/ActionBandTranslator.js

@@ -1,3 +1,4 @@
+import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
 import DefaultClientActions from "./utils/DefaultClientActions";
 import { ActionBandLocations } from "../../../../../bc/action-band/Constants";
 import { i18NProviderUtils } from '@zohodesk/i18n';
@@ -55,11 +56,14 @@ export default class ActionBandTranslator {
     }
 
     const mappedClientActions = mapper(combinedClientActions || []);
-    const clientActionsContext = { ...context,
-      defaultSortField: sortConfig.defaultSortField,
-      instanceName,
-      moduleName
-    };
+    const transformedClientActions = {};
+    Object.entries(mappedClientActions).forEach(_ref => {
+      let [key, value] = _ref;
+      let bandActions = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+        defaultSortField: sortConfig.defaultSortField
+      });
+      transformedClientActions[key] = bandActions;
+    });
     const {
       clientScripts,
       isFetching: isClientScriptsFetching
@@ -67,10 +71,9 @@ export default class ActionBandTranslator {
     const {
       actionBandLeftActions,
       actionBandRightActions
-    } = mappedClientActions;
+    } = transformedClientActions;
     return { ...state,
       ...zclientAction,
-      context: clientActionsContext,
       viewModel: {
         actionBandLeftActions,
         actionBandRightActions,

package/es/platform/components/smart-action-band/frameworks/SmartActionBandView.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ActionBand from '@zohodesk-private/desk-components/es/ActionBand/ActionBand';
-import ClientActionsRenderer from "../../../client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { ActionViewGap, Layout } from "../../../client-actions/components/interfaces/ActionViewModel";
+import RowActionsRenderer from "../../../client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function View(_ref, ref) {
   let {
@@ -13,31 +12,20 @@ function View(_ref, ref) {
     actionBandRightActions,
     clientScripts
   } = state.viewModel;
-  const {
-    context
-  } = state;
 
   const renderLeftActions = () => {
-    return /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    return /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actionBandLeftActions,
       clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.XLARGE
-      }
+      gap: "xlarge"
     });
   };
 
   const renderRightActions = () => {
-    return /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    return /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actionBandRightActions,
       clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.XLARGE
-      }
+      gap: "xlarge"
     });
   };
 

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

@@ -1,3 +1,4 @@
+import ClientActionsTranslator from "../../../client-actions/translators/client-actions-translator";
 import SectionTranslator from "./translators/SectionTranslator";
 import DefaultFormClientActions from "./utils/DefaultClientActions";
 import { filterClientActionsByLocation } from "../../../client-actions/behaviour/zclient-actions/adapters/presenters/FilterUtils";
@@ -18,7 +19,7 @@ export default class FormTranslator {
       zclientAction,
       zclientScriptsEventMapping
     } = state.behaviours;
-    let {
+    const {
       context
     } = state.behaviours.appContext;
     const {
@@ -45,11 +46,6 @@ export default class FormTranslator {
     };
     const initialRecordData = zform.initialRecordData ? zform.initialRecordData : {
       cf: {}
-    }; // @ts-ignore
-
-    context = { ...context,
-      instanceName,
-      moduleName
     };
     const actionContext = { ...context,
       mode: zform.mode,
@@ -60,7 +56,16 @@ export default class FormTranslator {
     };
     Object.entries(mappedClientActions).forEach(_ref => {
       let [key, value] = _ref;
-      transformedClientActions[key] = value;
+
+      if (isFooterEnabled && (key === 'footerLeftActions' || key === 'footerRightActions')) {
+        let footerActions = ClientActionsTranslator.transform(value, instanceName, moduleName, actionContext);
+        transformedClientActions[key] = footerActions;
+      }
+
+      if (isHeaderEnabled && (key === 'headerLeftActions' || key === 'headerRightActions')) {
+        let headerActions = ClientActionsTranslator.transform(value, instanceName, moduleName, actionContext);
+        transformedClientActions[key] = headerActions;
+      }
     });
     const {
       clientScripts,
@@ -138,7 +143,6 @@ export default class FormTranslator {
           headerRightActions,
           footerLeftActions,
           footerRightActions,
-          context: actionContext,
           isLoading: false,
           rightPanel,
           clientScripts

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

@@ -1,5 +1,6 @@
 import { DefaultFormSectionUIType, fieldTypeToUIType } from "../../../../../cc/fields/field/FormDefaultUIType";
 import * as FieldTranslators from "./fields";
+import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
 import { getDefaultFieldEphiActionTemplate, getDefaultFieldInfoActionTemplate } from "../utils/DefaultClientActions";
 import sanitizeHtmlString from "../utils/sanitizeHtmlString";
 
@@ -29,7 +30,10 @@ function SectionTranslator(_ref) {
   const transformedClientActions = {};
   Object.entries(sectionFieldOptionActions).forEach(_ref2 => {
     let [key, value] = _ref2;
-    transformedClientActions[key] = value;
+    let headerActions = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+      ...section
+    });
+    transformedClientActions[key] = headerActions;
   });
   const defaultViewModel = {
     type: mapping?.UIComponentName ? mapping.UIComponentName : DefaultFormSectionUIType,
@@ -41,9 +45,6 @@ function SectionTranslator(_ref) {
     }),
     headerActions: transformedClientActions.sectionHeaderRightActions,
     titleActions: transformedClientActions.sectionTitleRightActions,
-    context: { ...context,
-      ...section
-    },
     // headerLeftActions: sectionFieldOptionActions.sectionHeaderLeftActions,
     // headerRightActions: sectionFieldOptionActions.sectionHeaderRightActions,
     // titleLeftActions: sectionFieldOptionActions.sectionTitleLeftActions,
@@ -88,14 +89,19 @@ function SectionTranslator(_ref) {
       const transformedDefaultActions = createEmptyActions();
       Object.entries(defaultActions).forEach(_ref3 => {
         let [key, value] = _ref3;
-        transformedDefaultActions[key] = value;
+        let transformedDefaultAction = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+          ...field
+        });
+        transformedDefaultActions[key] = transformedDefaultAction;
       }); // Transform client actions
 
       const transformedActions = createEmptyActions();
       Object.entries(fieldLevelActions).forEach(_ref4 => {
         let [key, value] = _ref4;
-        // let transformedAction = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context, ...field });
-        transformedActions[key] = value;
+        let transformedAction = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+          ...field
+        });
+        transformedActions[key] = transformedAction;
       }); // Initialize fieldPreModified
 
       const fieldPreModified = {};
@@ -117,9 +123,7 @@ function SectionTranslator(_ref) {
         type,
         fieldPreModified,
         uiConfig,
-        context: { ...context,
-          ...field
-        },
+        context,
         preferences,
         fieldOptionActions,
         instanceName,

package/es/platform/zform/adapters/presenter/translators/fields/BooleanFieldTranslator.js

@@ -3,8 +3,7 @@ const BooleanFieldTranslator = _ref => {
     field,
     type,
     uiConfig,
-    fieldPreModified,
-    context
+    fieldPreModified
   } = _ref;
   const fieldModified = { ...fieldPreModified,
     id: field.id,
@@ -17,8 +16,7 @@ const BooleanFieldTranslator = _ref => {
     required: field.isMandatory,
     readonly: field.isReadOnly,
     // visibility: field.isVisible
-    isVisible: field.isVisible,
-    context
+    isVisible: field.isVisible
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/CurrencyFieldTranslator.js

@@ -26,8 +26,7 @@ const CurrencyFieldTranslator = _ref => {
     isVisible: field.isVisible,
     currencyLocale: prefCurrencyLocale || contextCurrencyLocale,
     currencySymbol: prefCurrencySymbol || contextCurrencySymbol,
-    errorMessage: field.errorMessage || '',
-    context
+    errorMessage: field.errorMessage || ''
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/DateFieldTranslator.js

@@ -3,8 +3,7 @@ const DateFieldTranslator = _ref => {
     field,
     type,
     uiConfig,
-    fieldPreModified,
-    context
+    fieldPreModified
   } = _ref;
   const fieldModified = { ...fieldPreModified,
     id: field.id,
@@ -17,8 +16,7 @@ const DateFieldTranslator = _ref => {
     errorMessage: field.errorMessage || '',
     required: field.isMandatory,
     readonly: field.isReadOnly,
-    isVisible: field.isVisible,
-    context
+    isVisible: field.isVisible
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/DateTimeFieldTranslator.js

@@ -3,8 +3,7 @@ const DateTimeFieldTranslator = _ref => {
     field,
     type,
     uiConfig,
-    fieldPreModified,
-    context
+    fieldPreModified
   } = _ref;
   const fieldModified = { ...fieldPreModified,
     id: field.id,
@@ -18,8 +17,7 @@ const DateTimeFieldTranslator = _ref => {
     required: field.isMandatory,
     readonly: field.isReadOnly,
     // visibility: field.isVisible
-    isVisible: field.isVisible,
-    context
+    isVisible: field.isVisible
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/DecimalFieldTranslator.js

@@ -3,8 +3,7 @@ const DecimalFieldTranslator = _ref => {
     field,
     type,
     fieldPreModified,
-    uiConfig,
-    context
+    uiConfig
   } = _ref;
   const fieldModified = {
     type,
@@ -20,8 +19,7 @@ const DecimalFieldTranslator = _ref => {
     maxLength: field.maxLength,
     readonly: field.isReadOnly,
     isVisible: field.isVisible,
-    errorMessage: field.errorMessage || '',
-    context
+    errorMessage: field.errorMessage || ''
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/EmailFieldTranslator.js

@@ -3,8 +3,7 @@ const EmailFieldTranslator = _ref => {
     field,
     type,
     fieldPreModified,
-    uiConfig,
-    context
+    uiConfig
   } = _ref;
   const fieldModified = {
     type,
@@ -21,8 +20,7 @@ const EmailFieldTranslator = _ref => {
     readonly: field.isReadOnly,
     // visibility: field.isVisible,
     isVisible: field.isVisible,
-    errorMessage: field.errorMessage || '',
-    context
+    errorMessage: field.errorMessage || ''
   };
   return fieldModified;
 };

package/es/platform/zform/adapters/presenter/translators/fields/LookUpFieldTranslator.js

@@ -3,8 +3,7 @@ const LookUpFieldTranslator = _ref => {
     field,
     type,
     fieldPreModified,
-    uiConfig,
-    context
+    uiConfig
   } = _ref;
   const fieldModified = {
     // Need to check if value is an object or string (ID)
@@ -24,8 +23,7 @@ const LookUpFieldTranslator = _ref => {
     required: field.isMandatory,
     isCustomField: field.isCustomField,
     maxLength: field.maxLength,
-    lookup: field.lookup,
-    context
+    lookup: field.lookup
   };
   return fieldModified;
 };