Merge pull request #851 from carloslancha/issue-850-propagate-managem…

…ent-toolbar-dropdown-item-click

Propagate ManagementToolbar dropdown items click events | Fixes #850

packages/clay-component/src/ClayComponent.js

@@ -2,6 +2,7 @@ import Component from 'metal-component';
 import {Config} from 'metal-state';
 import {domData} from 'metal-dom';
 import {core, isServerSide} from 'metal';
+import {isObject} from 'util';
 
 /**
  * Clay Component.
@@ -11,8 +12,8 @@ class ClayComponent extends Component {
 	/**
 	 * @inheritDoc
 	 */
-	attached() {
-		super.attached();
+	attached(...args) {
+		super.attached(...args);
 
 		if (isServerSide()) {
 			return;
@@ -56,6 +57,71 @@ class ClayComponent extends Component {
 			}
 		}
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	buildFacade_(eventName, data, originalEvent) {
+		if (this.getShouldUseFacade()) {
+			const facade = {
+				data: data,
+				preventDefault: function() {
+					facade.preventedDefault = true;
+					if (
+						originalEvent &&
+						originalEvent.preventDefault &&
+						(!originalEvent.preventDefault ||
+							!originalEvent.defaultPrevented)
+					) {
+						originalEvent.preventDefault();
+					}
+				},
+				stopInmediatePropagation: function() {
+					if (
+						originalEvent &&
+						originalEvent.stopInmediatePropagation
+					) {
+						originalEvent.stopInmediatePropagation();
+					}
+				},
+				stopPropagation: function() {
+					if (originalEvent && originalEvent.stopPropagation) {
+						originalEvent.stopPropagation();
+					}
+				},
+				target: this,
+				type: eventName,
+			};
+
+			return facade;
+		}
+	}
+
+	/**
+	 * Execute each of the listeners in order with te supplied arguments.
+	 * @param {string|object} event
+	 * @param {*} opt_args [arg1], [arg2], [...]
+	 * @return {boolean} Returns true if event had listeners, false otherwise.
+	 */
+	emit(event, ...args) {
+		const eventName = isObject(event) ? event.name : event;
+		const facade = this.buildFacade_(
+			eventName,
+			event.data,
+			event.originalEvent
+		);
+
+		args = isObject(event) ? [facade] : args;
+
+		const listeners = this.getRawListeners_(eventName);
+
+		if (listeners.length === 0) {
+			return false;
+		}
+
+		this.runListeners_(listeners, args, facade);
+		return true;
+	}
 }
 
 /**

packages/clay-dataset-display/package.json

@@ -28,11 +28,11 @@
   ],
   "dependencies": {
     "clay-card-grid": "^2.0.0-rc.12",
+    "clay-component": "^2.0.0-rc.12",
     "clay-list": "^2.0.0-rc.12",
     "clay-management-toolbar": "^2.0.0-rc.12",
     "clay-table": "^2.0.0-rc.12",
     "metal": "^2.16.0",
-    "metal-component": "^2.16.0",
     "metal-soy": "^2.16.0",
     "metal-state": "^2.16.0",
     "metal-web-component": "^2.16.0"

packages/clay-dataset-display/src/ClayDatasetDisplay.js

@@ -7,17 +7,17 @@ import {
 	filterItemsValidator,
 } from 'clay-management-toolbar';
 import {Config} from 'metal-state';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 
 import templates from './ClayDatasetDisplay.soy.js';
 
 /**
  * Metal ClayDatasetDisplay component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayDatasetDisplay extends Component {
+class ClayDatasetDisplay extends ClayComponent {
 	/**
 	 * @inheritDoc
 	 */
@@ -73,11 +73,16 @@ class ClayDatasetDisplay extends Component {
 
 	/**
 	 * Continues the propagation of the action item clicked event
-	 * @param {!Object} item
+	 * @param {!Event} event
 	 * @private
-	 */
-	_handleActionClicked(item) {
-		this.emit('actionClicked', item);
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleActionItemClicked(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'actionItemClicked',
+			originalEvent: event,
+		});
 	}
 
 	/**
@@ -89,6 +94,20 @@ class ClayDatasetDisplay extends Component {
 		this.emit('creationButtonClicked', event);
 	}
 
+	/**
+	 * Continues the propagation of the creation menu item clicked event
+	 * @param {!Event} event
+	 * @private
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleCreationMenuItemClicked(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'creationMenuItemClicked',
+			originalEvent: event,
+		});
+	}
+
 	/**
 	 * Continues the propagation of the creation menu more button clicked event
 	 * @param {!Event} event
@@ -115,6 +134,20 @@ class ClayDatasetDisplay extends Component {
 		this.emit('filterDoneClicked', event);
 	}
 
+	/**
+	 * Continues the propagation of the filter item click event
+	 * @param {!Event} event
+	 * @private
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleFilterItemClicked(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'filterItemClicked',
+			originalEvent: event,
+		});
+	}
+
 	/**
 	 * Toggles the selection of an item and adds or removes it from selected items
 	 * list.
@@ -227,7 +260,7 @@ class ClayDatasetDisplay extends Component {
 	 * @param {!Object} item
 	 * @private
 	 */
-	_handleViewTypeClicked(item) {
+	_handleViewTypeItemClicked(item) {
 		this.views[this.selectedView].active = false;
 
 		for (let [index, view] of this.views.entries()) {

packages/clay-dataset-display/src/ClayDatasetDisplay.soy

@@ -5,17 +5,19 @@
  */
 {template .render}
 	{@param spritemap: string}
-	{@param? _handleActionClicked: any}
+	{@param? _handleActionItemClicked: any}
 	{@param? _handleCreationButtonClicked: any}
+	{@param? _handleCreationMenuItemClicked: any}
 	{@param? _handleCreationMenuMoreButtonClicked: any}
 	{@param? _handleDeselectAllClicked: any}
 	{@param? _handleFilterDoneClicked: any}
+	{@param? _handleFilterItemClicked: any}
 	{@param? _handleItemToggled: any}
 	{@param? _handleSearch: any}
 	{@param? _handleSelectAllClicked: any}
 	{@param? _handleSelectPageCheckboxChanged: any}
 	{@param? _handleSortingButtonClicked: any}
-	{@param? _handleViewTypeClicked: any}
+	{@param? _handleViewTypeItemClicked: any}
 	{@param? _selectedItems: list<?>}
 	{@param? _totalItems: number}
 	{@param? actionItems: list<[
@@ -105,16 +107,18 @@
 				{param actionItems: $actionItems /}
 				{param creationMenu: $creationMenu /}
 				{param events: [
-					'actionClicked': $_handleActionClicked,
+					'actionItemClicked': $_handleActionItemClicked,
 					'creationButtonClicked': $_handleCreationButtonClicked,
+					'creationMenuItemClicked': $_handleCreationMenuItemClicked,
 					'creationMenuMoreButtonClicked': $_handleCreationMenuMoreButtonClicked,
 					'deselectAllClicked': $_handleDeselectAllClicked,
 					'filterDoneClicked': $_handleFilterDoneClicked,
+					'filterItemClicked': $_handleFilterItemClicked,
 					'search': $_handleSearch,
 					'selectAllClicked': $_handleSelectAllClicked,
 					'selectPageCheckboxChanged': $_handleSelectPageCheckboxChanged,
 					'sortingButtonClicked': $_handleSortingButtonClicked,
-					'viewTypeClicked': $_handleViewTypeClicked
+					'viewTypeClicked': $_handleViewTypeItemClicked
 				] /}
 				{param filterItems: $filterItems /}
 				{param ref: 'managementToolbar' /}

packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js

@@ -543,7 +543,13 @@ describe('ClayDatasetDisplay', function() {
 		jest.runAllTimers();
 
 		expect(spy).toHaveBeenCalled();
-		expect(spy).toHaveBeenCalledWith('actionClicked', expect.any(Object));
+		expect(spy).toHaveBeenCalledWith(
+			expect.objectContaining({
+				data: expect.any(Object),
+				name: 'actionItemClicked',
+				originalEvent: expect.any(Object),
+			})
+		);
 	});
 
 	it('should render a ClayDatasetDisplay and emit an event on management toolbar filter done button click', () => {
@@ -553,7 +559,8 @@ describe('ClayDatasetDisplay', function() {
 
 		const spy = jest.spyOn(component, 'emit');
 
-		let filtersDropdown = component.refs.managementToolbar.refs.filters;
+		let filtersDropdown =
+			component.refs.managementToolbar.refs.filtersDropdown;
 		filtersDropdown.refs.portal.refs.dropdownButton.element.click();
 
 		jest.runAllTimers();
@@ -585,6 +592,50 @@ describe('ClayDatasetDisplay', function() {
 		);
 	});
 
+	it('should render a ClayDatasetDisplay and emit an event on creation menu item click', () => {
+		jest.useFakeTimers();
+
+		component = new ClayDatasetDisplay(defaultConfig);
+
+		const spy = jest.spyOn(component, 'emit');
+
+		const element =
+			component.refs.managementToolbar.refs.creationMenuDropdown.refs
+				.dropdown.refs.portal.element;
+		element.querySelector('ul li').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith(
+			expect.objectContaining({
+				data: expect.any(Object),
+				name: 'creationMenuItemClicked',
+				originalEvent: expect.any(Object),
+			})
+		);
+	});
+
+	it('should render a ClayDatasetDisplay and emit an event on filter item click', () => {
+		jest.useFakeTimers();
+
+		component = new ClayDatasetDisplay(defaultConfig);
+
+		const spy = jest.spyOn(component, 'emit');
+
+		const element =
+			component.refs.managementToolbar.refs.filtersDropdown.refs.portal
+				.element;
+		element.querySelector('ul li:not(.dropdown-subheader)').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith(
+			expect.objectContaining({
+				data: expect.any(Object),
+				name: 'filterItemClicked',
+				originalEvent: expect.any(Object),
+			})
+		);
+	});
+
 	it('should render a ClayDatasetDisplay and emit an event on management toolbar creation menu more button click', () => {
 		jest.useFakeTimers();
 

packages/clay-dropdown/package.json

@@ -29,12 +29,12 @@
   "dependencies": {
     "clay-button": "^2.0.0-rc.12",
     "clay-checkbox": "^2.0.0-rc.12",
+    "clay-component": "^2.0.0-rc.12",
     "clay-icon": "^2.0.0-rc.12",
     "clay-link": "^2.0.0-rc.12",
     "clay-portal": "^2.0.0-rc.12",
     "clay-radio": "^2.0.0-rc.12",
     "metal": "^2.16.0",
-    "metal-component": "^2.16.0",
     "metal-dom": "^2.16.0",
     "metal-events": "^2.16.0",
     "metal-position": "^2.1.0",

packages/clay-dropdown/src/ClayActionsDropdown.js

@@ -1,6 +1,6 @@
 import 'clay-icon';
 import './ClayDropdownBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -10,9 +10,9 @@ import templates from './ClayActionsDropdown.soy.js';
 
 /**
  * Implementation for Metal Clay Action Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayActionsDropdown extends Component {
+class ClayActionsDropdown extends ClayComponent {
 	/**
 	 * Handles footer button click.
 	 * @param {!Event} event
@@ -24,11 +24,16 @@ class ClayActionsDropdown extends Component {
 
 	/**
 	 * Continues the propagation of the item clicked event
-	 * @param {!Object} item
+	 * @param {!Event} event
 	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
 	 */
-	_handleItemClick(item) {
-		this.emit('itemClicked', item);
+	_handleItemClick(event) {
+		return !this.emit({
+			data: event.data,
+			name: 'itemClicked',
+			originalEvent: event,
+		});
 	}
 }