Input Password

import { useEffect, useRef, useState } from "react";
import styled, { css } from "styled-components";
import IconEye from "../element/icon/IconEye";

export default function InputPassword({
  value,
  className,
  style,
  margin,
  design = "outline",
  icon,
  iconColor,
  onChange,
  onBlur,
  placeHolder = "Password here",
  width,
  borderRadius = "8px",
  borderColor,
  borderWidth,
  backgroundColor,
  border,
  fontSize = "16px",
  fontColor,
  important,
  importantColor = "var(--danger)",
  name,
  disabled,
  label,
  shadow,
}) {
  const inputRef = useRef(null);
  const [isFocus, setIsFocus] = useState(false);
  const [isShowPassword, setIsShowPassword] = useState(false);
  const [valueText, setValueText] = useState("");

  useEffect(() => {
    if (value) {
      setValueText(value);
    }
  }, [value]);

  const handleOnclick = () => {
    if (!isFocus) {
      setIsFocus(true);
      inputRef.current.focus();
    }
  };

  const handleBlur = (e) => {
    setIsFocus(false);
    if (onBlur) {
      onBlur(e);
    }
  };

  const handleChange = (e) => {
    if (!disabled) {
      if (onChange) {
        onChange(e);
      }
    }
    setValueText(e.target.value);
  };

  return (
    <Styled
      className={className}
      style={style}
      onClick={handleOnclick}
      $border={border}
      $borderColor={borderColor}
      $borderWidth={borderWidth}
      $borderRadius={borderRadius}
      $backgroundColor={backgroundColor}
      $fontColor={fontColor}
      $fontSize={fontSize}
      $disabled={disabled}
      $width={width}
      $shadow={shadow}
      $importantColor={importantColor}
      $margin={margin}
      $design={design}
      $iconColor={iconColor}
    >
      {label && <small>{label}</small>}
      <div className="wrp-input">
        {important && <div className="is-important">*</div>}
        {icon && <span className={"icon"}>{icon}</span>}
        <input
          name={name}
          ref={inputRef}
          disabled={disabled}
          onBlur={handleBlur}
          value={valueText}
          placeholder={placeHolder}
          type={isShowPassword ? "password" : "text"}
          onChange={handleChange}
        />
        <span
          className={"icon_eye"}
          onClick={() => {
            if (!disabled) {
              setIsShowPassword(!isShowPassword);
            }
          }}
        >
          <IconEye width={20} disable={isShowPassword ? false : true} />
        </span>
      </div>
    </Styled>
  );
}

const Styled = styled.div`
  ${({ $design }) => designStyles($design)}
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: ${({ $width }) => $width};
  margin: ${({ $margin }) => $margin};

  small {
    margin-bottom: 5px;
    font-weight: bold;
    display: block;
  }
  .wrp-input {
    box-shadow: ${({ $shadow }) => $shadow};
    position: relative;
    display: inline-flex;
    cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
    width: 100%;
    border: ${({ $border }) => $border};
    border-width: ${({ $borderWidth }) => $borderWidth};
    border-color: ${({ $borderColor }) => $borderColor};
    border-radius: ${({ $borderRadius }) => $borderRadius};
    background-color: ${({ $backgroundColor }) => $backgroundColor};
    opacity: ${({ $disabled }) => ($disabled ? "0.5" : "1")};

    input,
    input:focus-visible,
    input:focus {
      border: none;
      outline: none;
    }

    input {
      color: ${({ $fontColor }) => $fontColor};
      font-size: ${({ $fontSize }) => $fontSize};
      flex: 1;
      padding: 10px;
      background: none;
      user-select: none;
      border-radius: ${({ $borderRadius }) => $borderRadius};
    }
    svg path {
      fill: ${({ $iconColor }) => $iconColor};
    }
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 0 10px 0 10px;
    }
    .icon_eye {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
    }

    .is-important {
      color: ${({ $importantColor }) => $importantColor};
      position: absolute;
      top: -14px;
      right: -10px;
    }
  }
`;

const designStyles = (design) =>
  ({
    solid: css`
      .wrp-input {
        color: var(--txt-bright);
        background: var(--surface);
        svg path {
          fill: var(--txt-normal);
        }
      }
    `,
    none: css`
      .wrp-input {
        color: var(--txt-normal);
        background: transparent;
        border: none;
        svg path {
          fill: var(--txt-normal);
        }
      }
    `,
    outline: css`
      .wrp-input {
        color: var(--txt-normal);
        background-color: transparent;
        border: 1px solid var(--border);
        svg path {
          fill: var(--txt-normal);
        }
      }
    `,
  }[design]);

import { useState } from "react";
import InputPassword from "../../lib/view/example/InputPassword";

export default function Test() {
  const [password, setPassword] = useState("");
  return (
    <div style={{ padding: "200px", background: "#262335" }}>
      <InputPassword
        value={password}
        placeHolder="password"
        className={"input-text"}
        onChange={(e) => setPassword(e.target.value)}
      />
    </div>
  );
}