All files / Input index.tsx

0% Statements 0/9
0% Branches 0/15
0% Functions 0/2
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95                                                                                                                                                                                             
import { InputAdornment, TextField } from "@mui/material";
import React, { useState } from "react";
import { Icon } from "../Icon";
 
interface Props {
  sx?: React.CSSProperties;
  placeholder?: string;
  label?: string;
  type: "text" | "password" | "email" | "number";
  slotPropPosition?: "start" | "end";
  slotPropsChildren?: React.ReactNode;
  endAdornment?: React.ReactNode;
  endAddornmentPosition?: "start" | "end";
  iconPasswordColor?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
}
 
export const Input = ({
  sx,
  placeholder,
  label,
  type,
  slotPropPosition = "start",
  slotPropsChildren,
  endAddornmentPosition = "end",
  endAdornment,
  iconPasswordColor = "black",
  value,
  onChange,
  onBlur,
}: Props) => {
  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  };
  return (
    <TextField
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      type={type === "password" ? (showPassword ? "text" : "password") : type}
      label={label}
      variant="outlined"
      placeholder={placeholder}
      style={{ color: "black" }}
      sx={{
        ...sx,
        width: "100%",
        marginTop: "20px",
        "& .MuiOutlinedInput-root": {
          "& fieldset": {
            border: "none",
            borderBottom: "2px solid #a5f3fc",
            color: "black",
          },
          "&:hover fieldset": {
            borderBottom: "2px solid #67e8f9",
          },
          "&.Mui-focused fieldset": {
            border: "2px solid #67e8f9",
          },
        },
      }}
      slotProps={{
        input: {
          startAdornment: slotPropsChildren && (
            <InputAdornment position={slotPropPosition}>
              {slotPropsChildren}
            </InputAdornment>
          ),
          endAdornment:
            type === "password" ? (
              <InputAdornment position={"end"}>
                <Icon
                  style={{ cursor: "pointer" }}
                  name={showPassword ? "EyeSlash" : "Eye"}
                  color={iconPasswordColor}
                  onClick={handleClickShowPassword}
                />
              </InputAdornment>
            ) : (
              endAdornment && (
                <InputAdornment position={endAddornmentPosition}>
                  {endAdornment}
                </InputAdornment>
              )
            ),
        },
      }}
    />
  );
};