Input Text

import { useRef, useState } from "react";
import styled, { css } from "styled-components";

export default function InputText({
  icon,
  onChange,
  placeHolder = "Type here",
  initValue,
  onTextBlur,
  width,
  borderRadius = "8px",
  borderColor,
  borderWidth,
  backgroundColor = "var(--background-solid)",
  border,
  fontSize = "16px",
  fontColor,
  importantColor = "#f00",
  name,
  className,
  disabled,
  important,
  label,
  shadow,
  type = "text",
  margin,
  marginLeft,
  marginRight,
  marginTop,
  marginBottom,
  design = "outline",
  fillIcon,
  style,
}) {
  const inputRef = useRef(null);
  const [isInputFocus, setIsInputFocus] = useState(false);

  const onWrpClickHandler = () => {
    if (!isInputFocus) {
      setIsInputFocus(true);
      inputRef.current.focus();
    }
  };

  const blurHandler = (e) => {
    setIsInputFocus(false);
    if (onTextBlur) {
      onTextBlur(e);
    }
  };

  return (
    <Styled
      style={style}
      className={className}
      onClick={onWrpClickHandler}
      $border={border}
      $borderColor={borderColor}
      $borderWidth={borderWidth}
      $borderRadius={borderRadius}
      $backgroundColor={backgroundColor}
      $fontColor={fontColor}
      $fontSize={fontSize}
      $disabled={disabled}
      $width={width}
      $shadow={shadow}
      $importantColor={importantColor}
      $margin={margin}
      $marginTop={marginTop}
      $marginBottom={marginBottom}
      $marginLeft={marginLeft}
      $marginRight={marginRight}
      $design={design}
      $fillIcon={fillIcon}
    >
      {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={blurHandler}
          defaultValue={initValue}
          placeholder={placeHolder}
          type={type}
          onChange={(e) => {
            if (!disabled) {
              if (onChange) {
                onChange(e);
              }
            }
          }}
        />
      </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 {
    flex-grow: 1;
    box-shadow: ${({ $shadow }) => $shadow};
    position: relative;
    display: inline-flex;
    cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
    width: 100%;
    margin: ${({ $margin }) => $margin};
    margin-top: ${({ $marginTop }) => $marginTop};
    margin-bottom: ${({ $marginBottom }) => $marginBottom};
    margin-left: ${({ $marginLeft }) => $marginLeft};
    margin-right: ${({ $marginRight }) => $marginRight};
    border: ${({ $border }) => $border};
    border-width: ${({ $borderWidth }) => $borderWidth};
    border-color: ${({ $borderColor }) => $borderColor};
    border-style: ${({ $borderWidth }) => ($borderWidth ? "solid" : null)};
    border-radius: ${({ $borderRadius }) => $borderRadius};
    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: 12px;
      background: none;
      user-select: none;
      border-radius: ${({ $borderRadius }) => $borderRadius};
    }
    .icon {
      position: relative;
      margin-right: 5px;
      top: 10px;
      color: #555;
      margin-left: 10px;
    }

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

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

import { useState } from "react";
import InputText from "../../example/InputText";

export default function TestView() {
  const [value, setValue] = useState("");
  return (
    <div>
      <InputText initValue={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}