@zohodesk/library-platform 1.1.1-exp.6 → 1.1.2

package/es/cc/component/Slot.js

@@ -0,0 +1 @@
+export {};

package/es/cc/component/SlotComponent.js

@@ -0,0 +1 @@
+export {};

package/es/cc/component/properties/slotName.js

@@ -0,0 +1 @@
+export {};

package/es/cc/fields/formula/Events.js

@@ -0,0 +1,3 @@
+import FieldEvents from "../field/Events";
+const Events = FieldEvents;
+export default Events;

package/es/cc/fields/formula/Model.js

@@ -0,0 +1,14 @@
+export default function FormulaFieldModel(_ref) {
+  let {
+    name,
+    value,
+    uiType,
+    appendToActionPayload
+  } = _ref;
+  return {
+    name,
+    appendToActionPayload,
+    type: uiType,
+    value
+  };
+}

package/es/cc/fields/formula/Properties.js

@@ -0,0 +1,3 @@
+import FieldProperties from "../field/Properties";
+export default { ...FieldProperties
+};

package/es/cc/fields/index.js

@@ -16,4 +16,5 @@ export { default as ColouredMultiSelectFieldProperties } from "./coloured-multi-
 export { default as ColouredPickListFieldProperties } from "./coloured-pick-list/Properties";
 export { default as TextFieldProperties } from "./text/Properties";
 export { default as UrlFieldProperties } from "./url/Properties";
+export { default as FormulaFieldProperties } from "./formula/Properties";
 export { default as FieldTypes } from "./field/Types";

package/es/library/custom-component/domain/entities/DefaultSlotNameAppend.js

@@ -0,0 +1,10 @@
+export default {
+  name: "slotName",
+  required: false,
+  defaultValue: null,
+  typeMetadata: {
+    schema: {
+      type: 'string'
+    }
+  }
+};

package/es/library/custom-component/domain/entities/Properties.js

@@ -3,6 +3,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import Property from "./Property";
 import defaultAppendToActionPayload from "./DefaultAppendToActionPayload";
 import getRefPropertySchema from "../../../../cc/component/properties/getRefPropertySchema";
+import defaultSlotNameAppend from "./DefaultSlotNameAppend";
 export default class Properties {
   constructor(properties, componentName) {
     this.componentName = componentName;
@@ -12,6 +13,7 @@ export default class Properties {
     this.data = properties;
     this.data.set('appendToActionPayload', new Property(defaultAppendToActionPayload));
     this.data.set('getRef', new Property(getRefPropertySchema));
+    typeof properties.get("slotName") === "undefined" && this.data.set('slotName', new Property(defaultSlotNameAppend));
   }
 
   getAllPropertiesValue() {

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

@@ -3,9 +3,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { forwardRef } from 'react';
 import DependencyFactory from "./DependencyFactory";
 import Compare from "./Compare";
+import { generateSlotChildren } from "./CreateSlotComponent";
+
+function discardChildren(props) {
+  const newObject = { ...props
+  };
+  delete newObject.children;
+  return newObject;
+}
 /* eslint-disable max-lines-per-function */
 // TODO: Refactor this function to reduce the number of lines
 
+
 const createCustomComponent = input => {
   class Component extends React.Component {
     constructor(props) {
@@ -55,7 +64,7 @@ const createCustomComponent = input => {
         dispatch: dispatch.bind(controller)
       };
       this.controller.initialize({ ...input,
-        newProps: props,
+        newProps: discardChildren(props),
         helpers: this.helpers
       });
       let proptypes = input.View.propTypes;
@@ -70,7 +79,7 @@ const createCustomComponent = input => {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return !Compare.deepEqual(this.props, nextProps) || !Compare.deepEqual(this.state, nextState); // return true;
+      return !Compare.deepEqual(discardChildren(this.props), discardChildren(nextProps)) || !Compare.deepEqual(this.state, nextState); // return true;
     }
 
     componentWillUnmount() {
@@ -82,7 +91,7 @@ const createCustomComponent = input => {
     }
 
     componentWillReceiveProps(nextProps, nextContext) {
-      this.controller.updateProperties(nextProps);
+      this.controller.updateProperties(discardChildren(nextProps));
     }
 
     componentDidUpdate() {// this.controller.updateProperties(this.props);
@@ -90,6 +99,10 @@ const createCustomComponent = input => {
 
     render() {
       let View = this.View;
+      let {
+        slots,
+        children
+      } = this.props;
 
       if (this.state.error) {
         if (__TEST__) {
@@ -113,7 +126,8 @@ const createCustomComponent = input => {
             this.props.getRef && this.props.getRef(element);
           },
           helpers: this.helpers,
-          state: this.state
+          state: this.state,
+          slotChildren: generateSlotChildren(slots, children)
         });
       }
     }

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

@@ -0,0 +1,89 @@
+import React, { Children } from "react";
+import ComponentRegistry from "./ComponentRegistry";
+
+/*
+    Enhancements
+        1.Without named slot handling
+        2.Warning error for component name wrong
+        3.Change createSlotComponent with react-dep and add into domatin,entities,usecases way of impl
+        4.UAT
+*/
+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;
+      }
+
+      if (View) {
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+          key: `${name}_${elementName}_${index}`
+        }, childProps.children));
+      }
+    });
+  });
+  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/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -66,6 +66,11 @@ function TableColumnFilterView(_ref, ref) {
             $tagAttributes_container: {
               ref: ref
             },
+            $customProps_dropbox: {
+              customClass: {
+                customDropBoxWrap: style.filterDropbox
+              }
+            },
             customStyle: {
               container: `${style.container} ${(isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0) ? style.active : ''}`
             }

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/css/TableColumnFilter.module.css

@@ -4,8 +4,12 @@
 }
 
 :global(.GLOBAL_ZDDC_tableHead:hover) .container,
-:global(.GLOBAL_ZDDC_tableHead:has([dot-ui-element="dropbox"])) .container,
+:global(.GLOBAL_ZDDC_tableHead):has(.filterDropbox) .container,
 .active {
   visibility: visible;
   opacity: 1;
+}
+
+.filterDropbox {
+  /* ** */
 }

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

@@ -37,6 +37,13 @@ function TableColumnSortView(_ref, ref) {
     },
     customAttributes_container: {
       ref
+    },
+    customProps: {
+      dropBoxProps: {
+        customClass: {
+          customDropBoxWrap: style.sortDropbox
+        }
+      }
     }
   });
 }

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

@@ -4,8 +4,12 @@
 }
 
 :global(.GLOBAL_ZDDC_tableHead:hover) .parentContainer,
-:global(.GLOBAL_ZDDC_tableHead:has([dot-ui-element="dropbox"])) .parentContainer,
+:global(.GLOBAL_ZDDC_tableHead):has(.sortDropbox) .parentContainer,
 .active {
   visibility: visible;
   opacity: 1;
 }
+
+.sortDropbox {
+  /** **/
+}

package/es/platform/data-source/http-template/getAvailableFields.js

@@ -57,6 +57,7 @@ let getAvailableFields = {
 
           return { ...field,
             pickListValues: organizationField.pickListValues,
+            returnType: organizationField.returnType,
             subType: organizationField.subType
           };
         })

package/es/platform/data-source/http-template/getClientActions.js

@@ -4,7 +4,7 @@ let getClientActions = {
   parameters: `{
         "from":{{from}},
         "limit":{{limit}},
-        "library": "{{library}}",
+        "component": "{{component}}",
         "module": "{{moduleName}}"
     }`,
   type: 'GET',

package/es/platform/zlist/adapters/presenters/translators/fields/FormulaFieldTranslator.js

@@ -0,0 +1,26 @@
+import FieldTypes from "../../../../../../cc/fields/field/Types";
+import FormulaFieldModel from "../../../../../../cc/fields/formula/Model";
+
+const FormulaFieldTranslator = (field, value, appendToActionPayload) => {
+  const {
+    uiType,
+    name
+  } = field;
+  const fieldTypeFactory = {
+    STRING: FieldTypes.SingleLineField,
+    BOOLEAN: FieldTypes.CheckboxField,
+    DECIMAL: FieldTypes.DecimalField,
+    CURRENCY: FieldTypes.CurrencyField,
+    DATE: FieldTypes.DateField,
+    DATETIME: FieldTypes.DateTimeField
+  };
+  const setFieldType = fieldTypeFactory[field.returnType] || FieldTypes.SingleLineField;
+  return FormulaFieldModel({
+    uiType: uiType || setFieldType,
+    appendToActionPayload,
+    name,
+    value
+  });
+};
+
+export default FormulaFieldTranslator;

package/es/platform/zlist/adapters/presenters/translators/fields/index.js

@@ -13,7 +13,8 @@ export { default as Date } from "./DateFieldTranslator";
 export { default as DateTime } from "./DateTimeFieldTranslator";
 export { default as Picklist } from "./PickListFieldTranslator";
 export { default as Multiselect } from "./MultiSelectFieldTranslator";
-export { default as LookUp } from "./LookUpFieldTranslator"; // // Field Name is to be similar to the API response
+export { default as LookUp } from "./LookUpFieldTranslator";
+export { default as Formula } from "./FormulaFieldTranslator"; // // Field Name is to be similar to the API response
 // class FieldTranslator {
 //   static translate(field, value) {
 //     const { type } = field;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/library-platform",
-  "version": "1.1.1-exp.6",
+  "version": "1.1.2",
   "description": "",
   "main": "es/index.js",
   "files": [