glide-design-system/src/lib/components/email/Email.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState, useRef, useEffect } from "react";
import classes from "./Eamil.module.css";

const Email = ({
  value,
  name,
  placeholder,
  required,
  onChange,
  width,
  height,
  className,
  label,
  style,
  errorMessage,
  disabled,
  ...props
}) => {
  const [mail, setMail] = useState(value);
  const [mailFocused, setMailFocused] = useState(false);
  const [error, setError] = useState();
  const mailRef = useRef();

  const onChangeHandler = (e) => {
    onChange(e?.target?.value);
    setMail(e.target.value);
  };

  const handleFocusMail = () => {
    setMailFocused(true);
  };
  function containsValidEmail(input) {
    const re = /[^\s@]+@[^\s@]+\.[^\s@]+/;
    return re.test(input);
  }

  const combinedStyle = {
    width: width ? width : "350px",
    height: height ? height : "40px",
    backgroundColor: disabled ? "#f5f5f5" : "",

    ...style,
  };

  useEffect(() => {
   
    const handleClickOutside = (event) => {
      if (mailRef.current && !mailRef.current.contains(event.target)) {
        setMailFocused(false);
      }
      if (!containsValidEmail(mail)) {
        setError("Please enter a valid mail address.");
      } else {
        setError("");
      }

    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [mail]);

  useEffect(() => {
    onChange(value ? value : "");
    setMail(value ? value : "");
  }, [value]);
  
  return (
    <div>
      <div
        id="heades"
        ref={mailRef}
        style={{
          width: width
            ? width
            : combinedStyle?.width
            ? combinedStyle?.width
            : "350px",
        }}>
        <p className={classes.headers}>
          {label ? label : "E-mail"}
          {required && <span className={classes.required}>*</span>}
        </p>
        <div
          style={combinedStyle}
          onFocus={handleFocusMail}
          className={`${className ? className : classes.mailContainer}  ${
            mailFocused && classes.focused
          }`}>
          <input
            disabled={disabled}
            style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
            className={classes.inputField}
            value={mail}
            placeholder={placeholder ? placeholder : "E-mail..."}
            onFocus={(e) => (e.target.style.border = "none")}
            onBlur={(e) => (e.target.style.borderBottom = "none")}
            type="email"
            onChange={onChangeHandler}
            {...props}
          />
        </div>
        {error && (
          <p className={classes.error}>{errorMessage ? errorMessage : error}</p>
        )}
      </div>
    </div>
  );
};

export default Email;