Support async-validate emails

[jopemachine]

Changes

• Support async-validate emails

Notes

I tested this after removing node-sass due to node-sass issue.

Please let me know if node-sass should be removed from dev-dependency.

Manual Test

Test code

// validateEmail={this.asyncTest}
  asyncTest <=> async () => {
    return new Promise<boolean>((resolve, reject) => {
      setTimeout(() => resolve(true), 1000);
    });
  };

...

<ReactMultiEmail
  placeholder="Input your email"
  emails={emails}
  onChange={(_emails: string[]) => {
    this.setState({ emails: _emails });
  }}
  validateEmail={this.asyncTest}
  getLabel={(
    email: string,
    index: number,
    removeEmail: (index: number) => void,
  ) => {
    return (
      <div data-tag key={index}>
        <div data-tag-item>{email}</div>
        <span data-tag-handle onClick={() => removeEmail(index)}>
          ×
        </span>
      </div>
    );
  }}
/>;

Result

An email was added when the validation returned true one second after entering the enter.

[thomasJang]

Great work! Thank you.
but can you add a spinning state when validating emails?

[jopemachine]

Great work! Thank you.
but can you add a spinning state when validating emails?

Thanks for your feedback.

I think some users may not like that the spinner is in the EmailComponent.

And some users might want to change their spinner's style.

So, I created an enableSpinner flag so that the spinner does not come out when the value is false.

I think users can use their spinner in the way below.

  asyncTest = async () => {
    return new Promise<boolean>((resolve, reject) => {
      // Show user's spinner
      this.setState({ validating: true })
      setTimeout(() => {
        resolve(true);
        // Hide user's spinner
        this.setState({ validating: false })
      }, 1000);
    });
  };

...

          <ReactMultiEmail
            placeholder="Input your email"
            emails={emails}
            onChange={(_emails: string[]) => {
              this.setState({ emails: _emails });
            }}
            validateEmail={this.asyncTest}
            enableSpinner={false}
            getLabel={(
              email: string,
              index: number,
              removeEmail: (index: number) => void,
            ) => {
              return (
                <div data-tag key={index}>
                  <div data-tag-item>
                    {email}
                  </div>
                  <span data-tag-handle onClick={() => removeEmail(index)}>
                    ×
                  </span>
                </div>
              );
            }}
          />


And users who want to spinner of ReactMultiEmail,

just can write this.

          <ReactMultiEmail
            placeholder="Input your email"
            emails={emails}
            onChange={(_emails: string[]) => {
              this.setState({ emails: _emails });
            }}
            validateEmail={this.asyncTest}
            getLabel={(
              email: string,
              index: number,
              removeEmail: (index: number) => void,
            ) => {
              return (
                <div data-tag key={index}>
                  <div data-tag-item>
                    {email}
                  </div>
                  <span data-tag-handle onClick={() => removeEmail(index)}>
                    ×
                  </span>
                </div>
              );
            }}
          />


The below gif is the demo using the spinner that I made.

(I didn't use react-spinner or other libs because I think we should keep no-dependency. Otherwise, just let me know).

Please let me know if spinner's design doesn't suit here or if there are other issues.

[shibinNeoito]

@jopemachine Can you update the package to capture the onChange of the value typed in the input box?