@zohodesk/library-platform 1.1.12 → 1.2.0

package/es/library/dot/legacy-to-new-arch/sort-dropdown/frameworks/ui/SortDropdownTranslator.js

@@ -0,0 +1,33 @@
+import SearchTranslator from "../../../../../behaviours/search/adapters/presenter/SearchTranslator";
+export default class SortDropdownTranslator {
+  static transformState(state) {
+    const {
+      searchString
+    } = state.behaviours.search;
+    const {
+      taggedOption,
+      options,
+      selectedOption
+    } = state.properties;
+    const transformedOptions = options.map(option => ({
+      id: option.name,
+      value: option.label,
+      ...option
+    }));
+    return { ...state,
+      viewModel: { ...state.properties,
+        ...state.viewModel,
+        taggedOption: {
+          id: taggedOption
+        },
+        selectedOption: {
+          id: selectedOption.name,
+          value: selectedOption.label,
+          ...selectedOption
+        },
+        options: SearchTranslator(searchString, 'value', transformedOptions)
+      }
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/sort-dropdown/frameworks/ui/SortDropdownView.js

@@ -0,0 +1,83 @@
+import React from "react";
+import SortDropdown from "@zohodesk-private/desk-components/es/SortDropdown/SortDropdown";
+import SortDropdownConstants from "../../../../../../cc/sort-dropdown/Constants";
+
+function SortDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    options,
+    selectedOption,
+    taggedOption,
+    optionTagLabel,
+    dropdownTooltip,
+    iconTooltip,
+    hasSearch,
+    searchPlaceholder,
+    footerButtonLabel,
+    emptyListMessage,
+    isLoading,
+    isResetDisabled
+  } = state.viewModel;
+
+  const handleSort = sortOption => {
+    dispatch({
+      type: SortDropdownConstants.SORT_DROPDOWN_SORT_REQUESTED,
+      payload: {
+        name: sortOption.id,
+        label: sortOption.value,
+        order: sortOption.order
+      }
+    });
+  };
+
+  const handleSearch = searchValue => {
+    dispatch({
+      type: SortDropdownConstants.SORT_DROPDOWN_SEARCH_REQUESTED,
+      payload: {
+        searchValue
+      }
+    });
+  };
+
+  const handleReset = () => {
+    dispatch({
+      type: SortDropdownConstants.SORT_DROPDOWN_RESET_REQUESTED,
+      payload: {}
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(SortDropdown, {
+    options: options,
+    selectedOption: selectedOption,
+    taggedOption: taggedOption,
+    optionTagLabel: optionTagLabel,
+    dropdownTooltip: dropdownTooltip,
+    iconTooltip: iconTooltip,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    footerButtonLabel: footerButtonLabel,
+    emptyListMessage: emptyListMessage,
+    isLoading: isLoading,
+    isResetDisabled: isResetDisabled,
+    onSort: handleSort,
+    onSearch: handleSearch,
+    onReset: handleReset,
+    customProps: {
+      container: {
+        ref: ref
+      },
+      iconButton: {
+        dataId: "sortDropdown"
+      }
+    },
+    testId: "sortDropdown"
+  });
+}
+
+export default SortDropdownView;

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

@@ -1,12 +1,22 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
+import CheckboxProperties from "../../../../../../../cc/checkbox/Properties";
 import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
 import CheckboxFieldView from "./CheckboxFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
 const CheckboxField = createCustomComponent({
   name: 'CheckboxField',
   View: CheckboxFieldView,
-  properties: BooleanProperties,
+  properties: { ...CheckboxProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
   events: BooleanEvents,
   eventHandlers: EventHandlersFactory.create()
 });

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

@@ -5,14 +5,17 @@ export default function CheckboxFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    checked,
+    disabled,
+    readonly,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Checkbox, {
     getRef: ref,
-    checked: value,
-    disabled: false,
-    readonly: false,
+    checked: checked,
+    disabled: disabled,
+    readonly: readonly,
     label: "",
-    tooltip: ""
+    tooltip: tooltip
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-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/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,14 +5,16 @@ export function EmailFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value,
-    textOverflowMode,
-    isRead
+    email,
+    isDotted,
+    weight,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Email, {
     getRef: ref,
-    email: value,
-    isDotted: textOverflowMode === 'clip',
-    weight: isRead ? undefined : 'bold'
+    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,7 +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";
@@ -17,11 +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 = {
+  // Default Field Variants
   [FieldTypes.PrimaryField]: PrimaryField,
-  [FieldTypes.CheckboxField]: CheckboxField,
-  [FieldTypes.SwitchField]: SwitchField,
-  // TODO: Need to register SwitchField
   [FieldTypes.SingleLineField]: SingleLineField,
   [FieldTypes.EmailField]: EmailField,
   [FieldTypes.URLField]: UrlField,
@@ -36,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

@@ -15,7 +15,7 @@ export function LookupFieldView(_ref, ref) {
   } = value;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: name,
+    text: name,
     variant: "secondary",
     href: url,
     isDotted: textOverflowMode === 'clip',

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

@@ -13,7 +13,7 @@ function PhoneFieldView(_ref, ref) {
   const href = `tel:${value}`;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    label: value,
+    text: value,
     href: href,
     variant: "secondary",
     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,46 @@
+import RadioDropdownConstants from "../../../../../../../cc/radio-dropdown/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+import { SEARCH_REQUESTED } from "../../../../../../../bc/search/Constants";
+import Constants from "../../../../../../../cc/radio-dropdown/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 {
+      [Constants.RADIO_DROPDOWN_SEARCHED]: _ref => {
+        let {
+          dispatch,
+          action
+        } = _ref;
+        dispatch({
+          type: SEARCH_REQUESTED,
+          payload: {
+            searchString: action.payload.value
+          }
+        });
+      },
+      [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,49 @@
+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";
+import SearchTranslator from "../../../../../../behaviours/search/adapters/presenter/SearchTranslator";
+import SearchBehaviourFactory from "../../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
+const RadioDropdownField = createCustomComponent({
+  name: 'RadioDropdownField',
+  View: RadioDropdownFieldView,
+  transformState,
+  behaviours: [SearchBehaviourFactory.create()],
+  properties: { ...RadioDropdownProperties,
+    fieldType: {
+      required: false,
+      defaultValue: 'Picklist',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  events: FieldEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+
+function transformState(state) {
+  const {
+    searchString
+  } = state.behaviours.search;
+  return { ...state,
+    viewModel: { ...state.properties,
+      ...state.viewModel,
+      options: SearchTranslator(searchString, 'value', state.properties.options)
+    }
+  };
+}
+
+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.viewModel;
+  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 ) 
+}