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

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

@@ -5,10 +5,15 @@ export function DecimalFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -1,12 +1,12 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import EmailProperties from "../../../../../../../cc/fields/email/Properties";
-import EmailEvents from "../../../../../../../cc/fields/email/Events";
+import EmailProperties from "../../../../../../../cc/email/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
 import { EmailFieldView } from "./EmailFieldView";
 const EmailField = createCustomComponent({
   name: 'EmailField',
   View: EmailFieldView,
   properties: EmailProperties,
-  events: EmailEvents,
+  events: FieldEvents,
   eventHandlers: {}
 });
 export default EmailField;

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

@@ -5,10 +5,16 @@ export function EmailFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    email,
+    isDotted,
+    weight,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Email, {
     getRef: ref,
-    email: value
+    email: email,
+    isDotted: isDotted,
+    weight: weight,
+    tooltip: tooltip
   });
 }

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

@@ -0,0 +1,26 @@
+import HighlightedValueConstants from "../../../../../../../cc/highlighted-value/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 {
+      [HighlightedValueConstants.HIGHLIGHTED_VALUE_CLICKED]: clickHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueField.js

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

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueFieldView.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import HighlightedValue from "../../../../highlighted-value/frameworks/ui/HighlightedValue";
+export default function HighlightedValueFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    text,
+    color,
+    tooltip,
+    weight,
+    isDotted,
+    cursor
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(HighlightedValue, {
+    getRef: ref,
+    text: text,
+    color: color,
+    tooltip: tooltip,
+    cursor: cursor,
+    weight: weight,
+    isDotted: isDotted
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/index.js

@@ -1,6 +1,6 @@
 import FieldTypes from "../../../../cc/fields/field/Types";
+import PrimaryField from "./primary-field/frameworks/ui/PrimaryField";
 import CheckboxField from "./checkbox-field/frameworks/ui/CheckboxField";
-import SwitchField from "./switch-field/frameworks/ui/SwitchField";
 import SingleLineField from "./singleline-field/frameworks/ui/SingleLineField";
 import EmailField from "./email-field/frameworks/ui/EmailField";
 import UrlField from "./url-field/frameworks/ui/UrlField";
@@ -16,9 +16,18 @@ import DateTimeField from "./datetime-field/frameworks/ui/DateTimeField";
 import NumberField from "./number-field/frameworks/ui/NumberField";
 import DecimalField from "./decimal-field/frameworks/ui/DecimalField";
 import MultiSelectField from "./multiselect-field/frameworks/ui/MultiSelectField";
+import TextField from "./text-field/frameworks/ui/TextField";
+import SwitchField from "./switch-field/frameworks/ui/SwitchField";
+import LinkField from "./link-field/frameworks/ui/LinkField";
+import TagField from "./tag-field/frameworks/ui/TagField";
+import TagsField from "./tags-field/frameworks/ui/TagsField";
+import TagsListDropdownField from "./tags-list-dropdown-field/frameworks/ui/TagsListDropdownField";
+import RadioDropdownField from "./radio-dropdown-field/frameworks/ui/RadioDropdownField";
+import LabeledAvatarField from "./labeled-avatar-field/frameworks/ui/LabeledAvatarField";
+import HighlightedValueField from "./highlighted-value-field/frameworks/ui/HighlightedValueField";
 const FieldComponents = {
-  [FieldTypes.CheckboxField]: CheckboxField,
-  [FieldTypes.SwitchField]: SwitchField,
+  // Default Field Variants
+  [FieldTypes.PrimaryField]: PrimaryField,
   [FieldTypes.SingleLineField]: SingleLineField,
   [FieldTypes.EmailField]: EmailField,
   [FieldTypes.URLField]: UrlField,
@@ -33,6 +42,17 @@ const FieldComponents = {
   [FieldTypes.DateTimeField]: DateTimeField,
   [FieldTypes.NumberField]: NumberField,
   [FieldTypes.DecimalField]: DecimalField,
-  [FieldTypes.MultiSelectField]: MultiSelectField
+  [FieldTypes.MultiSelectField]: MultiSelectField,
+  // Custom Field Variants
+  [FieldTypes.TextField]: TextField,
+  [FieldTypes.CheckboxField]: CheckboxField,
+  [FieldTypes.SwitchField]: SwitchField,
+  [FieldTypes.LinkField]: LinkField,
+  [FieldTypes.TagField]: TagField,
+  [FieldTypes.TagsField]: TagsField,
+  [FieldTypes.TagsListDropdownField]: TagsListDropdownField,
+  [FieldTypes.RadioDropdownField]: RadioDropdownField,
+  [FieldTypes.LabeledAvatarField]: LabeledAvatarField,
+  [FieldTypes.HighlightedValueField]: HighlightedValueField
 };
 export default FieldComponents;

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

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

package/es/library/dot/legacy-to-new-arch/table-field-components/labeled-avatar-field/frameworks/ui/LabeledAvatarField.js

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

package/es/library/dot/legacy-to-new-arch/table-field-components/labeled-avatar-field/frameworks/ui/LabeledAvatarFieldView.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Avatar } from "../../../..";
+export default function LabeledAvatarFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    name,
+    imageSrc,
+    size,
+    label,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Avatar, {
+    getRef: ref,
+    name: name,
+    imageSrc: imageSrc,
+    size: size,
+    label: label,
+    tooltip: tooltip
+  });
+}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from "../../../../link/frameworks/ui/Link";
+export default function LinkFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    text,
+    variant,
+    isDotted,
+    weight,
+    href,
+    tooltip,
+    opensNewTab
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Link, {
+    getRef: ref,
+    text: text,
+    variant: variant,
+    href: href,
+    isDotted: isDotted,
+    weight: weight,
+    tooltip: tooltip,
+    opensNewTab: opensNewTab
+  });
+}

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

@@ -4,14 +4,21 @@ export function LookupFieldView(_ref, ref) {
   let {
     state
   } = _ref;
+  const {
+    textOverflowMode,
+    value,
+    isRead
+  } = state.properties;
   const {
     name,
     url
-  } = state.properties.value;
+  } = value;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: name,
+    text: name,
     variant: "secondary",
-    href: url
+    href: url,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,7 +5,8 @@ export function MultiSelectFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode
   } = state.properties;
   const selectedOptions = value.map(item => ({
     id: item,
@@ -13,6 +14,7 @@ export function MultiSelectFieldView(_ref, ref) {
   }));
   return /*#__PURE__*/React.createElement(Tags, {
     getRef: ref,
-    tags: selectedOptions
+    tags: selectedOptions,
+    isWrapped: textOverflowMode === 'wrap'
   });
 }

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

@@ -5,10 +5,15 @@ export function NumberFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,10 +5,15 @@ export function PercentageFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -6,15 +6,19 @@ function PhoneFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   const href = `tel:${value}`;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: value,
+    text: value,
     href: href,
     variant: "secondary",
-    opensNewTab: true
+    weight: isRead ? undefined : 'bold',
+    opensNewTab: true,
+    isDotted: textOverflowMode === 'clip'
   });
 }
 

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

@@ -5,10 +5,15 @@ export function PickListFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import NameFieldProperties from "../../../../../../../cc/fields/name/Properties";
+import NameFieldEvents from "../../../../../../../cc/fields/name/Events";
+import PrimaryFieldView from "./PrimaryFieldView";
+const PrimaryField = createCustomComponent({
+  name: 'PrimaryField',
+  View: PrimaryFieldView,
+  properties: NameFieldProperties,
+  events: NameFieldEvents,
+  eventHandlers: {}
+});
+export default PrimaryField;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import TableLink from "@zohodesk-private/desk-components/es/table/TableLink/TableLink";
+import { TableListConstants } from "../../../../../../../cc/table-list";
+export default function PrimaryFieldView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    value: propValue,
+    name: fieldName,
+    textOverflowMode,
+    isRead
+  } = state.properties;
+  let {
+    value,
+    url,
+    isPreventDefault
+  } = propValue;
+
+  function handleClick(event) {
+    if (isPreventDefault) {
+      event && event.preventDefault();
+    }
+
+    dispatch({
+      type: TableListConstants.TABLE_LIST_NAME_FIELD_CLICKED,
+      payload: {
+        fieldName,
+        url
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(TableLink, {
+    $customProps_link: {
+      ref,
+      onClick: handleClick
+    },
+    $data_text: value,
+    $data_url: url,
+    $data_target: "_self",
+    $flag_wrapText: textOverflowMode === 'wrap',
+    $flag_hoverableFromList: true,
+    $ui_weight: isRead ? undefined : 'bold'
+  });
+}

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

@@ -0,0 +1,32 @@
+import RadioDropdownConstants from "../../../../../../../cc/radio-dropdown/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+export class EventHandlersFactory {
+  static create() {
+    const changeHandler = input => {
+      const {
+        state,
+        dispatch,
+        action
+      } = input;
+      const {
+        fieldName,
+        fieldType
+      } = state.properties;
+      const {
+        id
+      } = action.payload;
+      dispatch({
+        type: FieldConstants.FIELD_CHANGED,
+        payload: {
+          fieldName,
+          value: fieldType === 'Boolean' ? id === 'true' : id
+        }
+      });
+    };
+
+    return {
+      [RadioDropdownConstants.RADIO_DROPDOWN_VALUE_CHANGED]: changeHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownField.js

@@ -0,0 +1,32 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import RadioDropdownProperties from "../../../../../../../cc/radio-dropdown/Properties";
+import FieldEvents from "../../../../../../../cc/fields/field/Events";
+import RadioDropdownFieldView from "./RadioDropdownFieldView";
+import { EventHandlersFactory } from "./EventHandlersFactory";
+const RadioDropdownField = createCustomComponent({
+  name: 'RadioDropdownField',
+  View: RadioDropdownFieldView,
+  properties: { ...RadioDropdownProperties,
+    fieldType: {
+      required: false,
+      defaultValue: 'Picklist',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default RadioDropdownField;

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownFieldView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import RadioDropdown from "../../../../radio-dropdown/frameworks/ui/RadioDropdown"; // @ts-ignore
+
+import style from "./css/RadioDropdownField.module.css";
+export default function RadioDropdownFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    options,
+    color,
+    isDotted,
+    weight,
+    selectedId,
+    selectedValue,
+    dropdownHeading,
+    hasSearch,
+    searchPlaceholder,
+    emptyStateTitle,
+    isDisabled,
+    isReadOnly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $ui_className: color === 'none' ? style.wrapper : ''
+  }, /*#__PURE__*/React.createElement(RadioDropdown, {
+    getRef: ref,
+    hoverVariant: "border",
+    options: options,
+    selectedId: selectedId,
+    selectedValue: selectedValue,
+    color: color,
+    isDotted: isDotted,
+    weight: weight,
+    dropdownHeading: dropdownHeading,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    emptyStateTitle: emptyStateTitle,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  }));
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/css/RadioDropdownField.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+    margin-inline-start: calc( var(--zd_size11) * -1 ) 
+}

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

@@ -5,11 +5,15 @@ export function SingleLineFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
     text: value,
-    tooltip: ""
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }