Criando tooltip de erros

rocketseat-education · Oct 19, 2020 · b95e84c · b95e84c
1 parent b943424
commit b95e84c
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 3 deletions.
diff --git a/nivel-03/02-iniciando-o-front-end-web/src/components/Input/index.tsx b/nivel-03/02-iniciando-o-front-end-web/src/components/Input/index.tsx
@@ -6,9 +6,10 @@ import React, {
   useCallback,
 } from 'react';
 import { IconBaseProps } from 'react-icons';
+import { FiAlertCircle } from 'react-icons/fi';
 import { useField } from '@unform/core';
 
-import { Container } from './styles';
+import { Container, Error } from './styles';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
@@ -41,7 +42,7 @@ const Input: React.FC<InputProps> = ({ name, icon: Icon, ...rest }) => {
   }, [fieldName, registerField]);
 
   return (
-    <Container isFocused={isFocused} isFilled={isFilled}>
+    <Container isErrored={!!error} isFocused={isFocused} isFilled={isFilled}>
       {Icon && <Icon size={20} />}
       <input
         onFocus={handleInputFocus}
@@ -51,7 +52,11 @@ const Input: React.FC<InputProps> = ({ name, icon: Icon, ...rest }) => {
         {...rest}
         type="text"
       />
-      {error}
+      {error && (
+        <Error title={error}>
+          <FiAlertCircle color="#c53030" size={20} />
+        </Error>
+      )}
     </Container>
   );
 };

diff --git a/nivel-03/02-iniciando-o-front-end-web/src/components/Input/styles.ts b/nivel-03/02-iniciando-o-front-end-web/src/components/Input/styles.ts
@@ -1,8 +1,11 @@
 import styled, { css } from 'styled-components';
 
+import Tooltip from '../Tooltip';
+
 interface ContainerProps {
   isFocused: boolean;
   isFilled: boolean;
+  isErrored: boolean;
 }
 
 export const Container = styled.div<ContainerProps>`
@@ -21,6 +24,12 @@ export const Container = styled.div<ContainerProps>`
     margin-top: 8px;
   }
 
+  ${props =>
+    props.isErrored &&
+    css`
+      border-color: #c53030;
+    `}
+
   ${props =>
     props.isFocused &&
     css`
@@ -49,3 +58,21 @@ export const Container = styled.div<ContainerProps>`
     margin-right: 16px;
   }
 `;
+
+export const Error = styled(Tooltip)`
+  height: 20px;
+  margin-left: 16px;
+
+  svg {
+    margin: 0;
+  }
+
+  span {
+    background: #c53030;
+    color: #fff;
+
+    &::before {
+      border-color: #c53030 transparent;
+    }
+  }
+`;
diff --git a/nivel-03/02-iniciando-o-front-end-web/src/components/Tooltip/index.tsx b/nivel-03/02-iniciando-o-front-end-web/src/components/Tooltip/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Container } from './styles';
+
+interface TooltipProps {
+  title: string;
+  className?: string;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  title,
+  className = '',
+  children,
+}) => {
+  return (
+    <Container className={className}>
+      {children}
+      <span>{title}</span>
+    </Container>
+  );
+};
+
+export default Tooltip;
diff --git a/nivel-03/02-iniciando-o-front-end-web/src/components/Tooltip/styles.ts b/nivel-03/02-iniciando-o-front-end-web/src/components/Tooltip/styles.ts
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+
+  span {
+    width: 160px;
+    background: #ff9000;
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    opacity: 0;
+    transition: opacity 0.4s;
+    visibility: hidden;
+
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    color: #312e38;
+
+    &::before {
+      content: '';
+      border-style: solid;
+      border-color: #ff9000 transparent;
+      border-width: 6px 6px 0 6px;
+      top: 100%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &:hover span {
+    visibility: visible;
+    opacity: 1;
+  }
+`;