support dropdown-header and dropdown-divider

demos/default/index.js

@@ -33,6 +33,11 @@ const toolbar = new ToolbarView({
         text: 'The 1st MenuItem',
         id: 'menu-item-1st',
         onClick: () => console.log('click menu-item-1st'),
+      }, {
+        type: 'dropdown-divider',
+      }, {
+        type: 'dropdown-header',
+        text: 'Hello world!',
       }, {
         text: 'The 2nd MenuItem',
         id: 'menu-item-2nd',

js/dropdown-divider.jade

@@ -0,0 +1 @@
+li.divider(role='separator')

js/dropdown-divider.js

@@ -0,0 +1,6 @@
+import dropdownDividerTemplate from './dropdown-divider.jade';
+
+export function renderDropdownDivider() {
+  return { html: dropdownDividerTemplate() };
+}
+

js/dropdown-header.jade

@@ -0,0 +1 @@
+li.dropdown-header(role='presentation')=text

js/dropdown-header.js

@@ -0,0 +1,9 @@
+import _ from 'underscore';
+import dropdownHeaderTemplate from './dropdown-header.jade';
+
+export function renderDropdownHeader(dropdownHeader) {
+  return {
+    html: dropdownHeaderTemplate(_.defaults(dropdownHeader, { text: '' })),
+  };
+}
+

js/dropdown-item.jade

@@ -0,0 +1,8 @@
+li(role='presentation')
+  a.dropdown-item(class=classes, id=id, role='menuitem')
+    if iconLeft
+      span.icon-left.glyphicon(class=iconLeft)
+    span.text=text
+    if iconRight
+      span.icon-right.glyphicon(class=iconRight)
+

js/dropdown-item.js

@@ -1,23 +1,23 @@
 import _ from 'underscore';
-import menuItemTemplate from './menu-item.jade';
+import dropdownItemTemplate from './dropdown-item.jade';
 
-export function renderMenuItem(menuItem) {
+export function renderDropdownItem(dropdownItem) {
   const options = _.extend({
     classes: [],
-    id:  _.uniqueId('menu-item-'),
+    id:  _.uniqueId('dropdown-item-'),
     text: '',
     iconLeft: null,
     iconRight: null,
     tabindex: -1,
     onClick: null,
-  }, menuItem);
+  }, dropdownItem);
-  const html = menuItemTemplate(options);
+  const html = dropdownItemTemplate(options);
   const events = {};
 
   const { id, onClick } = options;
 
   if (_.isFunction(onClick)) {
-    events[`click .menu-item#${id}`] = onClick;
+    events[`click .dropdown-item#${id}`] = onClick;
   }
 
   return { html, events };

js/dropdown.jade

@@ -4,5 +4,4 @@ include ./button-mixin.jade
   +buttonMixin(button)
   ul.dropdown-menu(role='menu', aria-labeledby=button.id, class=classes, id=id)
     each item in menu.items
-      li(role='presentation')
+      != item.html
-        != item.html

js/dropdown.js

@@ -29,7 +29,7 @@ export function renderDropdown(dropdown, renderItem) {
       items: _.map(menu.items, (item, index) => ({
         html: renderItem(_.defaults({
           tabindex: index === 0 ? 0 : -1,
-        }, item, { type: 'menu-item' }), events),
+        }, item, { type: 'dropdown-item' }), events),
       })),
     }, menu, {
       classes: [],

js/index.js

@@ -2,12 +2,16 @@ import { register } from './item-register.js';
 import { renderToolbar } from './toolbar.js';
 import { renderButton } from './button.js';
 import { renderDropdown } from './dropdown.js';
-import { renderMenuItem } from './menu-item.js';
+import { renderDropdownItem } from './dropdown-item.js';
+import { renderDropdownHeader } from './dropdown-header.js';
+import { renderDropdownDivider } from './dropdown-divider.js';
 
 register('toolbar', renderToolbar);
 register('button', renderButton);
 register('dropdown', renderDropdown);
-register('menu-item', renderMenuItem);
+register('dropdown-item', renderDropdownItem);
+register('dropdown-header', renderDropdownHeader);
+register('dropdown-divider', renderDropdownDivider);
 
 export { register } from './item-register.js';
 export { ToolbarView } from './toolbar-view.js';

js/menu-item.jade

@@ -1,7 +0,0 @@
-a.menu-item(class=classes, id=id, role='menuitem')
-  if iconLeft
-    span.icon-left.glyphicon(class=iconLeft)
-  span.text=text
-  if iconRight
-    span.icon-right.glyphicon(class=iconRight)
-