feat: almost abstracted interact component

I am submitting a pull request to remerge with main and start a new branch now that Redux has been integrated. The state was feeling a little too convoluded in the way I was managing it before, so hopefully this provides some needed clarity so that animation can flow smoothly.
vantaboard · Oct 1, 2021 · 572193b · 572193b
1 parent 6951024
commit 572193b
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 40 deletions.
diff --git a/client/src/components/Common/Interactive/InteractiveBox/styles.ts b/client/src/components/Common/Interactive/InteractiveBox/styles.ts
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { StyledBox } from 'components/Elements/Box/styles';
+import { InteractiveProps } from "../interface";
+
+export const InteractiveBox = styled(StyledBox)<InteractiveProps>`
+  display: flex;
+`;
diff --git a/client/src/components/Common/Interactive/Wipe/index.tsx b/client/src/components/Common/Interactive/Wipe/index.tsx
@@ -1,19 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import * as tokens from 'style-dictionary-dist/variables';
 import { InteractiveProps } from '../interface';
 import { Line, Overlay, Wipe } from './styles';
-import * as tokens from 'style-dictionary-dist/variables';
 
-const wipePath = `m88.31776,92.61682l-83.08411,-82.8972c0.09346,0.09346 0.28037,
-                  -6.26168 6.26168,-3.45795c5.98131,2.80374 81.86916,81.86916
-                  81.7757,81.7757c0.09346,0.09346 -0.09346,4.39252 -4.95327,
-                  4.57944z`;
+const wipePath = `M 100,100V95L0,0v5`;
 
 export default (props: InteractiveProps) => {
-  const { border, wipe } = props;
+  const { interact } = props;
   return (
     <Overlay>
       <Wipe
-        border={border}
+        interact={interact}
         version='1.1'
         xmlns='http://www.w3.org/2000/svg'
         xmlnsXlink='http://www.w3.org/1999/xlink'
@@ -33,8 +30,7 @@ export default (props: InteractiveProps) => {
         </defs>
         <Line
           d={wipePath}
-          border={border}
-          wipe={wipe}
+          interact={interact}
           x='95%'
           width='5%'
           height='100%'

diff --git a/client/src/components/Common/Interactive/Wipe/styles.ts b/client/src/components/Common/Interactive/Wipe/styles.ts
@@ -5,7 +5,7 @@ import { InteractiveProps } from '../interface';
 export const Wipe = styled('svg')<InteractiveProps>`
   clip-path: border-box;
   border-radius: ${(p) =>
-    p.border ? tokens.BorderRadiusSmall : tokens.BorderRadiusBase};
+    p.interact ? tokens.BorderRadiusSmall : tokens.BorderRadiusBase};
   position: absolute;
   height: 100%;
   width: 100%;
@@ -24,10 +24,10 @@ export const Overlay = styled('div')<InteractiveProps>`
 
 export const Line = styled('path')<InteractiveProps>`
   transition: ease-in-out
-    ${(p) => (p.wipe ? `${tokens.AnimationSpeedInteractiveHyper}s` : '0s')}
+    ${(p) => (p.interact ? `${tokens.AnimationSpeedInteractiveHyper}s` : '0s')}
     transform;
   transform: translate(
-    ${(p) => (p.wipe ? '100%' : '-100%')},
-    ${(p) => (p.wipe ? '-100%' : '100%')}
+    ${(p) => (p.interact ? '100%' : '-100%')},
+    ${(p) => (p.interact ? '-100%' : '100%')}
   );
 `;
diff --git a/client/src/components/Common/Interactive/interface.ts b/client/src/components/Common/Interactive/interface.ts
@@ -1,4 +1,3 @@
 export interface InteractiveProps {
-  border?: boolean;
-  wipe?: boolean;
+  interact?: boolean;
 }
diff --git a/client/src/components/Elements/Button/index.tsx b/client/src/components/Elements/Button/index.tsx
@@ -1,26 +1,20 @@
+import { handleInteract } from 'components/Common/Interactive/handlers';
 import Wipe from 'components/Common/Interactive/Wipe';
-import React, { HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { ButtonProps } from './interface';
 import { StyledButton } from './styles';
-import * as tokens from 'style-dictionary-dist/variables';
 
-// TODO: Animate button with React-spring
 export default (props: HTMLAttributes<HTMLButtonElement> & ButtonProps) => {
-  const [interact, setBorder] = useState(false);
-  const handleClick = () => {
-    setWipe(false);
-    setWipe(true);
-    const int = setInterval(() => {
-      setWipe(false);
-      clearInterval(int);
-    }, tokens.AnimationSpeedInteractiveHyper * 1000);
-  };
   const { label, primary } = props;
-
+  const { click, interact } = handleInteract();
   return (
-    <StyledButton border={border} wipe={wipe} primary={primary} onClick={handleClick}>
+    <StyledButton
+      interact={interact}
+      primary={primary}
+      onClick={click}
+    >
       {label}
-      <Wipe border={border} wipe={wipe} />
+      <Wipe interact={interact} />
     </StyledButton>
   );
 };
diff --git a/client/src/components/Elements/Button/styles.ts b/client/src/components/Elements/Button/styles.ts
@@ -8,7 +8,7 @@ export const StyledButton = styled('button')<ButtonProps>`
   z-index: 0;
   position: relative;
   border-radius: ${(p) =>
-    p.border ? tokens.BorderRadiusSmall : tokens.BorderRadiusBase};
+    p.interact ? tokens.BorderRadiusSmall : tokens.BorderRadiusBase};
   letter-spacing: 0.5px;
   text-align: center;
   padding-top: auto;

diff --git a/client/src/components/Elements/Input/index.tsx b/client/src/components/Elements/Input/index.tsx
@@ -1,10 +1,10 @@
+import { handleInteract } from 'components/Common/Interactive/handlers';
 import React from 'react';
 import { BuildInputProps, InputProps } from './interface';
 import { Prefix, StyledInput, Suffix, Wrapper } from './styles';
 
 const BuildInput = (props: BuildInputProps) => {
   const { prefix, suffix, prefixText, suffixText, children } = props;
-
   const input: Array<JSX.Element> = [];
   if (prefix) input.push(<Prefix>{prefixText}</Prefix>);
   input.push(children as JSX.Element);
@@ -14,15 +14,16 @@ const BuildInput = (props: BuildInputProps) => {
 
 export default (props: InputProps) => {
   const { prefix, suffix, prefixText, suffixText, name, value } = props;
+  const { click, interact } = handleInteract();
   return (
-    <Wrapper>
+    <Wrapper interact={interact}>
       <BuildInput
         prefix={prefix}
         prefixText={prefixText}
         suffix={suffix}
         suffixText={suffixText}
       >
-        <StyledInput name={name} placeholder={value} />
+        <StyledInput onClick={click} name={name} value={value} />
       </BuildInput>
     </Wrapper>
   );

diff --git a/client/src/components/Elements/Input/interface.ts b/client/src/components/Elements/Input/interface.ts
@@ -1,7 +1,8 @@
+import { InteractiveProps } from "components/Common/Interactive/interface";
 import { Weaken } from "helpers/typings";
 import { HTMLAttributes } from "react";
 
-export interface BuildInputProps extends Weaken<HTMLAttributes<HTMLInputElement>, 'prefix'> {
+export interface BuildInputProps extends Weaken<HTMLAttributes<HTMLInputElement>, 'prefix'>, InteractiveProps {
   prefix?: boolean;
   prefixText?: string;
   suffix?: boolean;

diff --git a/client/src/components/Elements/Input/styles.ts b/client/src/components/Elements/Input/styles.ts
@@ -1,11 +1,14 @@
-import styled from 'styled-components';
-import { StyledBox } from 'components/Elements/Box/styles';
-import * as tokens from 'style-dictionary-dist/variables';
+import { InteractiveBox } from 'components/Common/Interactive/InteractiveBox/styles';
+import { InteractiveProps } from 'components/Common/Interactive/interface';
 import { Interactive } from 'components/Common/Interactive/styles';
 import { ignoreClicks } from 'helpers/styling';
+import * as tokens from 'style-dictionary-dist/variables';
+import styled from 'styled-components';
 
-export const Wrapper = styled(StyledBox)`
+export const Wrapper = styled(InteractiveBox)<InteractiveProps>`
   ${Interactive}
+  border-radius: ${(p) =>
+    p.interact ? tokens.BorderRadiusSmall : tokens.BorderRadiusBase};
   border-radius: ${tokens.BorderRadiusSmall};
   border-width: calc(${tokens.BorderThicknessSmall} + 1px);
   border-color: ${tokens.PaletteBorder};