Merge branch 'filter_enhancements' into 'develop'

Filter Enhancements

See merge request !12

src/cryptometrics/components/button/Button.js

@@ -13,11 +13,13 @@ import classNames from "classnames";
  *   </Button>
  * )
  */
-function Button({ children, className, onClick, type }) {
+function Button({ children, className, onClick, type, disabled }) {
   return (
     <button
-      className={classNames("py-2 px-5 rounded-xl", className)}
-      onClick={onClick}
+      className={classNames("py-2 px-5 rounded-xl", className, {
+        "brightness-50 cursor-default": disabled,
+      })}
+      onClick={disabled ? undefined : onClick}
       type={type ? type : "button"}
     >
       {children}
@@ -38,6 +40,18 @@ Button.propTypes = {
    * The function to run when button is pressed
    */
   onClick: PropTypes.func,
+  /**
+   * The type of button
+   */
+  type: PropTypes.string,
+  /**
+   * Whether the button is disabled
+   */
+  disabled: PropTypes.bool,
+};
+
+Button.defaultProps = {
+  type: "button",
 };
 
 export default Button;

src/cryptometrics/components/dropdown/FilterDropdown.js

 import { ArrowRightIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Button from "../button/Button";
 import { RadioInputForm } from "../radio/RadioForm";
 import { CSSTransition } from "react-transition-group";
@@ -14,6 +14,7 @@ export function FilterDropdown({
   const [selectedFilter, setSelectedFilter] = useState(null);
   const [radioValue, setRadioValue] = useState("is");
   const [inputValue, setInputValue] = useState("");
+  const secondaryDropdownRef = useRef(null);
 
   useEffect(() => {
     if (selectedFilter) {
@@ -67,13 +68,14 @@ export function FilterDropdown({
         )}
       </div>
       <CSSTransition
-        in={selectedFilter}
+        in={selectedFilter !== null}
         classNames="secondary-dropdown"
         timeout={300}
         unmountOnExit
+        nodeRef={secondaryDropdownRef}
       >
         {selectedFilter ? (
-          <span className="ml-3">
+          <span className="ml-3" ref={secondaryDropdownRef}>
             <SecondaryFilterDropdown
               open={true}
               onSelectedFilterChange={onSelectedFilterChange}
@@ -89,7 +91,7 @@ export function FilterDropdown({
             />
           </span>
         ) : (
-          <div></div>
+          <div ref={secondaryDropdownRef}></div>
         )}
       </CSSTransition>
     </div>
@@ -141,6 +143,7 @@ export function SecondaryFilterDropdown({
           className="bg-indigo-600 text-white font-semibold w-full"
           onClick={onFilterAdd}
           type="submit"
+          disabled={inputValue === ""}
         >
           Filter
         </Button>