glide-design-system/src/lib/components/full-name/FullName.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 "./FullName.module.css";

const FullName = ({
  onChange,
  value,
  width,
  height,
  style,
  firstNameLabel,
  lastNameLabel,
  firstNamePlaceholder,
  lastNamePlaceholder,
  label,
  conatinerStyle,
  required,
  disabled,
  ...props
}) => {
  const firstNameRef = useRef();
  const lastNameRef = useRef();
  const [values, setValues] = useState(value ? value : "");
  const [name1, name2] = values?.split(" ");
  const [firstNameFocused, setFirstNameFocused] = useState(false);
  const [lastNameFocused, setLastNameFocused] = useState(false);
  const [firstName, setFirstName] = useState(name1 ? name1 : "");
  const [lastName, setLastName] = useState(name2 ? name2 : "");

  const handleFocusFirstName = () => {
    setFirstNameFocused(true);
  };
  const handleFocusLastName = () => {
    setLastNameFocused(true);
  };
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        firstNameRef.current &&
        !firstNameRef?.current?.contains(event.target)
      ) {
        setFirstNameFocused(false);
      }
      if (lastNameRef.current && !lastNameRef.current.contains(event.target)) {
        setLastNameFocused(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

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

  const firstNameHandler = (e) => {
    setFirstName(e.target.value);
    getFullName(e.target.value, lastName);
  };
  const lastNameHandler = (e) => {
    setLastName(e.target.value);
    getFullName(firstName, e.target.value);
  };
  const getFullName = (fistNames, lastNames) => {
    const name1 = fistNames;
    const name2 = lastNames;
    const fullName = `${name1} ${name2}`;
    onChange(fullName);
  };
  const combinedStyle = {
    width: width ? width : "350px",
    height: height ? height : "40px",
    backgroundColor: disabled ? "#f5f5f5" : "",

    ...style,
  };

  const containerStyles = {
    ...conatinerStyle,
  };

  useEffect(() => {
    const values = value ? value : "";
    const [name1, name2] = values?.split(" ");
    const fullName = `${name1} ${name2}`;
    setFirstName(name1 ? name1 : "");
    setLastName(value === null ? "" : name2 ? name2 : "");
    onChange(fullName ? fullName : "");
  }, [value]);

  return (
    <div>
      <p className={classes.headers2}>
        {label ? label : ""}
        {required && label && <span className={classes.required}>*</span>}
      </p>
      <div className={classes.parentContainer}>
        <div style={containerStyles} className={classes.fledContainer}>
          <div
            ref={firstNameRef}
            style={{
              width: width
                ? width
                : combinedStyle?.width
                ? combinedStyle?.width
                : "350px",
            }}
          >
            <p className={classes.headers}>
              {firstNameLabel ? firstNameLabel : ""}
              {required && !label && (
                <span className={classes.required}>*</span>
              )}
            </p>
            <div
              style={combinedStyle}
              onFocus={handleFocusFirstName}
              className={`${classes.inputFieldContainer}  ${
                firstNameFocused && classes.focused
              }`}
            >
              <input
                disabled={disabled}
                style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
                className={classes.inputField}
                placeholder={
                  firstNamePlaceholder ? firstNamePlaceholder : "First Name"
                }
                onFocus={(e) => (e.target.style.border = "none")}
                onBlur={(e) => (e.target.style.borderBottom = "none")}
                type="text"
                onChange={firstNameHandler}
                value={firstName}
                {...props}
              />
            </div>
          </div>
          <div
            ref={lastNameRef}
            style={{
              width: width
                ? width
                : combinedStyle?.width
                ? combinedStyle?.width
                : "350px",
            }}
          >
            <p className={classes.headers}>
              {lastNameLabel ? lastNameLabel : ""}
              {required && !label && (
                <span className={classes.required}>*</span>
              )}
            </p>
            <div
              style={combinedStyle}
              onFocus={handleFocusLastName}
              className={`${classes.inputFieldContainer}  ${
                lastNameFocused && classes.focused
              }`}
            >
              <input
                style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
                className={classes.inputField}
                placeholder={
                  lastNamePlaceholder ? lastNamePlaceholder : "Last Name"
                }
                disabled={disabled}
                onFocus={(e) => (e.target.style.border = "none")}
                onBlur={(e) => (e.target.style.borderBottom = "none")}
                type="text"
                onChange={lastNameHandler}
                value={lastName}
                {...props}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FullName;