From b8c5dd2739b72c9ed951e2f7f614fe708ad9a131 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Thu, 10 Mar 2022 14:53:33 -0500
Subject: [PATCH] Setup animation for dropdown; Pass filter options as props
from parent
---
.../components/dropdown/FilterDropdown.js | 45 +++++++++++--------
src/cryptometrics/pages/index.js | 3 +-
src/cryptometrics/styles/globals.css | 19 ++++++++
3 files changed, 48 insertions(+), 19 deletions(-)
diff --git a/src/cryptometrics/components/dropdown/FilterDropdown.js b/src/cryptometrics/components/dropdown/FilterDropdown.js
index 23cf356..3781d9f 100644
--- a/src/cryptometrics/components/dropdown/FilterDropdown.js
+++ b/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>
);
}
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index e7911cf..462f01a 100644
--- a/src/cryptometrics/pages/index.js
+++ b/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>
diff --git a/src/cryptometrics/styles/globals.css b/src/cryptometrics/styles/globals.css
index 4031aa2..11f99b4 100644
--- a/src/cryptometrics/styles/globals.css
+++ b/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;
+}
--
GitLab