@zohodesk/library-platform 1.1.5 → 1.1.6-temp-1

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import Loader from '@zohodesk/svg/es/v1/Loader/Loader';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/FormAction';
 import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
+import FormHeader from '@zohodesk-private/desk-components/es/setup/SetupHeader/SetupHeader';
+import MiddleContainer from '@zohodesk-private/desk-components/es/setup/SetupContent/SetupContent';
 import Sections from "./sub-components/Sections";
-import FormConstants from "../../../../../../cc/form/Constants"; // @ts-ignore
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Form.module.css";
 
@@ -11,36 +16,46 @@ function FormView(_ref, ref) {
     state,
     helpers
   } = _ref;
-  const {
-    dispatch
-  } = helpers;
   const {
     sections,
-    isLoading
+    isLoading,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions
   } = state.viewModel;
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    dispatch({
-      type: FormConstants.FORM_SUBMIT
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.formWrapper,
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_tagName: "form",
+    $ui_displayMode: "flex",
+    $ui_direction: "column",
+    $flag_fullsize: true,
     ref: ref
-  }, isLoading ?
-  /*#__PURE__*/
-  // Check for loading state
-  React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit"), /*#__PURE__*/React.createElement(Sections, {
+  }, /*#__PURE__*/React.createElement(FormHeader, {
+    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerLeftActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null,
+    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerRightActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null
+  }), /*#__PURE__*/React.createElement(MiddleContainer, {
+    $flag_padding: true,
+    $flag_greyBg: true,
+    $flag_childrenWrapper: true
+  }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement(Sections, {
     sections: sections
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit")));
+  }))), /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xmedium",
+    paddingRightClass: style.footer
+  }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: footerLeftActions,
+    gap: ActionViewGap.LARGE
+  })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: footerRightActions,
+    gap: ActionViewGap.LARGE
+  }))));
 }
 
 export default FormView;

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -1,7 +1,3 @@
-.formWrapper {
-    height: 100% ;
-}
-
 .fieldWrapper {
     position: relative
 }
@@ -30,4 +26,12 @@
 }
 .cursor_default {
     cursor: default
+}
+
+[dir=ltr] .footer {
+    padding-right: var(--zd_size32) 
+}
+
+[dir=rtl] .footer {
+    padding-left: var(--zd_size32) 
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Sections.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import DefaultSection from "../../../../section/frameworks/ui/Section";
 import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
 export default function Sections(_ref) {
   let {
@@ -10,23 +9,22 @@ export default function Sections(_ref) {
       id,
       title,
       description,
+      isCollapsed,
       isVisible,
       fields,
-      type
+      type,
+      ...extraProps
     } = section;
+    const Section = ComponentRegistry.get(type);
     if (isVisible === false) return null;
-    let Section = DefaultSection;
-
-    if (type) {
-      Section = ComponentRegistry.get(type);
-    }
-
     return /*#__PURE__*/React.createElement(Section, {
       key: id,
       id: id,
       title: title,
       description: description,
-      fields: fields
+      fields: fields,
+      isCollapsed: isCollapsed,
+      ...extraProps
     });
   });
 }

package/es/library/dot/components/section/frameworks/ui/RenderField.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+export function renderField(field, key) {
+  const {
+    type,
+    ...properties
+  } = field;
+  const Component = ComponentRegistry.get(type);
+
+  if (!Component) {
+    console.warn(`Component for type "${type}" not found.`);
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Component, {
+    key: key,
+    ...properties
+  });
+}

package/es/library/dot/components/section/frameworks/ui/Section.js

@@ -2,14 +2,23 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import { SectionProperties } from "../../../../../../cc/section";
 import SectionView from "./SectionView";
-import TransFormState from "../../adapters/presenter/TransFormState";
 import EventHandlersFactory from "./EventHandlerFactory";
+export class FieldSectionEventMappingBehaviourFactory {
+  static create() {
+    return {
+      name: 'fieldSectionEventMapping',
+      setInitialState: () => ({}),
+      properties: {},
+      eventHandlers: EventHandlersFactory.create()
+    };
+  }
+
+}
 let WrapSection = createCustomComponent({
   name: 'Section',
   View: SectionView,
   properties: SectionProperties,
-  transformState: TransFormState,
-  eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  eventHandlers: {},
+  behaviours: [FieldSectionEventMappingBehaviourFactory.create()]
 });
 export default WrapSection;

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,29 +1,7 @@
 import React from 'react';
-import ConvertSlotToComponent from "../../../../../slot/frameworks/ui/ConvertSlotToComponent";
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
-import EPHITag from "../../../form-fields/ephi-tag/frameworks/ui/EPHITag";
-import InfoIcon from "../../../form-fields/info-icon/frameworks/ui/InfoIcon"; // NOTE: This is a workaround to avoid dynamic imports
-// NOTE: register these components in place
-
-ComponentRegistry.register('TextBox', TextBox);
-ComponentRegistry.register('TextArea', TextArea);
-ComponentRegistry.register('PickList', PickList);
-ComponentRegistry.register('Email', Email);
-ComponentRegistry.register('Currency', Currency);
-ComponentRegistry.register('MultiSelect', MultiSelect);
-ComponentRegistry.register('Url', Url);
-ComponentRegistry.register('Percentage', Percentage);
-ComponentRegistry.register('Phone', Phone);
-ComponentRegistry.register('Number', Number);
-ComponentRegistry.register('Decimal', Decimal);
-ComponentRegistry.register('Date', Date);
-ComponentRegistry.register('DateTime', DateTime);
-ComponentRegistry.register('Checkbox', Checkbox);
-ComponentRegistry.register('EPHITag', EPHITag);
-ComponentRegistry.register('InfoIcon', InfoIcon);
+import { renderField } from "./RenderField";
 
 function SectionView(_ref, ref) {
   let {
@@ -31,8 +9,10 @@ function SectionView(_ref, ref) {
   } = _ref;
   const {
     id,
+    name,
     title,
     description,
+    isCollapsed,
     fields
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
@@ -41,11 +21,12 @@ function SectionView(_ref, ref) {
     testId: id,
     customId: id,
     $tagAttributes_container: {
-      ref
+      ref,
+      'data-section-name': name
     }
-  }, /*#__PURE__*/React.createElement(FieldsLayout, {
+  }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, ConvertSlotToComponent(fields)));
+  }, fields.filter(field => field.isVisible).map((field, index) => renderField(field, index))));
 }
 
 export default SectionView;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -1,22 +1,16 @@
 import React from 'react';
 import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
-import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
-
-const TableHeaderRow = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-
+import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
+import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
 import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
-import getHeaderClasses from "./../../utils/getHeaderClasses";
+import getHeaderClasses from "./../../utils/getHeaderClasses"; // @ts-ignore
+
 import style from "./../css/TableList.module.css";
 
-function Header(_ref2) {
+function Header(_ref) {
   let {
     isReorderEnabled,
     isSelectionEnabled,
@@ -31,7 +25,7 @@ function Header(_ref2) {
     rowActionsColumnWidth,
     headers,
     dispatch
-  } = _ref2;
+  } = _ref;
 
   if (headers.length <= 0) {
     return null;

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants";
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIconView.module.css";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -8,6 +10,8 @@ export default function ActionIconView(_ref, ref) {
   } = _ref;
   const {
     icon,
+    iconSize,
+    hasPadding,
     label,
     hoverVariant,
     isDisabled
@@ -18,9 +22,14 @@ export default function ActionIconView(_ref, ref) {
   return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
     $ui_iconName: icon,
+    $ui_size: JSON.stringify(iconSize),
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
+    hasPadding: hasPadding,
+    customStyle: hoverVariant === 'default' ? {
+      icon: style.cursor_default
+    } : undefined,
     $event_onClick: !isDisabled ? () => {
       dispatch({
         type: Constants.ACTION_ICON_CLICKED

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIconView.module.css

@@ -0,0 +1,3 @@
+.cursor_default {
+    cursor: default
+}

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/Button.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ButtonProperties from "../../../../../../cc/button/Properties";
+import ButtonEvents from "../../../../../../cc/button/Events";
+import ButtonView from "./ButtonView";
+let Button = createCustomComponent({
+  name: "Button",
+  View: ButtonView,
+  properties: ButtonProperties,
+  events: ButtonEvents,
+  eventHandlers: {}
+});
+export default Button;

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from '@zohodesk/components/es/Button/Button';
+import ButtonConstants from "../../../../../../cc/button/Constants";
+
+function ButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    text,
+    palette,
+    size,
+    isRounded,
+    isDisabled,
+    id,
+    status,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Button, {
+    getRef: ref,
+    text: text,
+    palette: palette,
+    size: size,
+    isRounded: isRounded,
+    isDisabled: isDisabled,
+    id: id,
+    status: status,
+    tooltip: tooltip,
+    onClick: () => {
+      dispatch({
+        type: ButtonConstants.BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default ButtonView;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ListItemProperties from "../../../../../../cc/list-item/Properties";
+import ListItemEvents from "../../../../../../cc/list-item/Events";
+import ListItemView from "./ListItemView";
+let ListItem = createCustomComponent({
+  name: "ListItem",
+  View: ListItemView,
+  properties: ListItemProperties,
+  events: ListItemEvents,
+  eventHandlers: {}
+});
+export default ListItem;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItemView.js

@@ -0,0 +1,122 @@
+import React from "react";
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import ListItemWithAvatar from '@zohodesk/components/es/ListItem/ListItemWithAvatar';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import ListItemConstants from "../../../../../../cc/list-item/Constants";
+
+function ListItemView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    isDisabled,
+    isActive,
+    text,
+    secondaryText,
+    size,
+    tooltip,
+    icon,
+    iconSize,
+    imgSrc,
+    imgName,
+    href,
+    target,
+    divider
+  } = state.properties;
+  const isLink = !!href;
+  let listItemElement = null;
+
+  if (!!imgSrc || !!imgName) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      imgSrc: imgSrc,
+      name: imgName,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      },
+      customProps: isLink ? {
+        ContainerProps: {
+          isLink,
+          href,
+          target
+        }
+      } : undefined
+    });
+  } else if (!!icon) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      iconName: icon,
+      iconSize: JSON.stringify(iconSize),
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  } else {
+    listItemElement = /*#__PURE__*/React.createElement(ListItem, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider === 'before' && /*#__PURE__*/React.createElement(DropDownSeparator, null), listItemElement, divider === 'after' && /*#__PURE__*/React.createElement(DropDownSeparator, null));
+}
+
+export default ListItemView;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import MoreDropdownProperties from "../../../../../../cc/more-dropdown/Properties";
+import MoreDropdownEvents from "../../../../../../cc/more-dropdown/Events";
+import MoreDropdownView from "./MoreDropdownView";
+let MoreDropdown = createCustomComponent({
+  name: "MoreDropdown",
+  View: MoreDropdownView,
+  properties: MoreDropdownProperties,
+  events: MoreDropdownEvents,
+  eventHandlers: {}
+});
+export default MoreDropdown;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdownView.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import MoreDropdown from '@zohodesk-private/desk-components/es/MoreAction/MoreAction';
+import MoreDropdownConstants from "../../../../../../cc/more-dropdown/Constants";
+
+function MoreDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    heading,
+    options,
+    isDisabled,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(MoreDropdown, {
+    $customProps_container: {
+      title: heading,
+      customProps: {
+        ToggleDropDownProps: {
+          ref
+        }
+      }
+    },
+    $data_options: options,
+    $flag_isDisabled: isDisabled // $i18n_heading={heading}
+    ,
+    $i18n_moreIconTooltip: tooltip,
+    $event_onClick: id => {
+      dispatch({
+        type: MoreDropdownConstants.MORE_DROPDOWN_OPTION_CLICKED,
+        payload: {
+          id
+        }
+      });
+    }
+  });
+}
+
+export default MoreDropdownView;

package/es/library/dot/legacy-to-new-arch/switch/frameworks/ui/SwitchView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Switch from '@zohodesk/components/es/Switch/Switch';
+import Switch from '@zohodesk-private/dot-registry/es/Switch/Switch';
 import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import { SwitchConstants } from "../../../../../../cc";
 
@@ -21,14 +21,14 @@ function SwitchView(_ref, ref) {
   let id = getId();
   return /*#__PURE__*/React.createElement(Switch, {
     customProps: {
-      SwitchProps: {
-        eleRef: ref
+      container: {
+        ref
       }
     },
     id: id,
     size: size,
-    checked: checked,
-    disabled: disabled,
+    isChecked: checked,
+    isDisabled: disabled,
     title: tooltip,
     onChange: () => {
       dispatch({

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

@@ -11,7 +11,6 @@ export default function SwitchFieldView(_ref, ref) {
     getRef: ref,
     checked: value,
     disabled: false,
-    size: 'small',
     tooltip: ""
   });
 }