wp-optimize
/
vendor
/
team-updraft
/
lib-onboarding-wizard
/
Wizard
/
Onboarding
/
src
/
components
/
Fields
/
Email.jsx
Email.jsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.5.2, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/Email.jsx
| 1 | import { useState, useEffect } from "react"; |
| 2 | import TextInput from "./TextInput"; |
| 3 | import FieldWrapper from "./FieldWrapper"; |
| 4 | import { __ } from "@wordpress/i18n"; |
| 5 | import { isValidEmail } from "@/utils/validators"; |
| 6 | |
| 7 | const Email = ({ field, onChange, value }) => { |
| 8 | const [isValid, setIsValid] = useState(false); // null = untouched, true = valid, false = invalid |
| 9 | const [touched, setTouched] = useState(false); |
| 10 | |
| 11 | // Reset validation when value becomes empty |
| 12 | useEffect(() => { |
| 13 | if (!value) { |
| 14 | setIsValid(false); |
| 15 | setTouched(false); |
| 16 | return; |
| 17 | } |
| 18 | |
| 19 | // Only pre-validate if value is non-empty AND field just loaded (like a default value) |
| 20 | if (value && !touched) { |
| 21 | setIsValid(isValidEmail(value)); |
| 22 | setTouched(true); |
| 23 | } |
| 24 | }, [value]); |
| 25 | |
| 26 | const handleBlur = () => { |
| 27 | setTouched(true); |
| 28 | if (value) { |
| 29 | setIsValid(isValidEmail(value)); |
| 30 | } else { |
| 31 | setIsValid(false); |
| 32 | } |
| 33 | }; |
| 34 | |
| 35 | return ( |
| 36 | <FieldWrapper inputId={field.id} label={field.label}> |
| 37 | <div className="relative w-full"> |
| 38 | <TextInput |
| 39 | placeholder={__("Enter your e-mail address", "ONBOARDING_WIZARD_TEXT_DOMAIN")} |
| 40 | type="email" |
| 41 | field={field} |
| 42 | onChange={(e) => onChange(e.target.value)} |
| 43 | onBlur={handleBlur} |
| 44 | value={value} |
| 45 | className={`w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-0 |
| 46 | ${touched && isValid === true ? "border-[#046C4E]" : ""} |
| 47 | ${touched && isValid === false ? "border-red" : ""}`} |
| 48 | /> |
| 49 | |
| 50 | {touched && isValid === true && value && ( |
| 51 | <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[#046C4E]">✔</span> |
| 52 | )} |
| 53 | {touched && isValid === false && value && ( |
| 54 | <span className="absolute right-3 top-1/2 -translate-y-1/2 text-red">✖</span> |
| 55 | )} |
| 56 | </div> |
| 57 | </FieldWrapper> |
| 58 | ); |
| 59 | }; |
| 60 | |
| 61 | export default Email; |
| 62 |