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

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

@@ -58,7 +58,11 @@ const createCustomComponent = input => {
         newProps: props,
         helpers: this.helpers
       });
+      let proptypes = input.View.propTypes;
+      input.View.propTypes = undefined;
       this.View = /*#__PURE__*/forwardRef(input.View); //need to analyse react forwardref, removed from hoc
+
+      this.View.propTypes = proptypes;
     }
 
     componentDidMount() {
@@ -66,7 +70,7 @@ const createCustomComponent = input => {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return Compare.shallowCompare(this.props, nextProps) || Compare.shallowCompare(this.state, nextState);
+      return !Compare.deepEqual(this.props, nextProps) || !Compare.deepEqual(this.state, nextState); // return true;
     }
 
     componentWillUnmount() {
@@ -77,16 +81,28 @@ const createCustomComponent = input => {
       console.log('Error', error, errorInfo, errorInfo.componentStack);
     }
 
-    componentDidUpdate() {
-      this.controller.updateProperties(this.props);
+    componentWillReceiveProps(nextProps, nextContext) {
+      this.controller.updateProperties(nextProps);
+    }
+
+    componentDidUpdate() {// this.controller.updateProperties(this.props);
     }
 
     render() {
       let View = this.View;
 
       if (this.state.error) {
+        if (__TEST__) {
+          throw this.state.error;
+        }
+
+        const {
+          setElement
+        } = this.eventManager;
         console.log(this.state.error);
-        return /*#__PURE__*/React.createElement("div", null, "error");
+        return /*#__PURE__*/React.createElement("div", {
+          ref: setElement
+        }, "error");
       } else {
         const {
           setElement
@@ -104,6 +120,7 @@ const createCustomComponent = input => {
 
   }
 
+  Component.displayName = `Custom(${input.name})`;
   return Component;
 };
 

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import createCustomComponent from "../createCustomComponent";
-import { render, screen } from '@testing-library/react';
+import createCustomComponent from "../CreateCustomComponent";
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 let View = (_ref, ref) => {
@@ -10,7 +10,7 @@ let View = (_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    "data-testid": "custom-component",
+    "data-test-id": "custom-component",
     "data-title": state.properties.title
   }, "Hey");
 };
@@ -43,7 +43,11 @@ let mockComponentCC = {
   }]
 };
 describe('createCustomComponent integration test', () => {
-  // basic rendering test
+  beforeEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  }); // basic rendering test
+
   it('should mount the component and check the rendering', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
     let {
@@ -62,9 +66,11 @@ describe('createCustomComponent integration test', () => {
   });
   it('should pass props to the custom component', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
-    render( /*#__PURE__*/React.createElement(CustomComponent, null));
-    const component = screen.getByTestId('custom-component');
-    expect(component).toHaveAttribute('data-testid', 'custom-component');
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    const component = getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-test-id', 'custom-component');
   });
   it('should initialize custom behavior state', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
@@ -82,16 +88,17 @@ describe('createCustomComponent integration test', () => {
   it('should update component when props change and update property event', () => {
     const CustomComponent = createCustomComponent(mockComponentCC);
     const {
-      rerender
+      rerender,
+      getByTestId
     } = render( /*#__PURE__*/React.createElement(CustomComponent, {
       title: "Initial Title"
     }));
-    let component = screen.getByTestId('custom-component');
+    let component = getByTestId('custom-component');
     expect(component).toHaveAttribute('data-title', 'Initial Title');
     rerender( /*#__PURE__*/React.createElement(CustomComponent, {
       title: "Updated Title"
     }));
-    component = screen.getByTestId('custom-component');
+    component = getByTestId('custom-component');
     expect(component).toHaveAttribute('data-title', 'Updated Title');
     expect(mockComponentCC.eventHandlers['mockComponent#UPDATE_PROPERTIES']).toHaveBeenCalled();
   });

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

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

package/es/library/dot/components/form/adapters/presenter/TransformState.js

@@ -0,0 +1,57 @@
+function updateFieldValues(_ref) {
+  let {
+    sections,
+    values,
+    errorMessages
+  } = _ref;
+
+  if (!values) {
+    return sections;
+  }
+
+  return sections.map(section => {
+    const fields = section.fields.map(field => {
+      const updatedField = { ...field
+      };
+
+      if (values[field.name] !== undefined) {
+        updatedField.value = values[field.name];
+      }
+
+      if (errorMessages[field.name] !== undefined) {
+        updatedField.errorMessage = errorMessages[field.name];
+      }
+
+      if (updatedField.errorMessage === field.errorMessage && updatedField.value === field.value) {
+        return field;
+      }
+
+      return updatedField;
+    });
+    return { ...section,
+      fields
+    };
+  });
+}
+
+export function TransformState(state) {
+  const {
+    sections,
+    isLoading,
+    values,
+    errorMessages
+  } = state.properties; // const { values, errorMessages } = state.behaviours.form;
+
+  const updatedSections = updateFieldValues({
+    sections,
+    values,
+    errorMessages
+  });
+  return { ...state,
+    // properties: { ...state.properties, sections: updatedSections }
+    viewModel: {
+      sections: updatedSections,
+      isLoading
+    }
+  };
+}

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

@@ -0,0 +1,54 @@
+import SectionConstants from "../../../../../../cc/section/Constants";
+import FormConstants from "../../../../../../cc/form/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [SectionConstants.SECTION_FIELD_BLURRED]: this.handleSectionFieldBlurred,
+      [SectionConstants.SECTION_FIELD_CHANGED]: this.handleSectionFieldChanged
+    };
+  }
+
+  static handleSectionFieldBlurred(_ref) {
+    let {
+      action,
+      dispatch
+    } = _ref;
+    const {
+      id: sectionId,
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_BLURRED,
+      payload: {
+        sectionId,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleSectionFieldChanged(_ref2) {
+    let {
+      action,
+      dispatch
+    } = _ref2;
+    const {
+      id: sectionId,
+      fieldName,
+      value
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_VALUE_CHANGE_REQUEST,
+      payload: {
+        sectionId,
+        fieldName,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import FormProperties from "../../../../../../cc/form/Properties";
+import FormView from "./FormView";
+import { TransformState } from "../../adapters/presenter/TransformState";
+import EventHandlersFactory from "./EventHandlerFactory";
+const Form = createCustomComponent({
+  name: 'CustomForm',
+  View: FormView,
+  properties: FormProperties,
+  transformState: TransformState,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default Form;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormConstants from "../../../../../../cc/form/Constants";
+import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
+import Sections from "./sub-components/Sections";
+
+function FormView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    sections,
+    isLoading
+  } = state.viewModel;
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    dispatch({
+      type: FormConstants.FORM_SUBMIT
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, isLoading ?
+  /*#__PURE__*/
+  // Check for loading state
+  React.createElement("div", null, "Loading...") // Display loading indicator
+  : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    onClick: handleSubmit
+  }, "Submit"), /*#__PURE__*/React.createElement(Sections, {
+    sections: sections
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    onClick: handleSubmit
+  }, "Submit")));
+}
+
+export default FormView;

package/es/library/dot/components/form/frameworks/ui/__test__/Form.test.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Form from "../Form";
+beforeEach(() => {
+  cleanup();
+});
+describe('Form Sections', () => {
+  const formProperties = {
+    sections: [{
+      id: '1',
+      title: 'User Details',
+      description: '',
+      fields: [],
+      isVisible: true
+    }, {
+      id: '2',
+      title: 'Address Information',
+      description: '',
+      fields: [],
+      isVisible: true
+    }]
+  };
+  test('Sections are vertically aligned', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(getByText('Address Information')).toBeInTheDocument();
+  });
+  test('One section in a layout', () => {
+    const singleSectionProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    const {
+      getByText,
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...singleSectionProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(queryByText('Address Information')).not.toBeInTheDocument();
+  });
+  test('Multiple sections in a layout', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(getByText('Address Information')).toBeInTheDocument();
+  });
+  test('Maintain section order during rendering', () => {
+    const {
+      getAllByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+  });
+  test('Insert a new section at a specific position', () => {
+    const {
+      getAllByText,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+    const updatedProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }, {
+        id: '3',
+        title: 'Order Summary',
+        description: '',
+        fields: [],
+        isVisible: true
+      }, {
+        id: '2',
+        title: 'Address Information',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
+    }));
+    const updatedSections = getAllByText(/Details|Summary|Information/);
+    expect(updatedSections[0]).toHaveTextContent('User Details');
+    expect(updatedSections[1]).toHaveTextContent('Order Summary');
+    expect(updatedSections[2]).toHaveTextContent('Address Information');
+  });
+  test('Delete a section', () => {
+    const {
+      getAllByText,
+      getByText,
+      queryByText,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
+    }));
+    const sections = getAllByText(/Details|Information/);
+    expect(sections[0]).toHaveTextContent('User Details');
+    expect(sections[1]).toHaveTextContent('Address Information');
+    const updatedProperties = { ...formProperties,
+      sections: [{
+        id: '1',
+        title: 'User Details',
+        description: '',
+        fields: [],
+        isVisible: true
+      }]
+    };
+    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
+    }));
+    expect(getByText('User Details')).toBeInTheDocument();
+    expect(queryByText('Address Information')).not.toBeInTheDocument();
+  }); // Loading tests
+
+  test('Display loading indicator during form loading', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+      isLoading: true
+    }));
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+  test('No loading indicator when form is not loading', () => {
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+      isLoading: false
+    }));
+    expect(queryByText('Loading...')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,29 @@
+.fieldWrapper {
+    position: relative
+}
+
+.field {
+    margin-top: var(--zd_size5) ;
+}
+
+.multiSelectField {
+    margin-top: var(--zd_size2) 
+}
+
+.checkboxField {
+    composes: dflex alignFstart from '~@zohodesk/components/lib/common/common.module.css';
+    gap: var(--zd_size8) 
+}
+.checkboxWrapper {
+    margin-top: var(--zd_size3) 
+}
+
+.cursor_pointer {
+    cursor: pointer
+}
+.cursor_not_allowed {
+    cursor: not-allowed
+}
+.cursor_default {
+    cursor: default
+}

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

@@ -0,0 +1,32 @@
+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 {
+    sections
+  } = _ref;
+  return sections.map(section => {
+    const {
+      id,
+      title,
+      description,
+      isVisible,
+      fields,
+      type
+    } = section;
+    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
+    });
+  });
+}

package/es/library/dot/components/form-fields/checkbox/adapters/presenter/TransformState.js

@@ -0,0 +1,22 @@
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/Checkbox.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import CheckboxProperties from "../../../../../../../cc/fields/boolean/Properties";
+import CheckboxView from "./CheckboxView";
+import { TransformState } from "../../adapters/presenter/TransformState";
+import EventHandlersFactory from "./EventHandlerFactory";
+let Checkbox = createCustomComponent({
+  name: 'FormCheckboxField',
+  View: CheckboxView,
+  transformState: TransformState,
+  properties: CheckboxProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default Checkbox;

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import CheckboxConstants from "../../../../../../../cc/checkbox/Constants";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage';
+import FieldController from '@zohodesk-private/desk-components/es/form/FieldController/FieldController';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import Checkbox from "../../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function cursorStyle(_ref) {
+  let {
+    disabled,
+    readonly
+  } = _ref;
+  if (disabled) return style.cursor_not_allowed;
+  if (readonly) return style.cursor_default;
+  return style.cursor_pointer;
+}
+
+function CheckboxView(_ref2, ref) {
+  let {
+    state,
+    helpers
+  } = _ref2;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    label,
+    value,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  const isEditable = !disabled && !readonly;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(FieldController, {
+    $ui_className: `${style.checkboxField} ${cursorStyle({
+      disabled,
+      readonly
+    })}`,
+    $event_onFocus: isEditable ? () => dispatch({
+      type: CheckboxConstants.CHECKBOX_FOCUSED
+    }) : null,
+    $event_onBlur: isEditable ? () => dispatch({
+      type: CheckboxConstants.CHECKBOX_BLURED
+    }) : null,
+    $tagAttributes_container: isEditable ? {
+      onClick: () => dispatch({
+        type: CheckboxConstants.CHECKBOX_TOGGLED
+      })
+    } : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.checkboxWrapper
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: id,
+    checked: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly
+  })), /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default CheckboxView;