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

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

@@ -8,10 +8,10 @@ export class EventHandlersFactory {
         dispatch
       } = input;
       const {
-        name: fieldName,
-        value: currentValue
+        fieldName,
+        checked
       } = state.properties;
-      const toggledValue = !currentValue;
+      const toggledValue = !checked;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {

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

@@ -1,13 +1,23 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
-import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
+import SwitchProperties from "../../../../../../../cc/switch/Properties";
+import BooleanFieldEvents from "../../../../../../../cc/fields/boolean/Events";
 import SwitchFieldView from "./SwitchFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
 const SwitchField = createCustomComponent({
   name: 'SwitchField',
   View: SwitchFieldView,
-  properties: BooleanProperties,
-  events: BooleanEvents,
+  properties: { ...SwitchProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: BooleanFieldEvents,
   eventHandlers: EventHandlersFactory.create()
 });
 export default SwitchField;

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

@@ -5,12 +5,16 @@ export default function SwitchFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    checked,
+    disabled,
+    size,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Switch, {
     getRef: ref,
-    checked: value,
-    disabled: false,
-    tooltip: ""
+    checked: checked,
+    disabled: disabled,
+    size: size,
+    tooltip: tooltip
   });
 }

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

@@ -0,0 +1,26 @@
+import TagConstants from "../../../../../../../cc/tag/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 {
+      [TagConstants.TAG_CLICKED]: clickHandler
+    };
+  }
+
+}

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

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

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

@@ -5,13 +5,17 @@ export function UrlFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: value,
+    text: value,
     href: value,
     variant: "secondary",
-    opensNewTab: true
+    weight: isRead ? undefined : 'bold',
+    opensNewTab: true,
+    isDotted: textOverflowMode === 'clip'
   });
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import TagList from '@zohodesk-private/desk-components/es/TagsList/TagsList';
 import TagContractAdapter from "./TagContractAdapter";
-import { TagsConstants } from "../../../../../../cc/tags";
+import TagsConstants from "../../../../../../cc/tags/Constants";
 
 function TagView(_ref, ref) {
   let {
@@ -13,13 +13,15 @@ function TagView(_ref, ref) {
   } = helpers;
   let {
     title,
-    tags
+    tags,
+    isWrapped
   } = state.properties;
   let tagsList = tags.map(TagContractAdapter);
   return /*#__PURE__*/React.createElement(TagList, {
     $method_getRef: ref,
     $data_list: tagsList,
     $i18n_moreheading: title,
+    $flag_isWrapped: isWrapped,
     $flag_showAllTagsInsideMore: false,
     $event_onTagClick: id => {
       dispatch({

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

@@ -1,6 +1,6 @@
 import React from "react";
-import Typography from "@zohodesk/components/es/v1/Typography/Typography";
-import { TextConstants } from "../../../../../../cc";
+import Typography from "@zohodesk/components/es/Typography/Typography";
+import TextConstants from "../../../../../../cc/text/Constants";
 
 function TextView(_ref, ref) {
   let {
@@ -13,7 +13,8 @@ function TextView(_ref, ref) {
   let {
     text,
     weight,
-    tooltip
+    tooltip,
+    isDotted
   } = state.properties;
   return /*#__PURE__*/React.createElement(Typography, {
     $tagAttributes_text: {
@@ -27,7 +28,7 @@ function TextView(_ref, ref) {
       }
     },
     $ui_size: "14",
-    $flag_dotted: true,
+    $flag_dotted: isDotted,
     $ui_weight: weight,
     $i18n_dataTitle: tooltip || text
   }, text);

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

@@ -1,9 +1,10 @@
 import React from "react";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
 
 import style from "./css/TextAreaView.module.css";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -21,7 +22,8 @@ function TextAreaView(_ref, ref) {
     required,
     disabled,
     readonly,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
@@ -62,8 +64,10 @@ function TextAreaView(_ref, ref) {
     className: style.hasChildren
   }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
     className: style.rightPlaceholder
-  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: actions
+  }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    actions: actions,
+    clientScripts: clientScripts,
+    gap: ActionViewGap.SMALL
   })));
 }
 

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

@@ -14,27 +14,3 @@
 [dir=rtl] .rightPlaceholder {
     left: var(--zd_size12) ;
 }
-
-[dir=ltr] .paddingRight32 {
-    padding-right: var(--zd_size32) ;
-}
-
-[dir=rtl] .paddingRight32 {
-    padding-left: var(--zd_size32) ;
-}
-
-[dir=ltr] .paddingRight64 {
-    padding-right: var(--zd_size64) ;
-}
-
-[dir=rtl] .paddingRight64 {
-    padding-left: var(--zd_size64) ;
-}
-
-[dir=ltr] .paddingRight96 {
-    padding-right: var(--zd_size96) ;
-}
-
-[dir=rtl] .paddingRight96 {
-    padding-left: var(--zd_size96) ;
-}