@zohodesk/library-platform 1.0.2-exp.1.1 → 1.0.2-exp.1.3

package/es/library/custom-component/frameworks/ui/CreateSlotComponent.js

@@ -1,26 +1,81 @@
-import React from "react";
+import React, { Children } from "react";
 import ComponentRegistry from "./ComponentRegistry";
-export default function createSlotComponent(slotShape) {
-  let {
-    elements
-  } = slotShape;
-  let finalElements = elements.map(element => {
-    let {
-      type,
-      styles = {},
-      slots = [],
-      properties = {}
-    } = element;
-    let View = ComponentRegistry.get(type);
-
-    if (View) {
-      return /*#__PURE__*/React.createElement(View, { ...properties,
-        styles: styles,
-        slots: slots
-      });
+export function generateSlotChildren() {
+  let slots = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let children = arguments.length > 1 ? arguments[1] : undefined;
+  let slotChildren = {},
+      slotChildrenMap = {};
+  Children.forEach(children, child => {
+    if (typeof child.type === "function" && child.props && child.props.slotName) {
+      const {
+        slotName
+      } = child.props;
+      const displayName = child.type.displayName;
+      slotChildrenMap[slotName] = slotChildrenMap[slotName] || {};
+      slotChildrenMap[slotName][displayName] = {
+        props: child.props,
+        type: child.type
+      };
     }
+  });
+  slots.map(slot => {
+    const {
+      name,
+      elements
+    } = slot;
+    slotChildren[name] = [];
+    elements.map((element, index) => {
+      const {
+        type,
+        name: elementName,
+        styles,
+        slots,
+        properties = {}
+      } = element;
+      const {
+        props: childProps = {},
+        type: ChildType
+      } = (slotChildrenMap[name] || {})[`Custom(${elementName})`] || {};
+      let View = ComponentRegistry.get(type) || ChildType;
+      let finalisedProps = { ...properties,
+        ...childProps
+      };
+
+      if (styles) {
+        finalisedProps.styles = styles;
+      }
+
+      if (slots) {
+        finalisedProps.slots = slots;
+      }
 
-    return null;
+      if (View) {
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+          key: `${name}_${elementName}_${index}`
+        }, childProps.children));
+      }
+    });
   });
-  return finalElements;
-}
+  return slotChildren;
+}
+/*export default function createSlotComponent(slotShape: Slot, children: any): any {
+    let {elements} = slotShape;
+    let finalElements = elements.map((element) => {
+        let {
+            type,
+            styles = {},
+            slots = [],
+            properties={}
+        } = element;
+        let View = ComponentRegistry.get(type);
+        if(View) {
+            return (<View 
+                {...properties} 
+                styles={styles}
+                slots={slots}  
+            />)
+        }
+        return null
+    });
+    return finalElements
+}*/

package/es/library/custom-component/frameworks/ui/__testcases__/CreateSlotComponent.spec.js

@@ -0,0 +1,211 @@
+/* eslint-disable react/prop-types */
+import React, { Component } from "react";
+import createCustomComponent from "../CreateCustomComponent.tsx";
+import ComponentRegistry from "../ComponentRegistry";
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+const Parent = createCustomComponent({
+  name: "parent",
+  View: (_ref, ref) => {
+    let {
+      slotChildren
+    } = _ref;
+    const {
+      child = null,
+      siblingChild = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Parent.", /*#__PURE__*/React.createElement("div", null, child), /*#__PURE__*/React.createElement("div", null, siblingChild));
+  },
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  },
+  eventHandlers: {}
+});
+const Child = createCustomComponent({
+  name: "child",
+  View: (_ref2, ref) => {
+    let {
+      slotChildren
+    } = _ref2;
+    const {
+      nestedChildren = null
+    } = slotChildren;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the Child.", /*#__PURE__*/React.createElement("div", null, nestedChildren));
+  },
+  eventHandlers: {},
+  properties: {
+    slots: {
+      required: false,
+      typeMetadata: {
+        schema: {
+          type: "array"
+        }
+      }
+    }
+  }
+});
+const SiblingChild = createCustomComponent({
+  name: "siblingChild",
+  View: (props, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the sibling Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NestedChild = createCustomComponent({
+  name: "nestedChild",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, I am the nested Child.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+const NoSlotName = createCustomComponent({
+  name: "noSlotName",
+  View: (_, ref) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Hi, It should not be rendered.");
+  },
+  eventHandlers: {},
+  properties: {}
+});
+ComponentRegistry.register("Parent", Parent);
+ComponentRegistry.register("Child", Child);
+ComponentRegistry.register("SiblingChild", SiblingChild);
+describe("Slot Integration test suite", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+  it("slot Information passed to parent and check children rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    })));
+    const component = getByText("Hi, I am the Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with nested child and check nested child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    }))));
+    const component = getByText("Hi, I am the nested Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("slots with sibling child and check sibling child rendering", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, null)));
+    const component = getByText("Hi, I am the sibling Child.");
+    expect(component).toBeInTheDocument();
+  });
+  it("children with no slot support should not be rendered", () => {
+    const slots = [{
+      name: "child",
+      elements: [{
+        name: "child",
+        type: "Child",
+        slots: [{
+          name: "nestedChildren",
+          elements: [{
+            name: "nestedChild",
+            type: "NestedChild"
+          }]
+        }]
+      }]
+    }, {
+      name: "siblingChild",
+      elements: [{
+        name: "siblingChild",
+        type: "SiblingChild"
+      }]
+    }];
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Parent, {
+      slots: slots
+    }, /*#__PURE__*/React.createElement(Child, {
+      slotName: "child"
+    }, /*#__PURE__*/React.createElement(NestedChild, {
+      slotName: "nestedChildren"
+    })), /*#__PURE__*/React.createElement(SiblingChild, {
+      slotName: "siblingChild"
+    }), /*#__PURE__*/React.createElement(NoSlotName, {
+      slotName: "noslotname"
+    })));
+    const component = queryByText("Hi, It should not be rendered.");
+    expect(component).toBeNull();
+  });
+});

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,7 +1,7 @@
-import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import TableColumnSort from "../../../../legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon,
-  'Button': Button,
-  'TableFilterDropdown': FilterDropdown
+  ['ActionIcon']: ActionIcon,
+  ['TableColumnSort']: TableColumnSort
 };
 export default ActionComponentMapping;

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -1,15 +1,11 @@
 class TableTranslator {
   static translate(state) {
-    var _state;
-
     const {
       data,
       selectionConfig,
-      selection
-    } = state.properties;
-    const {
+      selection,
       sortBy
-    } = (_state = state) === null || _state === void 0 ? void 0 : _state.behaviours;
+    } = state.properties;
     const headers = TableTranslator.translateHeaders(data.headers, sortBy);
     const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
     state = { ...state,
@@ -25,10 +21,9 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.id) === header.id ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
       return { ...header,
-        sortOrder,
-        sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+        sortOrder
       };
     });
   }

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

@@ -1,7 +1,6 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/Constants";
-import { SORTBY_SORTED } from "../../../../../../bc/sort-by/Constants";
 import RowClickController from "../../adapters/controllers/RowClickController";
 
 class EventHandlersFactory {
@@ -12,7 +11,6 @@ class EventHandlersFactory {
       [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
       [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
       [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
-      [SORTBY_SORTED]: new SortedController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };

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

@@ -3,7 +3,6 @@ import { createCustomComponent } from "../../../../../custom-component";
 import TableTranslator from "../../adapters/presenters/TableTranslator";
 import TableListView from "./TableListView";
 import EventHandlersFactory from "./EventHandlersFactory";
-import SortByBehaviourFactory from "../../../../../behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
 const TableList = createCustomComponent({
   name: 'TableList',
   View: TableListView,
@@ -11,6 +10,6 @@ const TableList = createCustomComponent({
   setInitialState: () => ({}),
   transformState: TableTranslator.translate,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: [SortByBehaviourFactory.create()]
+  behaviours: []
 });
 export default TableList;

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

@@ -4,6 +4,7 @@ import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
 import NoData from "./sub-components/NoData";
+import ErrorState from "./sub-components/ErrorState";
 import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
@@ -27,7 +28,8 @@ function TableListView(_ref2, _ref) {
     rowCursor,
     rowActionsConfig,
     selection,
-    emptyStateUiType
+    emptyStateUiType,
+    isError
   } = state.properties;
   const {
     headers,
@@ -39,7 +41,7 @@ function TableListView(_ref2, _ref) {
   } = rowActionsConfig;
   const hasRows = rows.length > 0; // TODO: derive from state.properties
 
-  const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
+  const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
@@ -69,6 +71,8 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(ErrorState, {
+    isError: isError
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -25,6 +25,9 @@
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+.errorContent {
+    padding: var(--zd_size60) 0 
+}
 .actions {
     gap: var(--zd_size8) 
 }

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+
+/* @ts-ignore */
+
+import style from "../css/TableList.module.css";
+export default function ErrorState(_ref) {
+  let {
+    isError
+  } = _ref;
+
+  if (isError) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: `${style.contentWrapper} ${style.errorContent}`
+    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
+      title: "Oops! Something is missing",
+      description: "We are unable to process your request. Please try again later."
+    }));
+  }
+
+  return null;
+}

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

@@ -1,16 +1,15 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import HeaderText from "./HeaderText";
 import ColumnResizer from "./ColumnResizer";
 
 function HeaderData(_ref) {
   let {
     header,
     sortedBy,
-    sortTooltip,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
@@ -41,14 +40,8 @@ function HeaderData(_ref) {
         $ui_alignItems: 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
       } : null
-    }, /*#__PURE__*/React.createElement(HeaderText, {
-      id: id,
-      name: name,
-      text: text,
-      sortable: sortable,
-      sortedBy: sortedBy,
-      sortTooltip: sortTooltip,
-      dispatch: dispatch
+    }, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: text
     }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
       actions: actions,
       gap: ActionViewGap.SMALL

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

@@ -11,8 +11,7 @@ function Headers(_ref) {
   } = _ref;
   return headers.map((header, index) => {
     const {
-      sortOrder,
-      sortTooltip
+      sortOrder
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
@@ -20,7 +19,6 @@ function Headers(_ref) {
       key: index,
       header: header,
       sortedBy: sortOrder,
-      sortTooltip: sortTooltip,
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,
       isFlexibleColumns: isFlexibleColumns,

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

@@ -1,27 +1,11 @@
 import { createCustomComponent } from "../../../../../custom-component";
-import Properties from "../../../../../../cc/action-icon/Properties";
-import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
+import { ActionIconProperties } from "../../../../../../cc/action-icon";
+import ActionIconView from "./ActionIconView";
 const ActionIcon = createCustomComponent({
   name: 'ActionIcon',
   View: ActionIconView,
-  properties: Properties,
+  properties: ActionIconProperties,
   events: [],
   eventHandlers: {}
 });
-export default ActionIcon; // NOTE: This is a sample of Button action component
-
-export const Button = createCustomComponent({
-  name: 'Button',
-  View: ButtonView,
-  properties: Properties,
-  events: [],
-  eventHandlers: {}
-}); // NOTE: This is a sample of FilterDropdown action component
-
-export const FilterDropdown = createCustomComponent({
-  name: 'FilterDropdown',
-  View: FilterDropdownView,
-  properties: Properties,
-  events: [],
-  eventHandlers: {}
-});
+export default ActionIcon;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
-
-import style from "./css/ActionIcon.module.css";
+import Constants from "../../../../../../cc/action-icon/Constants";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -12,16 +10,13 @@ export default function ActionIconView(_ref, ref) {
     icon,
     label,
     hoverVariant,
-    isDisabled,
-    isVisible
+    isDisabled
   } = state.properties;
   const {
     dispatch
   } = helpers;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
-    className: isVisible ? '' : style.hide
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
@@ -31,80 +26,5 @@ export default function ActionIconView(_ref, ref) {
         type: Constants.ACTION_ICON_CLICKED
       });
     } : null
-  }));
-} // NOTE: This is a sample of Button action component
-
-export function ButtonView(_ref2, ref) {
-  let {
-    state,
-    helpers
-  } = _ref2;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("button", {
-    ref: ref,
-    onClick: () => {
-      dispatch({
-        type: sourceEvent
-      });
-    }
-  }, value);
-} // NOTE: This is a sample of FilterDropdown action component
-
-export function FilterDropdownView(_ref3, ref) {
-  let {
-    state,
-    helpers
-  } = _ref3;
-  const {
-    dispatch
-  } = helpers;
-  const {
-    options,
-    isMultiselectable
-  } = state.properties;
-  const {
-    sourceEvent,
-    payload
-  } = state.properties.appendToActionPayload.eventMappings[0];
-  const {
-    fieldName: value
-  } = payload;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-title": value,
-    onClick: () => dispatch({
-      type: sourceEvent
-    }),
-    ref: ref
-  }, value);
-  return /*#__PURE__*/React.createElement("select", {
-    "data-title": '',
-    ref: ref,
-    onChange: e => dispatch({
-      type: sourceEvent,
-      payload: {
-        sourcePayload: {
-          selectedValue: e.target.value
-        }
-      }
-    })
-  }, options.map((option, index) => /*#__PURE__*/React.createElement("option", {
-    key: index,
-    value: option.value
-  }, option.label)));
+  });
 }

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TableColumnSortProperties } from "../../../../../../cc/table-column-sort";
+import TableColumnSortView from "./TableColumnSortView";
+const TableColumnSort = createCustomComponent({
+  name: 'TableColumnSort',
+  View: TableColumnSortView,
+  properties: TableColumnSortProperties,
+  events: [],
+  eventHandlers: {}
+});
+export default TableColumnSort;