fade icons in and out when dropdown is changed

Author: corwintines

src/components/FindWallet/WalletTable.tsx

@@ -1,7 +1,7 @@
 // Libraries
-import React, { useState } from "react"
+import React, { useState, SVGProps } from "react"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled, { keyframes } from "styled-components"
 
 // Components
 import ButtonLink from "../ButtonLink"
@@ -250,11 +250,34 @@ const FlexInfo = styled.div`
   }
 `
 
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`
+
+const fadeOut = keyframes`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+
 const FlexInfoCenter = styled(FlexInfo)`
   justify-content: center;
   cursor: pointer;
   height: 100%;
   display: flex;
+  animation: ${fadeIn} 0.5s;
+
+  &.fade {
+    animation: ${fadeOut} 0.5s;
+  }
 `
 
 const Image = styled(GatsbyImage)`
@@ -430,9 +453,19 @@ const StyledIcon = styled(Icon)<{ hasFeature: boolean }>`
     fill: ${({ theme }) => theme.colors.primary};
   }
 `
+// Types
+export interface DropdownOption {
+  label: string
+  value: string
+  filterKey: string
+  category: string
+  icon: SVGProps<SVGElement>
+}
+
+type ColumnClassName = "firstCol" | "secondCol" | "thirdCol"
 
 // Constants
-const featureDropdownItems = [
+const featureDropdownItems: Array<DropdownOption> = [
   {
     label: "Open source",
     value: "Open source",
@@ -561,6 +594,10 @@ const featureDropdownItems = [
   },
 ]
 
+const firstCol = "firstCol"
+const secondCol = "secondCol"
+const thirdCol = "thirdCol"
+
 const WalletTable = ({ data, filters, walletData }) => {
   const [walletCardData, setWalletData] = useState(
     walletData.map((wallet) => {
@@ -678,6 +715,38 @@ const WalletTable = ({ data, filters, walletData }) => {
     }
   )
 
+  /**
+   *
+   * @param selectedOption selected dropdown option
+   * @param stateUpdateMethod method for updating state for dropdown
+   * @param className className of column
+   *
+   * This method gets the elements with the className, adds a fade class to fade icons out, after 0.5s it will then update state for the dropdown with the selectedOption, and then remove the fade class to fade the icons back in. Then it will send a matomo event for updating the dropdown.
+   */
+  const updateDropdown = (
+    selectedOption: DropdownOption,
+    stateUpdateMethod: Function,
+    className: ColumnClassName
+  ) => {
+    const domItems: HTMLCollectionOf<Element> =
+      document.getElementsByClassName(className)
+    for (let item of domItems) {
+      item.classList.add("fade")
+    }
+    setTimeout(() => {
+      stateUpdateMethod(selectedOption)
+      for (let item of domItems) {
+        item.classList.remove("fade")
+      }
+    }, 500)
+
+    trackCustomEvent({
+      eventCategory: "WalletFeatureCompare",
+      eventAction: `Select WalletFeatureCompare`,
+      eventName: `${selectedOption.filterKey} selected`,
+    })
+  }
+
   return (
     <Container>
       <WalletContentHeader>
@@ -707,12 +776,7 @@ const WalletTable = ({ data, filters, walletData }) => {
               },
             ]}
             onChange={(selectedOption) => {
-              setFirstFeatureSelect(selectedOption)
-              trackCustomEvent({
-                eventCategory: "WalletFeatureCompare",
-                eventAction: `Select WalletFeatureCompare`,
-                eventName: `${selectedOption.filterKey} selected`,
-              })
+              updateDropdown(selectedOption, setFirstFeatureSelect, firstCol)
             }}
             defaultValue={firstFeatureSelect}
             isSearchable={false}
@@ -729,12 +793,7 @@ const WalletTable = ({ data, filters, walletData }) => {
               },
             ]}
             onChange={(selectedOption) => {
-              setSecondFeatureSelect(selectedOption)
-              trackCustomEvent({
-                eventCategory: "WalletFeatureCompare",
-                eventAction: `Select WalletFeatureCompare`,
-                eventName: `${selectedOption.filterKey} selected`,
-              })
+              updateDropdown(selectedOption, setSecondFeatureSelect, secondCol)
             }}
             defaultValue={secondFeatureSelect}
             isSearchable={false}
@@ -751,12 +810,7 @@ const WalletTable = ({ data, filters, walletData }) => {
               },
             ]}
             onChange={(selectedOption) => {
-              setThirdFeatureSelect(selectedOption)
-              trackCustomEvent({
-                eventCategory: "WalletFeatureCompare",
-                eventAction: `Select WalletFeatureCompare`,
-                eventName: `${selectedOption.filterKey} selected`,
-              })
+              updateDropdown(selectedOption, setThirdFeatureSelect, thirdCol)
             }}
             defaultValue={thirdFeatureSelect}
             isSearchable={false}
@@ -849,7 +903,7 @@ const WalletTable = ({ data, filters, walletData }) => {
                 </FlexInfo>
               </td>
               <td>
-                <FlexInfoCenter>
+                <FlexInfoCenter className={firstCol}>
                   {wallet[firstFeatureSelect.filterKey!] ? (
                     <GreenCheck />
                   ) : (
@@ -858,7 +912,7 @@ const WalletTable = ({ data, filters, walletData }) => {
                 </FlexInfoCenter>
               </td>
               <td>
-                <FlexInfoCenter>
+                <FlexInfoCenter className={secondCol}>
                   {wallet[secondFeatureSelect.filterKey!] ? (
                     <GreenCheck />
                   ) : (
@@ -867,7 +921,7 @@ const WalletTable = ({ data, filters, walletData }) => {
                 </FlexInfoCenter>
               </td>
               <td>
-                <FlexInfoCenter>
+                <FlexInfoCenter className={thirdCol}>
                   {wallet[thirdFeatureSelect.filterKey!] ? (
                     <GreenCheck />
                   ) : (

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": ["dom", "esnext", "dom.iterable"],
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",