# 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>
                  )
                ),
            },
          }}
        />
      );
    };