{"size": 2630, "ext": "js", "max_stars_repo_path": "web/src/components/InputBlock/index.js", "max_stars_repo_name": "vassourita/ally", "max_stars_repo_stars_event_min_datetime": "2020-06-03T20:35:22.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-13T12:36:45.000Z", "max_issues_repo_path": "web/src/components/InputBlock/index.js", "max_issues_repo_name": "vassourita/Ally", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "web/src/components/InputBlock/index.js", "max_forks_repo_name": "vassourita/Ally", "max_forks_repo_forks_event_min_datetime": "2021-06-29T21:19:13.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-29T21:19:13.000Z"}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 19.6268656716, "max_line_length": 105, "alphanum_fraction": 0.5452471483}
import React from 'react';
import { FiEye, FiEyeOff, FiAlertCircle } from 'react-icons/fi';
import styled from 'styled-components';

export default function InputBlock({ id, label, errors = [{}], isPass, type = 'text', value, ...rest }) {
  const [passwordShown, setPasswordShown] = React.useState(false);

  const togglePasswordVisiblity = e => {
    e.preventDefault();
    setPasswordShown(!passwordShown);
  };

  function getType() {
    if (!isPass) return type;
    if (passwordShown) return 'text';
    return 'password';
  }

  function getErrors() {
    for (const error of errors) {
      if (error.cond)
        return (
          <>
            {error.text} <FiAlertCircle size={13} />
          </>
        );
    }
  }

  return (
    <Container className="input-block">
      <InputContainer>
        <input id={id} value={value || ''} type={getType()} {...rest} />
        {isPass &&
          (passwordShown ? (
            <FiEyeOff size="20" color="#777" onClick={togglePasswordVisiblity} />
          ) : (
            <FiEye size="20" color="#777" onClick={togglePasswordVisiblity} />
          ))}
        <div>
          <label htmlFor={id}>{label}</label>
        </div>
      </InputContainer>
      <span>{getErrors()}</span>
    </Container>
  );
}

const Container = styled.div`
  margin: 35px 0;
  position: relative;
  span {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #df5080;
    position: absolute;
    bottom: -16px;
    right: 0;
    text-align: right;
    svg {
      margin-left: 3px;
    }
  }
`;

const InputContainer = styled.div`
  padding: 0 15px;
  height: 42px;

  display: flex;
  align-items: center;
  position: relative;

  border: 1px solid #aaa;
  transition: all 0.4s ease;

  svg {
    border: none;
    background: none;
  }

  &:focus-within {
    padding: 0 14px;
    border: 2px solid var(--ally-blue);
    & > div {
      bottom: 32px;
      left: 14px;
    }
  }

  & > div {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 33px;
    left: 15px;

    background-color: #fff;
    transition: all 0.4s ease;

    label {
      margin: 0 4px;
      color: #000;
      opacity: 60%;
      font-size: 16px;
      transition: all 0.4s ease;
      cursor: text;
    }
  }

  input {
    width: 100%;
    font-size: 14px;
    border: none;
    color: #4f4f4f;

    transition: all 0.4s ease;

    &:focus + div {
      label {
        color: var(--ally-blue);
        opacity: 100%;
      }
    }
    &:focus + svg + div {
      label {
        color: var(--ally-blue);
        opacity: 100%;
      }
    }
  }
`;
