Make Dropdown and NotificationsDropdown components more extensible

js/forum/src/components/NotificationsDropdown.js

@@ -1,8 +1,18 @@
-import Component from 'flarum/Component';
+import Dropdown from 'flarum/components/Dropdown';
 import icon from 'flarum/helpers/icon';
 import NotificationList from 'flarum/components/NotificationList';
 
-export default class NotificationsDropdown extends Component {
+export default class NotificationsDropdown extends Dropdown {
+  static initProps(props) {
+    props.className = props.className || 'NotificationsDropdown';
+    props.buttonClassName = props.buttonClassName || 'Button Button--flat';
+    props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
+    props.label = props.label || app.trans('core.notifications');
+    props.icon = props.icon || 'bell';
+
+    super.initProps(props);
+  }
+
   constructor(...args) {
     super(...args);
 
@@ -16,35 +26,51 @@ export default class NotificationsDropdown extends Component {
     this.list = new NotificationList();
   }
 
-  view() {
-    const user = app.session.user;
-    const unread = user.unreadNotificationsCount();
+  getButton() {
+    const unread = this.getUnreadCount();
+    const vdom = super.getButton();
 
+    vdom.attrs.className += (unread ? ' unread' : '');
+    vdom.attrs.onclick = this.onclick.bind(this);
+
+    return vdom;
+  }
+
+  getButtonContent() {
+    const unread = this.getUnreadCount();
+
+    return [
+      icon(this.props.icon, {className: 'Button-icon'}),
+      unread ? <span className="NotificationsDropdown-unread">{unread}</span> : '',
+      <span className="Button-label">{this.props.label}</span>
+    ];
+  }
+
+  getMenu() {
     return (
-      <div className="Dropdown NotificationsDropdown">
-        <a href="javascript:;"
-          className={'Dropdown-toggle Button Button--flat NotificationsDropdown-button' + (unread ? ' unread' : '')}
-          data-toggle="dropdown"
-          onclick={this.onclick.bind(this)}>
-          <span className="Button-icon">{unread || icon('bell')}</span>
-          <span className="Button-label">{app.trans('core.notifications')}</span>
-        </a>
-        <div className="Dropdown-menu Dropdown-menu--right" onclick={this.menuClick.bind(this)}>
-          {this.showing ? this.list.render() : ''}
-        </div>
+      <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
+        {this.showing ? this.list.render() : ''}
       </div>
     );
   }
 
   onclick() {
     if (app.drawer.isOpen()) {
-      m.route(app.route('notifications'));
+      this.goToRoute();
     } else {
       this.showing = true;
       this.list.load();
     }
   }
 
+  goToRoute() {
+    m.route(app.route('notifications'));
+  }
+
+  getUnreadCount() {
+    return app.session.user.unreadNotificationsCount();
+  }
+
   menuClick(e) {
     // Don't close the notifications dropdown if the user is opening a link in a
     // new tab or window.

js/lib/components/Dropdown.js

@@ -23,20 +23,18 @@ export default class Dropdown extends Component {
 
     props.className = props.className || '';
     props.buttonClassName = props.buttonClassName || '';
-    props.contentClassName = props.contentClassName || '';
+    props.menuClassName = props.menuClassName || '';
     props.label = props.label || app.trans('core.controls');
     props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'caret-down';
   }
 
   view() {
-    const items = listItems(this.props.children);
+    const items = this.props.children ? listItems(this.props.children) : [];
 
     return (
       <div className={'ButtonGroup Dropdown dropdown ' + this.props.className + ' itemCount' + items.length}>
         {this.getButton()}
-        <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>
-          {items}
-        </ul>
+        {this.getMenu(items)}
       </div>
     );
   }
@@ -94,4 +92,12 @@ export default class Dropdown extends Component {
       this.props.caretIcon ? icon(this.props.caretIcon, {className: 'Button-caret'}) : ''
     ];
   }
+
+  getMenu(items) {
+    return (
+      <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>
+        {items}
+      </ul>
+    );
+  }
 }