Merge pull request #19 from mnoster/feature/onMenuToggle

Implemented onMenuToggle feature

Author: harshzalavadiya

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-select-component",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
   "author": "Harsh Zalavadiya",
   "license": "MIT",

src/lib/interfaces.ts

@@ -32,4 +32,5 @@ export interface ISelectProps {
   overrideStrings?: { [key: string]: string };
   labelledBy: string;
   className?: string;
+  onMenuToggle?;
 }

src/multi-select/dropdown.tsx

@@ -5,7 +5,7 @@
  */
 import useOutsideClick from "@rooks/use-outside-click";
 import { css } from "goober";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 
 import Arrow from "./arrow";
 import Loading from "./loading";
@@ -18,6 +18,7 @@ interface IDropdownProps {
   disabled?: boolean;
   shouldToggleOnHover?: boolean;
   labelledBy?: string;
+  onMenuToggle?;
 }
 
 const PanelContainer = css({
@@ -75,6 +76,7 @@ const Dropdown = ({
   disabled,
   shouldToggleOnHover,
   labelledBy,
+  onMenuToggle,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
@@ -83,6 +85,11 @@ const Dropdown = ({
 
   useOutsideClick(wrapper, () => setExpanded(false));
 
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    onMenuToggle && onMenuToggle(expanded);
+  }, [expanded]);
+
   const handleKeyDown = e => {
     switch (e.which) {
       case 27: // Escape

src/multi-select/index.tsx

@@ -43,6 +43,7 @@ const MultiSelect = ({
   disableSearch,
   filterOptions,
   labelledBy,
+  onMenuToggle,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -66,6 +67,7 @@ const MultiSelect = ({
         }}
         disabled={disabled}
         labelledBy={labelledBy}
+        onMenuToggle={onMenuToggle}
       >
         <DropdownHeader
           value={nvalue}

stories/default.stories.tsx

@@ -30,6 +30,7 @@ export const toStorybook = () => {
         value={selected}
         disabled={boolean("disabled", false)}
         onChange={setSelected}
+        onMenuToggle={(s)=>{console.log("Select Toggle: ", s)}}
         labelledBy={text("labelledBy", "Select Fruits")}
         className={text("className", "multi-select")}
       />