@zohodesk/library-platform 1.1.11 → 1.1.12-exp.1

package/es/library/dot/legacy-to-new-arch/table-field-components/tag-field/frameworks/ui/TagFieldView.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Tag from "../../../../tag/frameworks/ui/Tag";
+export default function TagFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    color,
+    isDisabled,
+    iconName,
+    imageAltText,
+    imageSrc,
+    isRemovable,
+    cursor,
+    size,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Tag, {
+    getRef: ref,
+    id: id,
+    label: label,
+    color: color,
+    isDisabled: isDisabled,
+    iconName: iconName,
+    imageAltText: imageAltText,
+    imageSrc: imageSrc,
+    isRemovable: isRemovable,
+    cursor: cursor,
+    size: size,
+    tooltip: tooltip
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import TagsConstants from "../../../../../../../cc/tags/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [TagsConstants.TAG_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-field/frameworks/ui/TagsField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import TagsProperties from "../../../../../../../cc/tags/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import TagsFieldView from "./TagsFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const TagsField = createCustomComponent({
+  name: 'TagsField',
+  View: TagsFieldView,
+  properties: { ...TagsProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default TagsField;

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-field/frameworks/ui/TagsFieldView.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Tags from "../../../../tags/frameworks/ui/Tags";
+export default function TagsFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    title,
+    tags,
+    isWrapped
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Tags, {
+    getRef: ref,
+    title: title,
+    tags: tags,
+    isWrapped: isWrapped
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-list-dropdown-field/frameworks/ui/TagsListDropdownField.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import TagsListDropdownProperties from "../../../../../../../cc/tags-list-dropdown/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import TagsListDropdownFieldView from "./TagsListDropdownFieldView";
+const TagsListDropdownField = createCustomComponent({
+  name: 'TagsListDropdownField',
+  View: TagsListDropdownFieldView,
+  properties: TagsListDropdownProperties,
+  events: FieldEvents,
+  eventHandlers: {}
+});
+export default TagsListDropdownField;

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-list-dropdown-field/frameworks/ui/TagsListDropdownFieldView.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import TagsListDropdown from "../../../../tags-list-dropdown/frameworks/ui/TagsListDropdown";
+export default function TagsListDropdownFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    tags,
+    hasSearch,
+    searchPlaceholder,
+    text,
+    dropdownHeading,
+    emptyMessage
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(TagsListDropdown, {
+    getRef: ref,
+    tags: tags,
+    text: text,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    dropdownHeading: dropdownHeading,
+    emptyMessage: emptyMessage
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/text-field/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import TextConstants from "../../../../../../../cc/text/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const clickHandler = input => {
+      const {
+        state,
+        dispatch
+      } = input;
+      const {
+        fieldName
+      } = state.properties;
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [TextConstants.TEXT_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/text-field/frameworks/ui/TextField.js

@@ -0,0 +1,23 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import TextProperties from "../../../../../../../cc/text/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import TextFieldView from "./TextFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const TextField = createCustomComponent({
+  name: 'TextField',
+  View: TextFieldView,
+  properties: { ...TextProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default TextField;

package/es/library/dot/legacy-to-new-arch/table-field-components/text-field/frameworks/ui/TextFieldView.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from "../../../..";
+export default function TextFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    text,
+    weight,
+    isDotted,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Text, {
+    getRef: ref,
+    text: text,
+    tooltip: tooltip,
+    weight: weight,
+    isDotted: isDotted
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/url-field/frameworks/ui/UrlFieldView.js

@@ -11,7 +11,7 @@ export function UrlFieldView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: value,
+    text: value,
     href: value,
     variant: "secondary",
     weight: isRead ? undefined : 'bold',

package/es/library/dot/legacy-to-new-arch/tag/frameworks/ui/Tag.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TagProperties, TagEvents } from "../../../../../../cc/tag";
+import TagView from "./TagView";
+let Tag = createCustomComponent({
+  name: "Tag",
+  View: TagView,
+  properties: TagProperties,
+  events: TagEvents,
+  eventHandlers: {}
+});
+export default Tag;

package/es/library/dot/legacy-to-new-arch/tag/frameworks/ui/Tag.module.css

@@ -0,0 +1,8 @@
+
+.cursor_pointer {
+    cursor: pointer;
+}
+
+.cursor_default {
+    cursor: default;
+}

package/es/library/dot/legacy-to-new-arch/tag/frameworks/ui/TagView.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { TagConstants } from "../../../../../../cc/tag";
+import Tag from '@zohodesk/components/es/Tag/Tag';
+import ColoredTag from '@zohodesk-private/desk-components/es/ColoredTag/ColoredTag'; // @ts-ignore
+
+import style from "./Tag.module.css";
+
+function TagView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    id,
+    label,
+    color,
+    isDisabled,
+    iconName,
+    imageAltText,
+    imageSrc,
+    isRemovable,
+    cursor,
+    size,
+    tooltip
+  } = state.properties;
+
+  if (!!color) {
+    return /*#__PURE__*/React.createElement(ColoredTag, {
+      $data_id: id,
+      $data_text: label,
+      $data_color: color,
+      $event_onClick: id => {
+        dispatch({
+          type: TagConstants.TAG_CLICKED,
+          payload: {
+            id
+          }
+        });
+      },
+      $event_onRemove: isRemovable ? id => {
+        dispatch({
+          type: TagConstants.TAG_REMOVED,
+          payload: {
+            id
+          }
+        });
+      } : undefined,
+      customStyle: {
+        chip: cursor && !isDisabled ? style[`cursor_${cursor}`] : ''
+      },
+      $customProps_tag: {
+        getRef: ref,
+        disabled: isDisabled,
+        size,
+        tooltip
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Tag, {
+    getRef: ref,
+    id: id,
+    text: label,
+    imageURL: imageSrc,
+    initial: imageAltText || label,
+    hasAvatar: !!imageSrc || !!imageAltText,
+    iconName: iconName,
+    size: size,
+    tooltip: tooltip,
+    disabled: isDisabled,
+    customClass: {
+      customTag: cursor && !isDisabled ? style[`cursor_${cursor}`] : ''
+    },
+    onSelectTag: id => {
+      dispatch({
+        type: TagConstants.TAG_CLICKED,
+        payload: {
+          id
+        }
+      });
+    },
+    onRemove: isRemovable ? id => {
+      dispatch({
+        type: TagConstants.TAG_REMOVED,
+        payload: {
+          id
+        }
+      });
+    } : undefined
+  });
+}
+
+export default TagView;

package/es/library/dot/legacy-to-new-arch/tags-list-dropdown/frameworks/ui/TagContractAdapter.js

@@ -0,0 +1,24 @@
+export default function TagContractAdapter(tag) {
+  const {
+    id,
+    label,
+    imageSrc,
+    imageAltText,
+    iconName,
+    iconSize,
+    disabled,
+    tooltip
+  } = tag;
+  return {
+    id,
+    text: label,
+    name: imageAltText,
+    imageUrl: imageSrc,
+    iconName,
+    iconSize,
+    customProps: {
+      disabled,
+      tooltip
+    }
+  };
+}

package/es/library/dot/legacy-to-new-arch/tags-list-dropdown/frameworks/ui/TagsListDropdown.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import TagsListDropdownProperties from "../../../../../../cc/tags-list-dropdown/Properties";
+import TagsListDropdownEvents from "../../../../../../cc/tags-list-dropdown/Events";
+import TagsListDropdownView from "./TagsListDropdownView";
+let TagsListDropdown = createCustomComponent({
+  name: "TagsListDropdown",
+  View: TagsListDropdownView,
+  properties: TagsListDropdownProperties,
+  events: TagsListDropdownEvents,
+  eventHandlers: {}
+});
+export default TagsListDropdown;

package/es/library/dot/legacy-to-new-arch/tags-list-dropdown/frameworks/ui/TagsListDropdownView.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import TagsListDropdown from '@zohodesk-private/desk-components/es/TagsListDropdown/TagsListDropdown';
+import Constants from "../../../../../../cc/tags-list-dropdown/Constants";
+import TagContractAdapter from "./TagContractAdapter";
+
+function TagsListDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    tags,
+    hasSearch,
+    searchPlaceholder,
+    text,
+    dropdownHeading,
+    emptyMessage
+  } = state.properties;
+  let tagsList = tags.map(TagContractAdapter);
+  return /*#__PURE__*/React.createElement(TagsListDropdown, {
+    getRef: ref,
+    listData: tagsList,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    text: text,
+    dropdownHeading: dropdownHeading,
+    emptyMessage: emptyMessage,
+    onSearch: value => {
+      dispatch({
+        type: Constants.TAG_LIST_DROPDOWN_SEARCHED,
+        payload: {
+          value
+        }
+      });
+    }
+  });
+}
+
+export default TagsListDropdownView;

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

@@ -4,13 +4,13 @@
 
 .rightPlaceholder {
     position: absolute;
-    bottom: 4px;
+    bottom: var(--zd_size4) ;
 }
 
 [dir=ltr] .rightPlaceholder {
-    right: 12px;
+    right: var(--zd_size12) ;
 }
 
 [dir=rtl] .rightPlaceholder {
-    left: 12px;
+    left: var(--zd_size12) ;
 }

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

@@ -1,19 +1,19 @@
 .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) 
 }

package/es/platform/data-source/http-template/getComponentMapping.js

@@ -0,0 +1,17 @@
+let getComponentMapping = {
+  name: 'getComponentMapping',
+  api: '/{{servicePrefix}}/{{orgName}}',
+  parameters: `{}`,
+  type: 'GET',
+  getResponse: async _ref => {
+    let {
+      params,
+      payload,
+      headers
+    } = _ref;
+    return {};
+  },
+  transformer: res => res,
+  properties: {}
+};
+export default getComponentMapping;

package/es/platform/data-source/index.js

@@ -21,6 +21,7 @@ import fetchLookupFields from "./http-template/fetchLookupFields";
 import getClientScripts from "./http-template/getClientScripts";
 import markAsRead from "./http-template/markAsRead";
 import markAsUnRead from "./http-template/markAsUnRead";
+import getComponentMapping from "./http-template/getComponentMapping";
 let dataSource = {
   httpTemplates: {
     [RecordApiActionName.GET_RECORDS]: getRecords,
@@ -42,7 +43,8 @@ let dataSource = {
     [ZFormApiActionName.getLayoutRules]: getLayoutRules,
     [ZFormApiActionName.getDependencyMappings]: getDependencyMappings,
     [ZFormApiActionName.getValidationRules]: getValidationRules,
-    [ZFormApiActionName.fetchLookupFields]: fetchLookupFields
+    [ZFormApiActionName.fetchLookupFields]: fetchLookupFields,
+    getComponentMapping
   }
 };
 export default dataSource; // let ticketsRecordSerice = createRecord(tickets, () => {});

package/es/platform/zfield/applications/usecases/FetchSuccessUseCase.js

@@ -1,4 +1,6 @@
+import { DATA_SOURCE_EXECUTE } from "../../../../bc/zdata-source/Constants";
 import AbstractUseCase from "./AbstractUseCase";
+import { DATA_SOURCE_FAILURE, DATA_SOURCE_NO_CONTENT, DATA_SOURCE_SUCCESS } from "../../../../bc/zdata-source/Symbols";
 
 class FetchSuccessUseCase extends AbstractUseCase {
   execute(input) {
@@ -16,6 +18,11 @@ class FetchSuccessUseCase extends AbstractUseCase {
     } = metaData;
     const fieldManager = repository.getFieldManager();
 
+    if (String(apiName) === 'getComponentMapping') {
+      fieldManager.setFields(fields, apiName);
+      presenter.updateFields(fieldManager.toObject());
+    }
+
     if (!fieldManager.isFieldFetching(metaData)) {
       return;
     }
@@ -23,6 +30,32 @@ class FetchSuccessUseCase extends AbstractUseCase {
     fieldManager.setFields(fields, apiName);
     fieldManager.stopFetching(apiName);
     presenter.updateFields(fieldManager.toObject());
+    dispatch({
+      type: DATA_SOURCE_EXECUTE,
+      payload: {
+        props: {},
+        actionName: 'getComponentMapping'
+      },
+      metaData: {
+        actionName: 'getComponentMapping',
+        [DATA_SOURCE_SUCCESS]: {
+          metaData: {
+            apiName: 'getComponentMapping'
+          }
+        },
+        [DATA_SOURCE_NO_CONTENT]: {
+          metaData: {
+            apiName: 'getComponentMapping'
+          }
+        },
+        [DATA_SOURCE_FAILURE]: {
+          metaData: {
+            apiName: 'getComponentMapping',
+            actionName: 'getComponentMapping'
+          }
+        }
+      }
+    });
     dispatch(fieldManager.createSuccessAction(fields, metaData));
   }
 

package/es/platform/zfield/domain/entities/fields-manager/FieldsManager.js

@@ -5,10 +5,12 @@ import { DATA_SOURCE_FAILURE, DATA_SOURCE_NO_CONTENT, DATA_SOURCE_SUCCESS } from
 
 class FieldManager {
   constructor(fields, selectedFields, isFieldsFetching, isSelectedFieldsFetching) {
+    let componentMapping = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
     this.fields = fields;
     this.selectedFields = selectedFields;
     this.isFieldsFetching = isFieldsFetching;
     this.isSelectedFieldsFetching = isSelectedFieldsFetching;
+    this.componentMapping = componentMapping;
   }
 
   createSuccessAction(fields, metaData) {
@@ -98,11 +100,14 @@ class FieldManager {
       this.selectedFields = data;
     } else if (apiName === FieldApiName.UPDATE_SELECTED_FIELDS) {
       this.selectedFields = data;
+    } else if (apiName === 'getComponentMapping') {
+      this.componentMapping = data;
     }
   }
 
   toObject() {
     return {
+      componentMapping: this.componentMapping,
       fields: this.fields,
       selectedFields: this.selectedFields,
       isFieldsFetching: this.isFieldsFetching,

package/es/platform/zlist/adapters/presenters/TableTranslator.js

@@ -123,9 +123,22 @@ export default class TableTranslator {
     const textOverflowData = {
       isEnabled: textOverflowConfig.isEnabled,
       mode: textOverflow.mode
-    };
+    }; // ComponentMapping support
+
+    zfield.componentMapping && zfield.componentMapping.length && zfield.componentMapping.forEach(fieldVariation => {
+      const {
+        fieldName,
+        uiType,
+        translator
+      } = fieldVariation;
+      const field = fields.find(f => f.name === fieldName);
+
+      if (field) {
+        field.uiType = uiType;
+      }
+    });
     const headersTranslator = new HeadersTranslator(fields, headerActions, context, modifiedWidths, sortBy, records, instanceName, moduleName);
-    const rowsTranslator = new RowsTranslator(recordsForDisplay, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowData, moduleName, nameFieldsConfig, recordReadStatusConfig); // const actionTranslator = new ClientActionsTranslator(clientActions, records, fields, pageContext);
+    const rowsTranslator = new RowsTranslator(recordsForDisplay, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowData, moduleName, nameFieldsConfig, recordReadStatusConfig, zfield.componentMapping && [...zfield.componentMapping] || []); // const actionTranslator = new ClientActionsTranslator(clientActions, records, fields, pageContext);
     // const translators = [headersTranslator.getTranslator(), rowsTranslator.getTranslator(), actionTranslator.getTranslator()];
 
     const translators = [headersTranslator.getTranslator(), rowsTranslator.getTranslator()];