Merge pull request react-toolbox#1663 from adamhenson/iconmenu-active-prop

IconMenu: New "active" Prop (fixes react-toolbox#1662)

Author: rubenmoya

components/menu/IconMenu.d.ts

@@ -13,6 +13,11 @@ export interface IconMenuTheme {
 }
 
 export interface IconMenuProps extends ReactToolbox.Props {
+  /**
+   * If true, the inner Menu component will be active.
+   * @default false
+   */
+  active?: boolean;
   /**
    * Children to pass through the component.
    */

components/menu/IconMenu.js

@@ -9,6 +9,7 @@ import InjectMenu from './Menu';
 const factory = (IconButton, Menu) => {
   class IconMenu extends Component {
     static propTypes = {
+      active: PropTypes.bool,
       children: PropTypes.node,
       className: PropTypes.string,
       icon: PropTypes.oneOfType([
@@ -32,6 +33,7 @@ const factory = (IconButton, Menu) => {
     };
 
     static defaultProps = {
+      active: false,
       className: '',
       icon: 'more_vert',
       iconRipple: true,
@@ -41,7 +43,13 @@ const factory = (IconButton, Menu) => {
     };
 
     state = {
-      active: false,
+      active: this.props.active,
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
     }
 
     handleButtonClick = (event) => {
@@ -56,7 +64,7 @@ const factory = (IconButton, Menu) => {
 
     render() {
       const {
-        children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line
+        active, children, className, icon, iconRipple, inverse, menuRipple, onHide, // eslint-disable-line
         onSelect, onShow, position, selectable, selected, theme, ...other
       } = this.props;
       return (

components/menu/__test__/index.spec.js

@@ -1,8 +1,60 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import { IconMenu } from '../IconMenu';
 import { Menu } from '../Menu';
 import { MenuItem } from '../MenuItem';
 
+describe('IconMenu', () => {
+  describe('#on mount', () => {
+    describe('when \'active\' prop is not set', () => {
+      it('sets \'active\' Menu prop correctly', () => {
+        const wrapper = shallow(<IconMenu />);
+        expect(wrapper.find('Menu').props().active).toBe(false);
+      });
+    });
+
+    describe('when \'active\' prop is set to false', () => {
+      it('sets \'active\' Menu prop correctly', () => {
+        const wrapper = shallow(<IconMenu active={false} />);
+        expect(wrapper.find('Menu').props().active).toBe(false);
+      });
+
+      it('sets \'active\' Menu prop correctly after IconButton click', () => {
+        const wrapper = mount(<IconMenu active={false} />);
+        wrapper.find('IconButton').simulate('click');
+        expect(wrapper.find('Menu').props().active).toBe(true);
+      });
+
+      it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => {
+        const wrapper = mount(<IconMenu active={false} />);
+        wrapper.find('IconButton').simulate('click');
+        wrapper.setProps({ active: false });
+        expect(wrapper.find('Menu').props().active).toBe(false);
+      });
+    });
+
+    describe('when \'active\' prop is set to true', () => {
+      it('sets \'active\' Menu prop correctly', () => {
+        const wrapper = shallow(<IconMenu active />);
+        expect(wrapper.find('Menu').props().active).toBe(true);
+      });
+
+      it('sets \'active\' Menu prop correctly after IconButton click', () => {
+        const wrapper = mount(<IconMenu active />);
+        wrapper.find('IconButton').simulate('click');
+        expect(wrapper.find('Menu').props().active).toBe(false);
+      });
+
+      it('sets \'active\' Menu prop correctly when prop is set after IconButton click', () => {
+        const wrapper = mount(<IconMenu active />);
+        wrapper.find('IconButton').simulate('click');
+        wrapper.setProps({ active: true });
+        expect(wrapper.find('Menu').props().active).toBe(true);
+      });
+    });
+  });
+});
+
 describe('MenuItem', () => {
   describe('#onClick', () => {
     it('passes to listener the event', () => {

components/menu/readme.md

@@ -61,6 +61,7 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 
 | Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`             | `false`         | If true, the inner `Menu` component will be active. |
 | `className`     | `String`              |  `''`           | Set a class to give custom styles to the icon wrapper.|
 | `icon`          | `String` or `Element` | `more_vert`     | Icon font key string or Element to display the opener icon. |
 | `iconRipple`    | `Boolean`             | `true`          | If true, the icon will show a ripple when is clicked. |