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

const Number = ({
  value,
  name,
  placeholder,
  required,
  onChange,
  className,
  style,
  width,
  height,
  label,
  disabled,
  ...props
}) => {
  const [number, setNumber] = useState(value);
  const [numeberFocused, setNumberFocused] = useState(false);
  const numberRef = useRef();

  const onChangeHandler = (e) => {
    if (e.target.value >= 0) {
      onChange(e?.target?.value);
      setNumber(e.target.value);
    }
  };

  const handleFocusMail = () => {
    setNumberFocused(true);
  };

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

    ...style,
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (numberRef.current && !numberRef.current.contains(event.target)) {
        setNumberFocused(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [number]);
  useEffect(() => {
    if (value && value * 1 >= 0) {
      setNumber(value ? value : "");
      onChange(value ? value : "");
    }
  }, [value]);

  return (
    <div>
      <p className={classes.headers}>
        {label ? label : ""}
        {required && (
          <span className={classes.required}>
            *
          </span>
        )}
      </p>
      <div
        id="heades"
        ref={numberRef}
        style={{
          width: width
            ? width
            : combinedStyle?.width
            ? combinedStyle?.width
            : "350px",
        }}>
        <div
          style={combinedStyle}
          onFocus={handleFocusMail}
          className={`${classes.mailContainer}  ${
            numeberFocused && classes.focused
          }`}>
          <input
            style={{backgroundColor:disabled?'#f5f5f5':''}}
            className={classes.inputField}
            value={number}
            placeholder={placeholder ? placeholder : ""}
            onFocus={(e) => (e.target.style.border = "none")}
            onBlur={(e) => (e.target.style.borderBottom = "none")}
            type="number"
            disabled={disabled}
            onChange={onChangeHandler}
            {...props}
          />
        </div>
      </div>
    </div>
  );
};

export default Number;