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

package/es/library/behaviours/keyboard-controls/domain/entities/KeyboardControls.js

@@ -0,0 +1,87 @@
+import { SMART_TABLE_ACTION_TRIGGERED, SMART_TABLE_SELECTION_TOGGLED } from "../../../../../cc/table-connected/constants/Events";
+
+class KeyboardControls {
+  constructor(focussedIndex, totalLists) {
+    this.focussedIndex = focussedIndex;
+    this.totalLists = totalLists;
+  }
+
+  setFocussedIndex(index) {
+    this.focussedIndex = index;
+  }
+
+  getFocussedIndex() {
+    return this.focussedIndex;
+  }
+
+  focusPrevious() {
+    if (this.focussedIndex > 0) {
+      this.focussedIndex -= 1;
+    }
+  }
+
+  focusNext() {
+    if (this.totalLists > 1 && this.focussedIndex < this.totalLists - 1) {
+      this.focussedIndex += 1;
+    }
+  } // focusPrevious(): void {
+  //     if (this.focussedIndex > 0) {
+  //         this.focussedIndex -= 1;
+  //     } else if (this.focussedIndex === 0 && this.totalLists > 1) {
+  //         this.focussedIndex = this.totalLists - 1;
+  //     }
+  // }
+  // focusNext(): void {
+  //     if ((this.totalLists > 1) && (this.focussedIndex <= this.totalLists - 1)) {
+  //         if (this.focussedIndex >= this.totalLists - 1) {
+  //             this.focussedIndex = 0;
+  //         } else {
+  //             this.focussedIndex += 1;
+  //         }
+  //     }
+  // }
+  // getPreviousFocusEvent(event: KeyboardEvent): EventModel {
+  //     return {
+  //         type: SMART_TABLE_PREVIOUS_FOCUS,
+  //         payload: {
+  //             event
+  //         }
+  //     }
+  // }
+  // getNextFocusEvent(event: KeyboardEvent): EventModel {
+  //     return {
+  //         type: SMART_TABLE_NEXT_FOCUS,
+  //         payload: {
+  //             event
+  //         }
+  //     }
+  // }
+
+
+  getSelectionEvent(event) {
+    return {
+      type: SMART_TABLE_SELECTION_TOGGLED,
+      payload: {
+        event
+      }
+    };
+  }
+
+  getClickActionEvent(event) {
+    return {
+      type: SMART_TABLE_ACTION_TRIGGERED,
+      payload: {
+        event
+      }
+    };
+  }
+
+  toObject() {
+    return {
+      focussedIndex: this.focussedIndex
+    };
+  }
+
+}
+
+export default KeyboardControls;

package/es/library/behaviours/keyboard-controls/domain/entities/interface/IKeyboardControls.js

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

package/es/library/behaviours/keyboard-controls/domain/entities/interface/KeyboardControlModel.js

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

package/es/library/behaviours/keyboard-controls/frameworks/EventHandlerFactory.js

@@ -0,0 +1,48 @@
+import { KEYBOARD_CONTROL_DOWN_ARROW_PRESSED, KEYBOARD_CONTROL_ENTER_PRESSED, KEYBOARD_CONTROL_SPACE_PRESSED, KEYBOARD_CONTROL_UP_ARROW_PRESSED } from "../../../../bc/keyboard-controls/Constants";
+import UpArrowPressController from "../adapters/controllers/UpArrowPressController";
+import DownArrowPressController from "../adapters/controllers/DownArrowPressController";
+import SpacePressController from "../adapters/controllers/SpacePressController";
+import EnterPressController from "../adapters/controllers/EnterPressController";
+import Service from "../adapters/gateways/Service";
+import Repository from "../adapters/gateways/Repository";
+import Presenter from "../adapters/presenters/Presenter";
+import KeyboardHandler from "../adapters/gateways/KeyboardHandler"; // import FocusPreviousController from "../adapters/controllers/FocusPreviousController";
+// import FocusNextController from "../adapters/controllers/FocusNextController";
+
+import LifeCycleAction from "../../../../cc/architecture/LifeCycleActionEnum";
+import InitializeController from "../adapters/controllers/InitializeController";
+import DestructController from "../adapters/controllers/DestructController";
+
+class EventHandlerFactory {
+  static create() {
+    const service = this.createService();
+    return this.createHandlers(service);
+  }
+
+  static createService() {
+    const repository = new Repository();
+    const presenter = new Presenter();
+    const keyboardHandler = new KeyboardHandler();
+    return new Service({
+      repository: repository,
+      presenter,
+      keyboardHandler
+    });
+  }
+
+  static createHandlers(service) {
+    return {
+      [LifeCycleAction.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleAction.UN_MOUNT]: new DestructController(service).handle,
+      // [SMART_TABLE_PREVIOUS_FOCUS]: new FocusPreviousController(service).handle,
+      // [SMART_TABLE_NEXT_FOCUS]: new FocusNextController(service).handle,
+      [KEYBOARD_CONTROL_UP_ARROW_PRESSED]: new UpArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_DOWN_ARROW_PRESSED]: new DownArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_SPACE_PRESSED]: new SpacePressController(service).handle,
+      [KEYBOARD_CONTROL_ENTER_PRESSED]: new EnterPressController(service).handle
+    };
+  }
+
+}
+
+export default EventHandlerFactory;

package/es/library/behaviours/keyboard-controls/frameworks/KeyboardControlBehaviourFactory.js

@@ -0,0 +1,23 @@
+import EventHandlerFactory from "./EventHandlerFactory";
+import events from "../../../../bc/keyboard-controls/Events";
+import properties from "../../../../bc/keyboard-controls/Properties";
+
+class KeyboardControlBehaviourFactory {
+  static create() {
+    return {
+      name: 'keyboardControls',
+      setInitialState: () => {
+        return {
+          focussedIndex: 0,
+          totalLists: 0
+        };
+      },
+      eventHandlers: EventHandlerFactory.create(),
+      events,
+      properties
+    };
+  }
+
+}
+
+export default KeyboardControlBehaviourFactory;

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/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,9 +1,13 @@
 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";
+import TableColumnChooser from "../../../../legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooser";
+import Checkbox from "../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
 import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['TableColumnSort']: TableColumnSort,
+  ['TableColumnChooser']: TableColumnChooser,
+  ['TableSelectAll']: Checkbox,
   ['TableColumnFilter']: TableColumnFilter
 };
 export default ActionComponentMapping;

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowClickController.js

@@ -0,0 +1,36 @@
+import SmartTableConstants from "../../../../../../cc/table-connected/constants/Events";
+import AbstractController from "./AbstractController";
+
+class KeyboardRowClickController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      dispatch,
+      action
+    } = event;
+    const {
+      event: keyboardEvent
+    } = action.payload;
+    const {
+      focussedRow,
+      data
+    } = state.properties || {};
+    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+
+    if (!record) {
+      return;
+    }
+
+    let id = record.id;
+    dispatch({
+      type: SmartTableConstants.SMART_TABLE_ROW_ACTION_TRIGGERED,
+      payload: {
+        id,
+        event: keyboardEvent
+      }
+    });
+  }
+
+}
+
+export default KeyboardRowClickController;

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowSelectController.js

@@ -0,0 +1,31 @@
+import { LIST_SELECTION_TOGGLE_ITEMS } from "../../../../../../bc/list-selection/Constants";
+import AbstractController from "./AbstractController";
+
+class KeyboardRowSelectController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      dispatch
+    } = event;
+    const {
+      focussedRow,
+      data
+    } = state.properties || {};
+    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+
+    if (!record) {
+      return;
+    }
+
+    let id = record.id;
+    dispatch({
+      type: LIST_SELECTION_TOGGLE_ITEMS,
+      payload: {
+        selected: [id]
+      }
+    });
+  }
+
+}
+
+export default KeyboardRowSelectController;

package/es/library/dot/components/table-list/adapters/controllers/index.js

@@ -4,4 +4,6 @@ export { default as ScrollController } from "./ScrollController";
 export { default as SortByController } from "./SortByController";
 export { default as SortedController } from "./SortedController";
 export { default as FieldChangeController } from "./FieldChangeController";
-export { default as FieldClickController } from "./FieldClickController";
+export { default as FieldClickController } from "./FieldClickController";
+export { default as KeyboardRowSelectController } from "./KeyboardRowSelectController";
+export { default as KeyboardRowClickController } from "./KeyboardRowClickController";

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

@@ -4,10 +4,11 @@ class TableTranslator {
       data,
       selectionConfig,
       selection,
-      sortBy
+      sortBy,
+      focussedRow
     } = state.properties;
     const headers = TableTranslator.translateHeaders(data.headers, sortBy);
-    const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
+    const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig, focussedRow);
     state = { ...state,
       properties: { ...state.properties,
         data: { ...data,
@@ -28,13 +29,14 @@ class TableTranslator {
     });
   }
 
-  static translateRows(rows, selection, selectionConfig) {
+  static translateRows(rows, selection, selectionConfig, focussedRow) {
     const {
       selected,
       hasAllSelected
     } = selection;
     return rows.map((row, index) => {
       return { ...row,
+        isFocussed: focussedRow === index,
         isSelected: selected.includes(row.id),
         isSelectable: selected.includes(row.id) || !hasAllSelected,
         selectionTooltip: this.getSelectionTooltip(row.id, index, selected, hasAllSelected, selectionConfig)