2019-12-25 13:56:09 +00:00
import React from "react" ;
import PropTypes from "prop-types" ;
import TextInput from "../text-input" ;
2021-02-25 12:16:52 +00:00
import { EmailSettings , parseAddress } from "../utils/email/" ;
2020-12-08 11:09:46 +00:00
import equal from "fast-deep-equal/react" ;
2019-12-25 13:56:09 +00:00
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
const TextInputWrapper = ( {
onValidateInput ,
isValidEmail ,
emailSettings ,
2020-09-01 13:28:35 +00:00
customValidate ,
2019-12-25 13:56:09 +00:00
... props
} ) => < TextInput { ... props } > < / T e x t I n p u t > ;
/* eslint-enable react/prop-types */
/* eslint-enable no-unused-vars */
2019-10-10 06:42:00 +00:00
class EmailInput extends React . Component {
2019-10-11 17:59:27 +00:00
constructor ( props ) {
super ( props ) ;
const { value , emailSettings } = this . props ;
2022-03-16 15:51:02 +00:00
const isValidEmail = this . checkEmail ( value , emailSettings ) ;
2019-10-10 06:42:00 +00:00
this . state = {
2019-12-19 07:35:25 +00:00
isValidEmail ,
2020-10-16 13:16:01 +00:00
inputValue : value ,
2019-12-25 13:56:09 +00:00
} ;
}
2019-12-18 13:30:09 +00:00
componentDidUpdate ( prevProps ) {
2022-03-16 15:51:02 +00:00
const { value } = this . props ;
2019-12-18 13:30:09 +00:00
2019-12-25 13:56:09 +00:00
if ( value !== prevProps . value ) {
this . validate ( value ) ;
2019-12-19 07:35:25 +00:00
}
2019-12-25 13:56:09 +00:00
}
2019-10-11 17:59:27 +00:00
2019-12-25 13:56:09 +00:00
validate = ( value ) => {
const { onValidateInput } = this . props ;
const isValidEmail = this . checkEmail ( value ) ;
this . setState ( {
inputValue : value ,
2020-10-16 13:16:01 +00:00
isValidEmail ,
2019-12-25 13:56:09 +00:00
} ) ;
onValidateInput && onValidateInput ( isValidEmail ) ;
2020-10-16 13:16:01 +00:00
} ;
2019-10-10 06:42:00 +00:00
2022-03-16 15:51:02 +00:00
checkEmail = ( value ) => {
const { customValidate , emailSettings } = this . props ;
2019-12-25 13:56:09 +00:00
if ( customValidate ) {
return customValidate ( value ) ;
} else {
2019-12-19 07:35:25 +00:00
const emailObj = parseAddress ( value , emailSettings ) ;
const isValidEmail = emailObj . isValid ( ) ;
2019-12-23 09:02:03 +00:00
const parsedErrors = emailObj . parseErrors ;
2019-12-25 13:56:09 +00:00
const errors = parsedErrors
2020-10-16 13:16:01 +00:00
? parsedErrors . map ( ( error ) => error . errorKey )
2019-12-25 13:56:09 +00:00
: [ ] ;
2019-12-23 09:02:03 +00:00
return {
2019-12-25 13:56:09 +00:00
value ,
2019-12-23 09:02:03 +00:00
isValid : isValidEmail ,
2020-10-16 13:16:01 +00:00
errors ,
2019-12-23 09:02:03 +00:00
} ;
2019-12-18 13:30:09 +00:00
}
2019-12-25 13:56:09 +00:00
} ;
2019-12-19 07:35:25 +00:00
2020-10-16 13:16:01 +00:00
onChange = ( e ) => {
2022-03-15 10:57:33 +00:00
const { onChange , onValidateInput } = this . props ;
2019-12-19 07:35:25 +00:00
2022-03-16 15:51:02 +00:00
onChange && onChange ( e ) ;
2019-12-19 07:35:25 +00:00
const isValidEmail = this . checkEmail ( e . target . value ) ;
2022-03-16 15:51:02 +00:00
this . setState ( { isValidEmail , inputValue : e . target . value } ) ;
2019-10-30 14:24:52 +00:00
2019-12-19 07:35:25 +00:00
onValidateInput && onValidateInput ( isValidEmail ) ;
2019-12-25 13:56:09 +00:00
} ;
2019-10-10 06:42:00 +00:00
2022-03-14 11:18:10 +00:00
onBlur = ( e ) => {
const { onBlur } = this . props ;
onBlur && onBlur ( e ) ;
} ;
2019-10-10 06:42:00 +00:00
render ( ) {
//console.log('EmailInput render()');
2019-10-14 10:57:46 +00:00
// eslint-disable-next-line no-unused-vars
2020-10-16 13:16:01 +00:00
const { onValidateInput , hasError } = this . props ;
2019-10-10 06:42:00 +00:00
2019-10-14 14:02:08 +00:00
const { isValidEmail , inputValue } = this . state ;
2019-12-25 13:56:09 +00:00
const isError =
typeof hasError === "boolean"
? hasError
: Boolean ( inputValue && ! isValidEmail . isValid ) ;
2019-10-10 06:42:00 +00:00
return (
2019-12-25 13:56:09 +00:00
< TextInputWrapper
{ ... this . props }
2019-12-23 09:02:03 +00:00
hasError = { isError }
2019-10-14 14:02:08 +00:00
value = { inputValue }
2019-12-18 13:30:09 +00:00
onChange = { this . onChange }
2019-12-25 13:56:09 +00:00
type = "text"
2019-10-10 06:42:00 +00:00
onValidateInput = { onValidateInput }
2022-03-14 11:18:10 +00:00
onBlur = { this . onBlur }
2019-10-10 06:42:00 +00:00
/ >
) ;
}
}
EmailInput . propTypes = {
2021-03-04 22:58:36 +00:00
/** Accepts class */
2019-12-23 09:02:03 +00:00
className : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** 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 */
2019-12-25 13:56:09 +00:00
customValidate : PropTypes . func ,
2021-03-04 22:58:36 +00:00
/** { allowDomainPunycode: false, allowLocalPartPunycode: false, allowDomainIp: false, allowStrictLocalPart: true, allowSpaces: false, allowName: false, allowLocalDomainName: false } | Settings for validating email */
2022-03-16 15:51:02 +00:00
emailSettings : PropTypes . instanceOf ( EmailSettings ) ,
2021-03-04 22:58:36 +00:00
/** Used in your custom validation */
2019-12-23 09:02:03 +00:00
hasError : PropTypes . bool ,
2021-03-04 22:58:36 +00:00
/** Supported size of the input fields. */
2021-03-03 21:30:41 +00:00
size : PropTypes . oneOf ( [ "base" , "middle" , "big" , "huge" , "large" ] ) ,
2021-03-04 22:58:36 +00:00
/** Accepts id */
2019-11-27 13:59:27 +00:00
id : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** Function for your custom handling changes in input */
2019-12-23 09:02:03 +00:00
onChange : PropTypes . func ,
2022-03-14 11:18:10 +00:00
onBlur : PropTypes . func ,
2021-03-04 22:58:36 +00:00
/** Will be validate our value, return object with following parameters: `isValid`: boolean result of validating, `errors`: array of errors */
2019-12-23 09:02:03 +00:00
onValidateInput : PropTypes . func ,
2021-03-04 22:58:36 +00:00
/** Accepts css style */
2019-12-23 09:02:03 +00:00
style : PropTypes . oneOfType ( [ PropTypes . object , PropTypes . array ] ) ,
2021-03-04 22:58:36 +00:00
/** Value of the input */
2020-10-16 13:16:01 +00:00
value : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** Used as HTML `autocomplete` property */
2021-03-03 21:30:41 +00:00
autoComplete : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
2021-03-03 21:30:41 +00:00
isDisabled : PropTypes . bool ,
2021-03-04 22:58:36 +00:00
/** Indicates that the field is displaying read-only content */
2021-03-03 21:30:41 +00:00
isReadOnly : PropTypes . bool ,
2021-03-04 22:58:36 +00:00
/** Used as HTML `name` property */
2021-03-03 21:30:41 +00:00
name : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** Placeholder text for the input */
2021-03-03 21:30:41 +00:00
placeholder : PropTypes . string ,
2021-03-04 22:58:36 +00:00
/** Indicates the input field has scale */
2021-03-03 21:30:41 +00:00
scale : PropTypes . bool ,
2019-12-25 13:56:09 +00:00
} ;
2019-10-10 06:42:00 +00:00
EmailInput . defaultProps = {
2019-12-25 13:56:09 +00:00
autoComplete : "email" ,
className : "" ,
2019-12-23 10:40:19 +00:00
hasError : undefined ,
2019-12-25 13:56:09 +00:00
id : "" ,
2021-03-04 22:58:36 +00:00
/** kkkk;kk */
2019-10-10 06:42:00 +00:00
isDisabled : false ,
2019-10-10 11:33:48 +00:00
isReadOnly : false ,
2019-12-23 09:02:03 +00:00
maxLength : 255 ,
2019-12-25 13:56:09 +00:00
name : "" ,
placeholder : "" ,
2019-12-23 09:02:03 +00:00
scale : false ,
2019-12-25 13:56:09 +00:00
size : "base" ,
title : "" ,
value : "" ,
2021-03-04 22:58:36 +00:00
/** dfkasdfklasd;flkajs; */
2019-12-23 09:02:03 +00:00
withBorder : true ,
2021-03-04 22:58:36 +00:00
/** Some text */
2020-10-16 13:16:01 +00:00
emailSettings : new EmailSettings ( ) ,
2019-12-25 13:56:09 +00:00
} ;
2019-10-10 06:42:00 +00:00
export default EmailInput ;