Add closeOnClick option to DropDownMenu component (#2418)

* Add closeOnClick option to DropDownMenu component * Fix lint issue - move handleDropdownToggle after componentWillReceiveProps
reactioncommerce · Jun 16, 2017 · e4bade3 · e4bade3
1 parent 5d0fc79
commit e4bade3
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 3 deletions.
diff --git a/imports/plugins/core/ui/client/components/menu/dropDownMenu.js b/imports/plugins/core/ui/client/components/menu/dropDownMenu.js
@@ -16,23 +16,55 @@ class DropDownMenu extends Component {
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.isControlled) {
+      this.setState({
+        isOpen: nextProps.isOpen
+      });
+    }
+  }
+
   handleDropdownToggle = () => {
     this.setState({
       isOpen: !this.state.isOpen
     });
   }
 
+  get isOpen() {
+    return this.props.isOpen || this.state.isOpen;
+  }
+
+  get isControlled() {
+    return typeof this.props.isOpen === "boolean";
+  }
+
   handleMenuItemChange = (event, value, menuItem) => {
     this.setState({
       label: menuItem.props.label || value,
       isOpen: false
     });
 
+    if (this.props.closeOnClick) {
+      this.handleOpen(false);
+    }
+
     if (this.props.onChange) {
       this.props.onChange(event, value);
     }
   }
 
+  handleOpen = (isOpen) => {
+    if (this.isControlled) {
+      if (this.props.onRequestOpen) {
+        this.props.onRequestOpen(isOpen);
+      }
+    } else {
+      this.setState({
+        isOpen: isOpen
+      });
+    }
+  }
+
   get label() {
     let label = this.state.label;
     Children.forEach(this.props.children, (element) => {
@@ -54,6 +86,7 @@ class DropDownMenu extends Component {
   render() {
     return (
       <Popover
+        attachment={this.props.attachment}
         buttonElement={
           this.props.buttonElement ||
           <Button
@@ -62,9 +95,9 @@ class DropDownMenu extends Component {
             label={this.label}
           />
         }
+        isOpen={this.isOpen}
         onClick={this.handleDropdownToggle}
-        isOpen={this.state.isOpen}
-        attachment={this.props.attachment}
+        onRequestOpen={this.handleOpen}
         targetAttachment={this.props.targetAttachment}
       >
         <Menu
@@ -85,8 +118,14 @@ DropDownMenu.propTypes = {
   buttonElement: PropTypes.node,
   children: PropTypes.node,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  closeOnClick: PropTypes.bool,
+  isEnabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
   menuStyle: PropTypes.object,
   onChange: PropTypes.func,
+  onPublishClick: PropTypes.func,
+  onRequestOpen: PropTypes.func,
+  revisions: PropTypes.arrayOf(PropTypes.object),
   targetAttachment: PropTypes.string,
   translation: PropTypes.shape({
     lang: PropTypes.string

diff --git a/imports/plugins/core/ui/client/components/popover/popover.js b/imports/plugins/core/ui/client/components/popover/popover.js
@@ -6,6 +6,26 @@ import PopoverContent from "./popoverContent";
 import { Button, ButtonGroup } from "/imports/plugins/core/ui/client/components/";
 
 class Popover extends Component {
+  state = {
+    isOpen: false
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.isControlled) {
+      this.setState({
+        isOpen: nextProps.isOpen
+      });
+    }
+  }
+
+  get isOpen() {
+    return this.props.isOpen || this.state.isOpen;
+  }
+
+  get isControlled() {
+    return typeof this.props.isOpen === "boolean";
+  }
+
   /**
    * attachment
    * @description Return the attachment for the tooltip or the default
@@ -21,8 +41,32 @@ class Popover extends Component {
     }
   }
 
+  handleOpen = () => {
+    if (this.isControlled) {
+      if (this.props.onRequestOpen) {
+        this.props.onRequestOpen(true);
+      }
+    } else {
+      this.setState({
+        isOpen: true
+      });
+    }
+  }
+
+  handleClickOutside = () => {
+    if (this.isControlled) {
+      if (this.props.onRequestOpen) {
+        this.props.onRequestOpen(false);
+      }
+    } else {
+      this.setState({
+        isOpen: false
+      });
+    }
+  }
+
   renderPopoverChildren() {
-    if (this.props.isOpen) {
+    if (this.isOpen) {
       return  (
         <PopoverContent
           children={this.props.children}
@@ -84,6 +128,7 @@ Popover.propTypes = {
   isOpen: PropTypes.bool,
   onClick: PropTypes.func,
   onDisplayButtonClick: PropTypes.func,
+  onRequestOpen: PropTypes.func,
   showArrow: PropTypes.bool,
   showDropdownButton: PropTypes.bool,
   targetAttachment: PropTypes.string,