Merge pull request #127 from Ultimaker/close-drop-down-menus-on-item-click

close drop down menus on item click

Author: ImreBognarUltimaker

src/components/__tests__/drop_down_menu_item.test.tsx

@@ -3,17 +3,18 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
-import DropDownMenuItem from '../drop_down_menu_item';
+import { DropDownMenuItem, DropDownMenuItemProps } from '../drop_down_menu_item';
 import Button from '../button';
 
 describe('The DropDownMenuItem component', () => {
-    let props;
+    let props: DropDownMenuItemProps;
     let wrapper;
 
     beforeEach(() => {
         props = {
             active: false,
             onClickHandler: jest.fn(),
+            onCloseMenuHandler: jest.fn(),
         };
         wrapper = shallow(<DropDownMenuItem {...props}>Menu item</DropDownMenuItem>);
     });
@@ -26,6 +27,7 @@ describe('The DropDownMenuItem component', () => {
     it('should call the click handler when item is clicked', () => {
         wrapper.find(Button).props().onClickHandler();
         expect(props.onClickHandler).toHaveBeenCalled();
+        expect(props.onCloseMenuHandler).toHaveBeenCalled();
     });
 
     it('should render item as disabled', () => {

src/components/drop_down_menu.tsx

@@ -25,6 +25,13 @@ export default class DropDownMenu extends React.Component<DropDownMenuProps, Dro
         showMenu: false,
     };
 
+    constructor(props) {
+        super(props);
+
+        // bind callbacks once
+        this._onToggleMenuHandler = this._onToggleMenuHandler.bind(this);
+    }
+
     private _onToggleMenuHandler(showMenu: boolean) {
         this.setState({ showMenu });
     }
@@ -61,7 +68,12 @@ export default class DropDownMenu extends React.Component<DropDownMenuProps, Dro
                     triggerElement={this._renderTrigger()}
                     onToggleMenuHandler={newShowMenu => this._onToggleMenuHandler(newShowMenu)}
                 >
-                    {children}
+                    {React.Children.map(children, (child: JSX.Element) => (
+                        React.cloneElement(
+                            child,
+                            { onCloseMenuHandler: () => this._onToggleMenuHandler(false) },
+                        )
+                    ))}
                 </DropDownMenuBase>
             </div>
         );

src/components/drop_down_menu_base.tsx

@@ -41,7 +41,9 @@ export class DropDownMenuBase extends React.Component<DropDownMenuBaseProps, {}>
     private _menuRef;
 
     private _onOutsideFocusHandler(event): void {
-        if (this._menuRef && !this._menuRef.current.contains(event.target)) {
+        if (this._menuRef
+            && this._menuRef.current
+            && !this._menuRef.current.contains(event.target)) {
             this._onToggleMenuHandler(false);
         }
 

src/components/drop_down_menu_item.tsx

@@ -15,23 +15,35 @@ export interface DropDownMenuItemProps {
     id?: string;
     /** Optional class for the menu item */
     className?: string;
+    /** Passed by the DropDownMenu component */
+    onCloseMenuHandler?: () => void;
 }
 
-const DropDownMenuItem: React.StatelessComponent<DropDownMenuItemProps> = ({
-    active, disabled, onClickHandler, id, className, children,
-}) => (
-    <li>
-        <Button
-            id={id}
-            className={classNames('drop-down-menu-base__item', { disabled, active }, className)}
-            appearance="no-style"
-            onClickHandler={() => { onClickHandler(); }}
-            disabled={disabled}
-        >
-            {children}
-        </Button>
-    </li>
-);
+export const DropDownMenuItem: React.StatelessComponent<DropDownMenuItemProps> = ({
+    active, disabled, onClickHandler, id, className, onCloseMenuHandler, children,
+}) => {
+    const _onClickHandler = () => {
+        onClickHandler();
+
+        if (onCloseMenuHandler) {
+            onCloseMenuHandler();
+        }
+    };
+
+    return (
+        <li>
+            <Button
+                id={id}
+                className={classNames('drop-down-menu-base__item', { disabled, active }, className)}
+                appearance="no-style"
+                onClickHandler={_onClickHandler}
+                disabled={disabled}
+            >
+                {children}
+            </Button>
+        </li>
+    );
+};
 
 DropDownMenuItem.displayName = 'DropDownMenuItem';
 

src/stories/menu.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import {
     withKnobs, text, boolean, selectV2,
 } from '@storybook/addon-knobs/react';
@@ -47,19 +46,19 @@ stories.add('Context menu', withState({ showMenu: false })(withInfo(
         menuOffsetDirection={selectV2('Menu Offset Direction', offsetOptions, offsetDefaultValue)}
     >
         <ContextMenuItem
-            onClickHandler={() => { store.set({ showMenu: false }); action('clicked 1'); }}
+            onClickHandler={() => { store.set({ showMenu: false }); }}
             disabled={boolean('Disabled', false)}
         >
             {text('Text 1', 'Context menu item 1')}
         </ContextMenuItem>
         <ContextMenuItem
-            onClickHandler={() => { store.set({ showMenu: false }); action('clicked 2'); }}
+            onClickHandler={() => { store.set({ showMenu: false }); }}
             disabled={boolean('Disabled', false)}
         >
             {text('Text 2', 'Context menu item 2')}
         </ContextMenuItem>
         <ContextMenuItem
-            onClickHandler={() => { store.set({ showMenu: false }); action('clicked 3'); }}
+            onClickHandler={() => { store.set({ showMenu: false }); }}
             disabled={boolean('Disabled', false)}
         >
             {text('Text 3', 'Context menu item 3')}
@@ -71,16 +70,16 @@ stories.add('Drop down menu', withInfo(
     'Drop down menu',
 )(() => (
     <DropDownMenu activeLabel="10">
-        <DropDownMenuItem active onClickHandler={action('clicked')}>
+        <DropDownMenuItem active onClickHandler={() => {}}>
             10
         </DropDownMenuItem>
-        <DropDownMenuItem active={false} onClickHandler={action('clicked')}>
+        <DropDownMenuItem active={false} onClickHandler={() => {}}>
             20
         </DropDownMenuItem>
-        <DropDownMenuItem active={false} onClickHandler={action('clicked')}>
+        <DropDownMenuItem active={false} onClickHandler={() => {}}>
             40
         </DropDownMenuItem>
-        <DropDownMenuItem active={false} onClickHandler={action('clicked')}>
+        <DropDownMenuItem active={false} onClickHandler={() => {}}>
             80
         </DropDownMenuItem>
     </DropDownMenu>
@@ -90,12 +89,12 @@ stories.add('User account menu', withInfo(
     'User account menu',
 )(() => (
     <UserAccountMenu
-        onSignOutClickHandler={action('clicked')}
+        onSignOutClickHandler={() => {}}
         manageAccountURL={text('Account Management URL', 'https://account.ultimaker.com')}
         displayName="Test User"
         triggerWidth={text('Trigger width', null)}
         triggerHeight={text('Trigger height', null)}
         signedOut={boolean('Sign out', false)}
-        onSignInClickHandler={action('clicked')}
+        onSignInClickHandler={() => {}}
     />
 )));