feat: useEffect was more useful than motion

vantaboard · Sep 24, 2021 · eb12950 · eb12950
1 parent c962442
commit eb12950
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Elements/Button/index.tsx b/src/components/Elements/Button/index.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes, useEffect, useState } from 'react';
 import { theme } from '../../../theme';
 import { ButtonProps } from './interface';
 import { Line, StyledButton, StyledClickOverlay, SvgOverlay } from './styles';
@@ -7,6 +7,14 @@ import { Line, StyledButton, StyledClickOverlay, SvgOverlay } from './styles';
 export default (props: HTMLAttributes<HTMLButtonElement> & ButtonProps) => {
   const [border, setBorder] = useState(false);
   const [wipe, setWipe] = useState(false);
+  useEffect(() => {
+    return () => {
+      const int = setInterval(() => {
+        setWipe(true);
+        clearInterval(int);
+      }, 3);
+    };
+  }, [wipe]);
   const { children, primary } = props;
   return (
     <div>
@@ -28,6 +36,7 @@ export default (props: HTMLAttributes<HTMLButtonElement> & ButtonProps) => {
         <div>{children}</div>
         <StyledClickOverlay>
           <SvgOverlay
+            border={border}
             version='1.1'
             xmlns='http://www.w3.org/2000/svg'
             xmlnsXlink='http://www.w3.org/1999/xlink'

diff --git a/src/components/Elements/Button/styles.ts b/src/components/Elements/Button/styles.ts
@@ -44,16 +44,14 @@ export const StyledButton = styled('button')<ButtonProps>`
     p.primary ? theme.palette.primary : theme.palette.secondary};
 `;
 
-export const SvgWrapper = styled('div')`
-  position: relative;
-`;
-
-export const SvgOverlay = styled('svg')`
+export const SvgOverlay = styled('svg')<ButtonProps>`
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  top: -5px;
+  left: -5px;
+  width: 110%;
+  height: 140%;
+  border-radius: ${(p) =>
+    p.border ? theme.border.radius.small : theme.border.radius.base};
 `;
 
 export const StyledClickOverlay = styled('div')<ButtonProps>`
@@ -63,7 +61,6 @@ export const StyledClickOverlay = styled('div')<ButtonProps>`
   left: 0;
   top: 0;
   position: absolute;
-  border-radius: ${(p) => (p.border ? 0 : theme.border.radius.base)};
 `;
 
 export const Line = styled('path')<ButtonProps>`