Component factory for top bar menus

Builds a component factory for top bar menus, which looks vaguely like a
higher-order component but doesn’t really fit the pattern. Specifically:

* The `createMenu()` function takes an object with properties `name` and
  `mapPropsToItems`, which returns a function…
* That takes two component classes, a `Label` class and an `Item` class.

This will then return a highly decorated component that renders the
menu, deals with opening/closing, marking enabled items as enabled, etc.

One of the decorations is the `onClickOutside` HOC which properly
handles clicks outside the menu (closing it).

Author: Mat Brown

package.json

@@ -127,11 +127,11 @@
     "prop-types": "^15.5.10",
     "qs": "^6.1.0",
     "react": "^15.4.1",
-    "react-click-outside": "tj/react-click-outside",
     "react-copy-to-clipboard": "^5.0.0",
     "react-dom": "^15.4.1",
     "react-draggable": "^2.2.6",
     "react-ga": "^2.1.2",
+    "react-onclickoutside": "^6.5.0",
     "react-prevent-clickthrough": "^0.0.3",
     "react-redux": "^5.0.3",
     "reduce-reducers": "^0.1.2",

src/components/TopBar/CurrentUserMenu.jsx

@@ -1,26 +1,22 @@
-import ClickOutside from 'react-click-outside';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {t} from 'i18next';
 
-export default function CurrentUserMenu({isOpen, onClose, onLogOut}) {
+export default function CurrentUserMenu({isOpen, onLogOut}) {
   if (!isOpen) {
     return null;
   }
 
   return (
-    <ClickOutside onClickOutside={onClose}>
-      <div className="top-bar__menu">
-        <div className="top-bar__menu-item" onClick={onLogOut}>
-          {t('top-bar.session.log-out-prompt')}
-        </div>
+    <div className="top-bar__menu">
+      <div className="top-bar__menu-item" onClick={onLogOut}>
+        {t('top-bar.session.log-out-prompt')}
       </div>
-    </ClickOutside>
+    </div>
   );
 }
 
 CurrentUserMenu.propTypes = {
   isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
   onLogOut: PropTypes.func.isRequired,
 };

src/components/TopBar/LibraryPicker.js

@@ -0,0 +1,28 @@
+import map from 'lodash/map';
+import PropTypes from 'prop-types';
+import libraries from '../../config/libraries';
+import createMenu from './createMenu';
+import LibraryPickerButton from './LibraryPickerButton';
+import LibraryPickerItem from './LibraryPickerItem';
+
+const LibraryPicker = createMenu({
+  name: 'libraryPicker',
+
+  mapPropsToItems({enabledLibraries}) {
+    return map(libraries, (library, key) => {
+      const isEnabled = enabledLibraries.includes(key);
+
+      return {
+        key,
+        isEnabled,
+        props: {isEnabled, library},
+      };
+    });
+  },
+})(LibraryPickerButton, LibraryPickerItem);
+
+LibraryPicker.propTypes = {
+  enabledLibraries: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default LibraryPicker;

src/components/TopBar/LibraryPicker.jsx

@@ -1,40 +1,16 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {t} from 'i18next';
-import LibraryPicker from './LibraryPicker';
 
-export default function LibraryPickerButton({
-  enabledLibraries,
-  isOpen,
-  onClick,
-  onLibraryToggled,
-}) {
+export default function LibraryPickerButton() {
   return (
-    <div
-      className={classnames(
-        'top-bar__menu-button',
-        {'top-bar__menu-button_active': isOpen},
-      )}
-      onClick={onClick}
-    >
+    <span>
       {t('top-bar.libraries')}
       {' '}
       <span className="u__icon">
         &#xf0d7;
       </span>
-      <LibraryPicker
-        enabledLibraries={enabledLibraries}
-        isOpen={isOpen}
-        onLibraryToggled={onLibraryToggled}
-      />
-    </div>
+    </span>
   );
 }
 
-LibraryPickerButton.propTypes = {
-  enabledLibraries: PropTypes.arrayOf(PropTypes.string).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  onLibraryToggled: PropTypes.func.isRequired,
-};
+LibraryPickerButton.propTypes = {};

src/components/TopBar/LibraryPickerButton.jsx

@@ -1,29 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-export default function LibraryPickerItem({
-  enabled,
-  library,
-  onLibraryToggled,
-}) {
+export default function LibraryPickerItem({isEnabled, library}) {
   return (
-    <div
-      className={classnames('top-bar__menu-item',
-        {'top-bar__menu-item_active': enabled},
-      )}
-      onClick={onLibraryToggled}
-    >
-      <span className={classnames('u__icon', {u__invisible: !enabled})}>
+    <span>
+      <span className={classnames('u__icon', {u__invisible: !isEnabled})}>
         &#xf00c;{' '}
       </span>
       {library.name}
-    </div>
+    </span>
   );
 }
 
 LibraryPickerItem.propTypes = {
-  enabled: PropTypes.bool.isRequired,
+  isEnabled: PropTypes.bool.isRequired,
   library: PropTypes.object.isRequired,
-  onLibraryToggled: PropTypes.func.isRequired,
 };

src/components/TopBar/LibraryPickerItem.jsx

@@ -0,0 +1,86 @@
+import classnames from 'classnames';
+import {connect} from 'react-redux';
+import onClickOutside from 'react-onclickoutside';
+import partial from 'lodash/partial';
+import preventClickthrough from 'react-prevent-clickthrough';
+import property from 'lodash/property';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {closeTopBarMenu, toggleTopBarMenu} from '../../actions';
+import {getOpenTopBarMenu} from '../../selectors';
+
+export default function createMenu({mapPropsToItems, name}) {
+  function mapStateToProps(state) {
+    const isOpen = getOpenTopBarMenu(state) === name;
+    return {
+      isOpen,
+      disableOnClickOutside: !isOpen,
+    };
+  }
+
+  function mapDispatchToProps(dispatch) {
+    return {
+      onClose() {
+        dispatch(closeTopBarMenu(name));
+      },
+
+      onToggle() {
+        dispatch(toggleTopBarMenu(name));
+      },
+    };
+  }
+
+  return function createMenuWithMappedProps(Label, Item) {
+    function Menu(props) {
+      const {isOpen, onClickItem, onToggle} = props;
+      const items = mapPropsToItems(props);
+      const menu = isOpen ?
+        (
+          <div
+            className="top-bar__menu"
+            onClick={preventClickthrough}
+          >
+            {items.map(({key, enabled, props: itemProps}) => (
+              <div
+                className={classnames('top-bar__menu-item',
+                  {'top-bar__menu-item_active': enabled},
+                )}
+                key={key}
+                onClick={partial(onClickItem, key)}
+              >
+                <Item {...itemProps} />
+              </div>
+            ))}
+          </div>
+        ) : null;
+
+      return (
+        <div
+          className={classnames(
+            'top-bar__menu-button',
+            {'top-bar__menu-button_active': isOpen},
+          )}
+          onClick={onToggle}
+        >
+          <Label />
+          {menu}
+        </div>
+      );
+    }
+
+    Menu.displayName = `Menu(${name})`;
+
+    Menu.propTypes = {
+      isOpen: PropTypes.bool.isRequired,
+      onClickItem: PropTypes.func.isRequired,
+      onToggle: PropTypes.func.isRequired,
+    };
+
+    return connect(mapStateToProps, mapDispatchToProps)(
+      onClickOutside(
+        Menu,
+        {handleClickOutside: property('props.onClose')},
+      ),
+    );
+  };
+}

src/components/TopBar/createMenu.jsx

@@ -6,7 +6,7 @@ import Wordmark from '../../static/images/wordmark.svg';
 import Pop from '../Pop';
 import CurrentUser from './CurrentUser';
 import HamburgerMenuButton from './HamburgerMenuButton';
-import LibraryPickerButton from './LibraryPickerButton';
+import LibraryPicker from './LibraryPicker';
 import NewProjectButton from './NewProjectButton';
 import ProjectsButton from './ProjectsButton';
 import SnapshotButton from './SnapshotButton';
@@ -78,11 +78,9 @@ export default function TopBar({
         projectKeys={projectKeys}
         onClick={partial(onClickMenu, 'projectPicker')}
       />
-      <LibraryPickerButton
+      <LibraryPicker
         enabledLibraries={enabledLibraries}
-        isOpen={openMenu === 'libraryPicker'}
-        onClick={partial(onClickMenu, 'libraryPicker')}
-        onLibraryToggled={partial(onLibraryToggled, currentProjectKey)}
+        onClickItem={partial(onLibraryToggled, currentProjectKey)}
       />
       <SnapshotButton
         isInProgress={isSnapshotInProgress}

src/components/TopBar/index.jsx

@@ -6718,10 +6718,6 @@ react-addons-perf@^15.4.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
-react-click-outside@tj/react-click-outside:
-  version "1.1.1"
-  resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/32c16f09318dff8701cacc4ea73655e1f393f2c7"
-
 react-copy-to-clipboard@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz#23ccdd7c4d9ec2cc763839e2a55b1220aeb4f33d"
@@ -6752,6 +6748,10 @@ react-ga@^2.1.2:
     object-assign "^4.0.1"
     prop-types "^15.5.6"
 
+react-onclickoutside@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.5.0.tgz#c45b39fe0d7f087817a9f5edab8c12349856b640"
+
 react-prevent-clickthrough@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/react-prevent-clickthrough/-/react-prevent-clickthrough-0.0.3.tgz#42d5cd85d7dd76dbb5862062ee7c70f1056edb80"