✨ added isOpen and defaultIsOpen prop (#203)

hc-oss · Nov 16, 2020 · 1f74e41 · 1f74e41
1 parent d854d07
commit 1f74e41
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -80,9 +80,11 @@ export default Example;
 | `className`           | class name for parent component                        | `string`                     | `multi-select` |
 | `valueRenderer`       | custom dropdown header [docs](#-custom-value-renderer) | `function`                   |                |
 | `ItemRenderer`        | custom dropdown option [docs](#-custom-item-renderer)  | `function`                   |                |
-| `ClearIcon`           | Custom Clear Icon for Search                           | `string|function`            |                |
+| `ClearIcon`           | Custom Clear Icon for Search                           | `string                      | function`      |
 | `debounceDuration`    | debounce duraion for Search                            | `number`                     | `300`          |
-| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string|function`            |                |
+| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string                      | function`      |
+| `defaultIsOpen`       | to keep menu open/closed by default                    | `boolean`                    | `false`        |
+| `isOpen`              | controlled version of `defaultIsOpen`                  | `boolean`                    |                |
 
 ## 🔍 Custom filter logic
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-multi-select-component",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
   "author": "Harsh Zalavadiya",
   "license": "MIT",

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
@@ -37,4 +37,6 @@ export interface ISelectProps {
   ClearIcon?: string | Function;
   debounceDuration?: number;
   ClearSelectedIcon?: string | Function;
+  defaultIsOpen?: boolean;
+  isOpen?: boolean;
 }
diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
@@ -22,6 +22,8 @@ interface IDropdownProps {
   onMenuToggle?;
   ArrowRenderer?;
   ClearSelectedIcon?;
+  defaultIsOpen?: boolean;
+  isOpen?: boolean;
 }
 
 const PanelContainer = css({
@@ -86,8 +88,11 @@ const Dropdown = ({
   onMenuToggle,
   ArrowRenderer,
   ClearSelectedIcon,
+  defaultIsOpen,
+  isOpen,
 }: IDropdownProps) => {
-  const [expanded, setExpanded] = useState(false);
+  const [isInternalExpand, setIsInternalExpand] = useState(true);
+  const [expanded, setExpanded] = useState(defaultIsOpen);
   const [hasFocus, setHasFocus] = useState(false);
   const FinalArrow = ArrowRenderer || Arrow;
 
@@ -98,32 +103,41 @@ const Dropdown = ({
     onMenuToggle && onMenuToggle(expanded);
   }, [expanded]);
 
+  useEffect(() => {
+    if (defaultIsOpen === undefined && typeof isOpen === "boolean") {
+      setIsInternalExpand(false);
+      setExpanded(isOpen);
+    }
+  }, [isOpen]);
+
   const handleKeyDown = (e) => {
-    switch (e.which) {
-      case 27: // Escape
-      case 38: // Up Arrow
-        setExpanded(false);
-        wrapper?.current?.focus();
-        break;
-      case 32: // Space
-      case 13: // Enter Key
-      case 40: // Down Arrow
-        setExpanded(true);
-        break;
-      default:
-        return;
+    if (isInternalExpand) {
+      switch (e.which) {
+        case 27: // Escape
+        case 38: // Up Arrow
+          setExpanded(false);
+          wrapper?.current?.focus();
+          break;
+        case 32: // Space
+        case 13: // Enter Key
+        case 40: // Down Arrow
+          setExpanded(true);
+          break;
+        default:
+          return;
+      }
     }
     e.preventDefault();
   };
 
   const handleHover = (iexpanded: boolean) => {
-    shouldToggleOnHover && setExpanded(iexpanded);
+    isInternalExpand && shouldToggleOnHover && setExpanded(iexpanded);
   };
 
   const handleFocus = () => !hasFocus && setHasFocus(true);
 
   const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+    if (!e.currentTarget.contains(e.relatedTarget) && isInternalExpand) {
       setHasFocus(false);
       setExpanded(false);
     }
@@ -133,8 +147,9 @@ const Dropdown = ({
 
   const handleMouseLeave = () => handleHover(false);
 
-  const toggleExpanded = () =>
-    setExpanded(isLoading || disabled ? false : !expanded);
+  const toggleExpanded = () => {
+    isInternalExpand && setExpanded(isLoading || disabled ? false : !expanded);
+  };
 
   const handleClearSelected = (e) => {
     e.stopPropagation();

diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx
@@ -48,6 +48,8 @@ const MultiSelect = ({
   ClearIcon,
   debounceDuration = 300,
   ClearSelectedIcon,
+  defaultIsOpen,
+  isOpen,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -76,6 +78,8 @@ const MultiSelect = ({
         onMenuToggle={onMenuToggle}
         ArrowRenderer={ArrowRenderer}
         ClearSelectedIcon={ClearSelectedIcon}
+        defaultIsOpen={defaultIsOpen}
+        isOpen={isOpen}
       >
         <DropdownHeader
           value={nvalue}