Web: Components: Fix EmailInput + tests

packages/asc-web-components/email-input/email-input.stories.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { EmailSettings } from "../utils/email";
 import EmailInput from "./";
 
 const Template = ({
@@ -16,7 +17,7 @@ const Template = ({
   const onChangeHandler = (value) => {
     setEmailValue(value);
   };
-  const settings = {
+  const settings = EmailSettings.parse({
     allowDomainPunycode,
     allowLocalPartPunycode,
     allowDomainIp,
@@ -24,7 +25,7 @@ const Template = ({
     allowSpaces,
     allowName,
     allowLocalDomainName,
-  };
+  });
   return (
     <EmailInput
       {...rest}

packages/asc-web-components/email-input/email-input.stories.mdx

@@ -35,36 +35,19 @@ You can apply all properties of the `TextInput` component to the component
 
 Our validation algorithm based on [RFC 5322 email address parser](https://www.npmjs.com/package/email-addresses).
 
-For email validating you should use plain Object or EmailSettings with following settings:
-
-      const settings = {
-        allowDomainPunycode,
-        allowLocalPartPunycode,
-        allowDomainIp,
-        allowStrictLocalPart,
-        allowSpaces,
-        allowName,
-        allowLocalDomainName,
-      };
-
-### emailSettings prop
-
-Plain object:
+For email validating you should use instance of EmailSettings class with following settings:
 
 ```js
-const emailSettings = {
-  allowDomainPunycode: false,
-  allowLocalPartPunycode: false,
-  allowDomainIp: false,
-  allowStrictLocalPart: true,
-  allowSpaces: false,
-  allowName: false,
-  allowLocalDomainName: false,
-};
+const settings = new EmailSettings();
+settings.allowDomainPunycode = false;
+settings.allowLocalPartPunycode = false;
+settings.allowDomainIp = false;
+settings.allowStrictLocalPart = true;
+settings.allowSpaces = false;
+settings.allowName = false;
+settings.allowLocalDomainName = false;
 ```
 
-or instance of `EmailSettings` class:
-
 ```js
 import { EmailInput, utils } from "@appserver/components";
 const { EmailSettings } = utils.email;

packages/asc-web-components/email-input/email-input.test.js

@@ -94,46 +94,6 @@ describe("<EmailInput />", () => {
     expect(wrapper).toExist();
   });
 
-  it("re-render test", () => {
-    const wrapper = shallow(<EmailInput {...baseProps} />).instance();
-
-    const shouldUpdate = wrapper.shouldComponentUpdate(
-      {
-        id: "newEmailInputId",
-        name: "emailInputName",
-        value: "",
-        size: "base",
-        scale: false,
-        isDisabled: false,
-        isReadOnly: false,
-        maxLength: 255,
-        placeholder: "email",
-        onValidateInput: () => jest.fn(),
-      },
-      wrapper.state
-    );
-
-    expect(shouldUpdate).toBe(true);
-  });
-
-  it("re-render after changing emailSettings prop", () => {
-    const emailSettings = new EmailSettings();
-    const wrapper = shallow(
-      <EmailInput {...baseProps} emailSettings={emailSettings} />
-    );
-    const instance = wrapper.instance();
-
-    emailSettings.allowName = true;
-    const shouldUpdate = instance.shouldComponentUpdate(
-      {
-        emailSettings,
-      },
-      wrapper.state
-    );
-
-    expect(shouldUpdate).toBe(true);
-    expect(wrapper.state("emailSettings")).toBe(emailSettings);
-  });
   it('isValidEmail is "false" after deleting value', () => {
     const wrapper = mount(<EmailInput {...baseProps} />);
 
@@ -150,17 +110,6 @@ describe("<EmailInput />", () => {
     expect(wrapper.state().isValidEmail.isValid).toBe(false);
   });
 
-  it("not re-render test", () => {
-    const wrapper = shallow(<EmailInput {...baseProps} />).instance();
-
-    const shouldUpdate = wrapper.shouldComponentUpdate(
-      wrapper.props,
-      wrapper.state
-    );
-
-    expect(shouldUpdate).toBe(false);
-  });
-
   it("passed valid email: simple@example.com", () => {
     const onValidateInput = jest.fn((isValidEmail) => {
       expect(isValidEmail.isValid).toEqual(true);
@@ -352,7 +301,7 @@ describe("<EmailInput />", () => {
       <EmailInput
         {...baseProps}
         onValidateInput={onValidateInput}
-        emailSettings={emailSettings}
+        emailSettings={EmailSettings.parse(emailSettings)}
       />
     );
 
@@ -517,7 +466,7 @@ describe("<EmailInput />", () => {
       <EmailInput
         {...baseProps}
         onValidateInput={onValidateInput}
-        emailSettings={emailSettings}
+        emailSettings={EmailSettings.parse(emailSettings)}
       />
     );
 

packages/asc-web-components/email-input/index.js

@@ -21,30 +21,16 @@ class EmailInput extends React.Component {
     super(props);
 
     const { value, emailSettings } = this.props;
-    const validatedSettings = EmailSettings.parse(emailSettings);
-    const isValidEmail = this.checkEmail(value, validatedSettings);
+    const isValidEmail = this.checkEmail(value, emailSettings);
 
     this.state = {
       isValidEmail,
-      emailSettings: validatedSettings,
       inputValue: value,
     };
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return !equal(this.props, nextProps) || !equal(this.state, nextState);
-  }
-
   componentDidUpdate(prevProps) {
-    const { emailSettings, value } = this.props;
-
-    if (!EmailSettings.equals(emailSettings, prevProps.emailSettings)) {
-      const validatedSettings = EmailSettings.parse(emailSettings);
-
-      this.setState({ emailSettings: validatedSettings }, () => {
-        this.validate(this.state.inputValue);
-      });
-    }
+    const { value } = this.props;
 
     if (value !== prevProps.value) {
       this.validate(value);
@@ -61,8 +47,8 @@ class EmailInput extends React.Component {
     onValidateInput && onValidateInput(isValidEmail);
   };
 
-  checkEmail = (value, emailSettings = this.state.emailSettings) => {
-    const { customValidate } = this.props;
+  checkEmail = (value) => {
+    const { customValidate, emailSettings } = this.props;
     if (customValidate) {
       return customValidate(value);
     } else {
@@ -83,9 +69,9 @@ class EmailInput extends React.Component {
   onChange = (e) => {
     const { onChange, onValidateInput } = this.props;
 
-    onChange ? onChange(e) : this.setState({ inputValue: e.target.value });
+    onChange && onChange(e);
     const isValidEmail = this.checkEmail(e.target.value);
-    this.setState({ isValidEmail });
+    this.setState({ isValidEmail, inputValue: e.target.value });
 
     onValidateInput && onValidateInput(isValidEmail);
   };
@@ -126,10 +112,7 @@ EmailInput.propTypes = {
   /** Function for your custom validation input value. Function must return object with following parameters: `value`: string value of input, `isValid`: boolean result of validating, `errors`(optional): array of errors */
   customValidate: PropTypes.func,
   /** { allowDomainPunycode: false, allowLocalPartPunycode: false, allowDomainIp: false, allowStrictLocalPart: true, allowSpaces: false, allowName: false, allowLocalDomainName: false } | Settings for validating email  */
-  emailSettings: PropTypes.oneOfType([
-    PropTypes.instanceOf(EmailSettings),
-    PropTypes.objectOf(PropTypes.bool),
-  ]),
+  emailSettings: PropTypes.instanceOf(EmailSettings),
   /** Used in your custom validation  */
   hasError: PropTypes.bool,
   /** Supported size of the input fields.  */