????
Your IP : 216.73.216.79
import {memo, useEffect, useState} from "@wordpress/element";
const EmailInput = ({
value,
onChange,
onError,
required,
disabled,
id,
name,
}) => {
const inputId = id || name;
const [inputValue, setInputValue] = useState(value);
const isValidEmail = (string) => {
//convert 'string' to string
string = string + '';
var res = string.match(/^[\w.+_-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
return (res !== null)
};
//ensure that the initial value is set
useEffect(() => {
if (!value) value = '';
setInputValue(value);
},[]);
//because an update on the entire Fields array is costly, we only update after the user has stopped typing
useEffect(() => {
if (value=== inputValue) {
return;
}
const typingTimer = setTimeout(() => {
onChange(inputValue);
if (!isValidEmail(inputValue)) {
onError('invalid_email');
}
}, 500);
return () => {
clearTimeout(typingTimer);
};
}, [inputValue]);
const handleChange = ( value ) => {
setInputValue(value);
};
return (
<div className="cmplz-input-group cmplz-email-input-group">
<input
type='email'
id={inputId}
name={name}
value={inputValue}
onChange={(event) => handleChange(event.target.value)}
required={required}
disabled={disabled}
className="cmplz-email-input-group__input"
/>
</div>
);
};
export default memo(EmailInput);