Setup animation for dropdown; Pass filter options as props from parent

src/cryptometrics/components/dropdown/FilterDropdown.js

@@ -3,9 +3,9 @@ import classNames from "classnames";
 import React, { useState, useEffect } from "react";
 import Button from "../button/Button";
 import { RadioInputForm } from "../radio/RadioForm";
-import { filterOptions } from "../../constants";
+import { CSSTransition } from "react-transition-group";
 
-export function FilterDropdown({ open, setOpen, addFilter }) {
+export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
   const [selectedFilter, setSelectedFilter] = useState(null);
 
   const [radioValue, setRadioValue] = useState("is");
@@ -19,7 +19,7 @@ export function FilterDropdown({ open, setOpen, addFilter }) {
         ].name
       );
     }
-  }, [selectedFilter]);
+  }, [filterOptions, selectedFilter]);
 
   const onRadioChange = ({ target: { value } }) => {
     setRadioValue(value);
@@ -46,7 +46,7 @@ export function FilterDropdown({ open, setOpen, addFilter }) {
     <div className="absolute flex flex-row z-50">
       <div
         className={classNames(
-          "dark:bg-dark-600 w-48 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"
+          "dark:bg-dark-600 w-56 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"
         )}
       >
         {Object.keys(filterOptions).map((key) => {
@@ -62,20 +62,29 @@ export function FilterDropdown({ open, setOpen, addFilter }) {
           );
         })}
       </div>
-      {selectedFilter && (
-        <span className="ml-3">
-          <SecondaryFilterDropdown
-            open={true}
-            onSelectedFilterChange={onSelectedFilterChange}
-            radioOptions={filterOptions[selectedFilter]?.options}
-            radioValue={radioValue}
-            onRadioChange={onRadioChange}
-            inputValue={inputValue}
-            onInputChange={onInputChange}
-            onFilterAdd={onFilterAdd}
-          />
-        </span>
-      )}
+      <CSSTransition
+        in={selectedFilter}
+        classNames="secondary-dropdown"
+        timeout={300}
+        unmountOnExit
+      >
+        {selectedFilter ? (
+          <span className="ml-3">
+            <SecondaryFilterDropdown
+              open={true}
+              onSelectedFilterChange={onSelectedFilterChange}
+              radioOptions={filterOptions[selectedFilter]?.options}
+              radioValue={radioValue}
+              onRadioChange={onRadioChange}
+              inputValue={inputValue}
+              onInputChange={onInputChange}
+              onFilterAdd={onFilterAdd}
+            />
+          </span>
+        ) : (
+          <div></div>
+        )}
+      </CSSTransition>
     </div>
   );
 }

src/cryptometrics/pages/index.js

@@ -20,6 +20,7 @@ import { useState } from "react";
 import useFilters from "../hooks/useFilters";
 import { Filter, FilterButton, Filters } from "../components/filters/Filter";
 import { FilterDropdown } from "../components/dropdown/FilterDropdown";
+import { filterOptions } from "../constants";
 
 export default function Home() {
   const [filters, addFilter, removeFilter] = useFilters([]);
@@ -97,9 +98,9 @@ export default function Home() {
 
                   {dropdownOpen && (
                     <FilterDropdown
-                      open={dropdownOpen}
                       setOpen={setDropdownOpen}
                       addFilter={addFilter}
+                      filterOptions={filterOptions}
                     />
                   )}
                 </div>

src/cryptometrics/styles/globals.css

@@ -24,3 +24,22 @@
 #nprogress .peg {
   box-shadow: 0 0 10px rgb(37 99 235), 0 0 5px rgb(37 99 235) !important;
 }
+
+.secondary-dropdown-enter {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+.secondary-dropdown-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 300ms, transform 300ms;
+}
+.secondary-dropdown-exit {
+  opacity: 1;
+}
+.secondary-dropdown-exit-active {
+  opacity: 0;
+  /* transform: scale(0.9); */
+  transform: translateX(-50px);
+  transition: opacity 300ms, transform 300ms;
+}