DocSpace-client/packages/components/email-input

EmailInput

Email entry field with advanced capabilities for validation based on settings

Usage

import EmailInput from "@docspace/components/email-input";
import { EmailSettings } from "@docspace/components/utils/email";

const settings = new EmailSettings();

settings.allowDomainPunycode = true;

<EmailInput
  name="email"
  placeholder="email"
  emailSettings={settings}
  onValidateInput={result =>
    console.log("onValidateInput", result.value, result.isValid, result.errors);
  }
/>;

Properties

You can apply all properties of the TextInput component to the component

Props	Type	Required	Values	Default	Description
className	string	-	-	-	Accepts class
customValidate	func	-	-	-	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
emailSettings	Object, EmailSettings	-	-	{ allowDomainPunycode: false, allowLocalPartPunycode: false, allowDomainIp: false, allowStrictLocalPart: true, allowSpaces: false, allowName: false, allowLocalDomainName: false }	Settings for validating email
hasError	bool	-	-	-	Used in your custom validation
id	string	-	-	-	Accepts id
onChange	func	-	-	-	Function for your custom handling changes in input
onValidateInput	func	-	{ isValid: bool, errors: array}	-	Will be validate our value, return object with following parameters: isValid: boolean result of validating, errors: array of errors
style	obj, array	-	-	-	Accepts css style

Validate email

Our validation algorithm based on RFC 5322 email address parser.

For email validating you should use plain Object or EmailSettings with following settings:

Props	Type	Required	Default	Description
allowDomainIp	bool	-	false	Allow email with IP address in domain, e. g. user@[127.0.0.1] is a valid email address
allowDomainPunycode	bool	-	false	Allow email with punycode symbols in domain, e. g. example@джpумлатест.bрфa and example@mañana.com are valid email addresses
allowLocalDomainName	bool	-	false	Allow local domain address, e. g. admin@local is a valid email address
allowLocalPartPunycode	bool	-	false	Allow email with punycode symbols in local part, e. g. джумла@example.com and mañana@example.com are valid email addresses
allowName	bool	-	false	Supports all features of RFC 5322, which means that "Bob Example" <bob@example.com> is a valid email address
allowSpaces	bool	-	false	Allow spaces in local part and domain, e. g. " "@example.org is a valid email address
allowStrictLocalPart	bool	-	true	Allow email, started with latin symbols and digits(([a-zA-Z0-9]+)) and also contains _,-,.,+. Used RegEx /^([a-zA-Z0-9]+)([_\-\.\+][a-zA-Z0-9]+)\*\$/

emailSettings prop

Plain object:

const emailSettings = {
  allowDomainPunycode: false,
  allowLocalPartPunycode: false,
  allowDomainIp: false,
  allowStrictLocalPart: true,
  allowSpaces: false,
  allowName: false,
  allowLocalDomainName: false,
};

or instance of EmailSettings class:

import { EmailInput, utils } from "@docspace/components";
const { EmailSettings } = utils.email;

const emailSettings = new EmailSettings();

emailSettings.toObject(); /* returned Object with default settings:
{
  allowDomainPunycode: false,
  allowLocalPartPunycode: false,
  allowDomainIp: false,
  allowStrictLocalPart: true,
  allowSpaces: false,
  allowName: false,
  allowLocalDomainName: false
}
*/
email.allowName = true; // set allowName setting to true

emailSettings.toObject(); /* returned Object with NEW settings:
{
  
  allowDomainPunycode: false,
  allowLocalPartPunycode: false,
  allowDomainIp: false,
  allowStrictLocalPart: true,
  allowSpaces: false,
  allowName: true,
  allowLocalDomainName: false

}
*/

Custom validate email

You should use custom validation with the customValidate prop. This prop contains 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.

Base colors:

Сomponent actions	isValid	border-color
:focus	false	#c30
:focus	true	#2DA7DB
:hover	false	#c30
:hover	true	#D0D5DA
default	false	#c30
default	true	#D0D5DA

import React from "react";
import { EmailInput } from "@docspace/components";

const onChange = (e) => {
  // your event handling
  customValidate(e.target.value);
};

const customValidate = (value) => {
  const isValid = !!(value && value.length > 0);
  return {
    value,
    isValid: isValid,
    errors: isValid ? [] : ["incorrect email"],
  };
};

const onValidateInput = (result) => {
  console.log("onValidateInput", result);
};

<EmailInput
  customValidate={customValidate}
  onChange={onChange}
  onValidateInput={onValidateInput}
/>