@zohodesk/library-platform 1.1.1 → 1.1.2

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

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

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

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleFieldFocus,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleFieldBlur,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleFieldChange
+    };
+  }
+
+  static handleFieldFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleFieldChange(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/percentage/frameworks/ui/Percentage.js

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

package/es/library/dot/components/form-fields/percentage/frameworks/ui/PercentageView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function PercentageView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    disabled: disabled,
+    readonly: readonly,
+    required: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default PercentageView;

package/es/library/dot/components/form-fields/percentage/frameworks/ui/__test__/Percentage.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Percentage from "../Percentage";
+import { testEPHIFieldVisibility, testCommonFieldAttributes, testRequiredTextKindFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('Percentage Field Component', () => {
+  it('should render the Percentage component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Percentage, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter percentage here';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(Percentage, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(Percentage, {
+    id: 'percentage-field'
+  });
+  testRequiredTextKindFieldAttributes(Percentage, {
+    id: 'percentage-field'
+  });
+  testDisabledTextKindFieldAttributes(Percentage, {
+    id: 'percentage-field'
+  });
+  testReadOnlyTextKindFieldAttributes(Percentage, {
+    id: 'percentage-field'
+  });
+  testEPHIFieldVisibility(Percentage, {
+    id: 'percentage-field'
+  });
+  testTextKindFieldValueChange(Percentage, {
+    id: 'percentage-field',
+    value: ''
+  }, '20');
+});

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

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

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

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleFieldFocus,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleFieldBlur,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleFieldChange
+    };
+  }
+
+  static handleFieldFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleFieldChange(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/phone/frameworks/ui/Phone.js

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

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function PhoneView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    disabled: disabled,
+    readonly: readonly,
+    required: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default PhoneView;

package/es/library/dot/components/form-fields/phone/frameworks/ui/__test__/Phone.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Phone from "../Phone";
+import { testEPHIFieldVisibility, testCommonFieldAttributes, testRequiredTextKindFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('Phone Field Component', () => {
+  it('should render the Phone component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Phone, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter phone number';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(Phone, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(Phone, {
+    id: 'phone-field'
+  });
+  testRequiredTextKindFieldAttributes(Phone, {
+    id: 'phone-field'
+  });
+  testDisabledTextKindFieldAttributes(Phone, {
+    id: 'phone-field'
+  });
+  testReadOnlyTextKindFieldAttributes(Phone, {
+    id: 'phone-field'
+  });
+  testEPHIFieldVisibility(Phone, {
+    id: 'phone-field'
+  });
+  testTextKindFieldValueChange(Phone, {
+    id: 'phone-field',
+    value: ''
+  }, '1234567890');
+});

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

@@ -0,0 +1,23 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    properties: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/EventHandlerFactory.js

@@ -0,0 +1,70 @@
+import SelectConstants from "../../../../../../../cc/select/Constants";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [SelectConstants.SELECT_FOCUSED]: this.handleFocus,
+      [SelectConstants.SELECT_BLURED]: this.handleBlur,
+      [SelectConstants.SELECT_CHANGED]: this.handleChange
+    };
+  }
+
+  static handleFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleChange(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/PickList.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import { PickListFieldProperties } from "../../../../../../../cc/fields";
+import PickListView from "./PickListView";
+import { TransformState } from "./../../adapters/presenter/TransformState";
+import EventHandlerFactory from "./EventHandlerFactory";
+const PickList = createCustomComponent({
+  name: 'FormPickListField',
+  View: PickListView,
+  transformState: TransformState,
+  properties: PickListFieldProperties,
+  eventHandlers: EventHandlerFactory.create(),
+  behaviours: []
+});
+export default PickList;

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/PickListView.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import SelectConstants from "../../../../../../../cc/select/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 Select from "../../../../../legacy-to-new-arch/select/frameworks/ui/Select"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function PickListView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    label,
+    errorMessage,
+    options,
+    value,
+    required,
+    disabled,
+    readonly,
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    isMandatory: required,
+    actions: actions
+  }), /*#__PURE__*/React.createElement(FieldController, {
+    $ui_className: style.field,
+    $event_onFocus: () => dispatch({
+      type: SelectConstants.SELECT_FOCUSED
+    }),
+    $event_onBlur: () => dispatch({
+      type: SelectConstants.SELECT_BLURED
+    })
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: options,
+    value: value,
+    id: id,
+    required: required,
+    disabled: disabled,
+    readonly: readonly
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default PickListView;

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/__test__/PickList.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PickList from "../PickList";
+import { testCommonFieldAttributes, testFieldValueChange } from "../../../../field/__test__/common.js";
+const options = [{
+  value: '-None-'
+}, {
+  value: 'Chennai'
+}, {
+  value: 'Mumbai'
+}];
+describe('PickList Field Component', () => {
+  it('should render the PickList component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(PickList, null));
+    const select = getByRole('combobox');
+    expect(select).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(PickList, {
+    id: 'pickList-field'
+  });
+  it('should be required when required prop is true', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(PickList, {
+      required: true
+    }));
+    const select = getByRole('combobox');
+    expect(select).toBeRequired();
+  });
+  it('should be disabled when disabled prop is true', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(PickList, {
+      disabled: true
+    }));
+    const select = getByRole('combobox');
+    expect(select).toBeDisabled();
+  });
+  it('should be readonly when readonly prop is true', () => {
+    const {
+      getByRole,
+      queryByRole
+    } = render( /*#__PURE__*/React.createElement(PickList, {
+      readonly: true,
+      options: options
+    }));
+    const select = getByRole('combobox');
+    fireEvent.click(select);
+    expect(queryByRole('option')).not.toBeInTheDocument();
+  });
+  testFieldValueChange({
+    Component: PickList,
+    props: {
+      id: 'pickList-field',
+      options
+    },
+    value: 'Chennai',
+    triggerChange: _ref => {
+      let {
+        getByRole
+      } = _ref;
+      const select = getByRole('combobox');
+      fireEvent.click(select);
+      fireEvent.click(getByRole('option', {
+        name: 'Chennai'
+      }));
+    }
+  });
+});

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

@@ -0,0 +1,23 @@
+// import TransFormState from '../../adapters/presenter/TransFormState';
+export function TransformState(state) {
+  const {
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  return { ...state,
+    properties: { ...state.properties,
+      actions
+    }
+  };
+}