Fixes liferay#1172 - Adding the toggle method to ClayDropdown, ClayAc…

…tionsDropdown and ClayCreationMenuDropdown, and removes unnecessary re-rendering

packages/clay-dropdown/src/ClayActionsDropdown.js

@@ -14,21 +14,27 @@ import templates from './ClayActionsDropdown.soy.js';
  */
 class ClayActionsDropdown extends ClayComponent {
 	/**
-	 * Handles footer button click.
-	 * @param {!Event} event
+	 * @inheritDoc
+	 */
+	attached() {
+		this.addListener('toggle', this._defaultToggle, true);
+	}
+
+	/**
+	 * Toggles the dropdown, closing it when open or opening it when closed.
 	 * @protected
 	 */
-	_handleButtonClick(event) {
-		this.emit('buttonClicked', event);
+	_defaultToggle() {
+		this.expanded = !this.expanded;
 	}
 
 	/**
-	 * Handle expandedChanged to manipulate the internal expanded.
+	 * Handles footer button click.
 	 * @param {!Event} event
 	 * @protected
 	 */
-	_handleExpandedChanged({newVal}) {
-		this.expanded = newVal;
+	_handleButtonClick(event) {
+		this.emit('buttonClicked', event);
 	}
 
 	/**
@@ -44,6 +50,21 @@ class ClayActionsDropdown extends ClayComponent {
 			originalEvent: event,
 		});
 	}
+
+	/**
+	 * Continues the propagation of the toggle event.
+	 * @param {?Event} event
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	toggle(event) {
+		if (event) {
+			event.preventDefault();
+		}
+
+		return !this.emit({
+			name: 'toggle',
+		});
+	}
 }
 
 /**

packages/clay-dropdown/src/ClayActionsDropdown.soy

@@ -7,7 +7,6 @@
 	{@param items: list<?>}
 	{@param spritemap: string}
 	{@param? _handleButtonClick: any}
-	{@param? _handleExpandedChanged: any}
 	{@param? _handleItemClick: any}
 	{@param? button: ?}
 	{@param? caption: string}
@@ -18,6 +17,7 @@
 	{@param? id: string}
 	{@param? itemsIconAlignment: string}
 	{@param? preferredAlign: string}
+	{@param? toggle: any}
 	{@param? triggerClasses: string}
 
 	{let $dropdownElementClasses kind="text"}
@@ -41,8 +41,8 @@
 		{param elementClasses: $dropdownElementClasses /}
 		{param events: [
 			'buttonClicked': $_handleButtonClick,
-			'expandedChanged': $_handleExpandedChanged,
-			'itemClicked': $_handleItemClick
+			'itemClicked': $_handleItemClick,
+			'toggle': $toggle
 		]/}
 		{param expanded: $expanded /}
 		{param helpText: $helpText /}

packages/clay-dropdown/src/ClayCreationMenuDropdown.js

@@ -14,21 +14,27 @@ import templates from './ClayCreationMenuDropdown.soy.js';
  */
 class ClayCreationMenuDropdown extends ClayComponent {
 	/**
-	 * Handles footer button click.
-	 * @param {!Event} event
+	 * @inheritDoc
+	 */
+	attached() {
+		this.addListener('toggle', this._defaultToggle, true);
+	}
+
+	/**
+	 * Toggles the dropdown, closing it when open or opening it when closed.
 	 * @protected
 	 */
-	_handleButtonClick(event) {
-		this.emit('moreButtonClicked', event);
+	_defaultToggle() {
+		this.expanded = !this.expanded;
 	}
 
 	/**
-	 * Handle expandedChanged to manipulate the internal expanded.
+	 * Handles footer button click.
 	 * @param {!Event} event
 	 * @protected
 	 */
-	_handleExpandedChanged({newVal}) {
-		this.expanded = newVal;
+	_handleButtonClick(event) {
+		this.emit('moreButtonClicked', event);
 	}
 
 	/**
@@ -44,6 +50,21 @@ class ClayCreationMenuDropdown extends ClayComponent {
 			originalEvent: event,
 		});
 	}
+
+	/**
+	 * Continues the propagation of the toggle event.
+	 * @param {?Event} event
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	toggle(event) {
+		if (event) {
+			event.preventDefault();
+		}
+
+		return !this.emit({
+			name: 'toggle',
+		});
+	}
 }
 
 /**

packages/clay-dropdown/src/ClayCreationMenuDropdown.soy

@@ -7,7 +7,6 @@
 	{@param primaryItems: list<?>}
 	{@param spritemap: string}
 	{@param? _handleButtonClick: any}
-	{@param? _handleExpandedChanged: any}
 	{@param? _handleItemClick: any}
 	{@param? disabled: bool}
 	{@param? elementClasses: string}
@@ -20,6 +19,7 @@
 	{@param? maxTotalItems: int}
 	{@param? preferredAlign: string}
 	{@param? secondaryItems: list<?>}
+	{@param? toggle: any}
 	{@param? triggerClasses: string}
 	{@param? triggerTitle: string}
 	{@param? viewMoreURL: string}
@@ -204,8 +204,8 @@
 		{param elementClasses: $elementClasses /}
 		{param events: [
 			'buttonClicked': $_handleButtonClick,
-			'expandedChanged': $_handleExpandedChanged,
-			'itemClicked': $_handleItemClick
+			'itemClicked': $_handleItemClick,
+			'toggle': $toggle
 		] /}
 		{param expanded: $expanded /}
 		{param helpText: $showMoreButton ? $helpText : null /}

packages/clay-dropdown/src/ClayDropdown.js

@@ -14,21 +14,27 @@ import templates from './ClayDropdown.soy.js';
  */
 class ClayDropdown extends ClayComponent {
 	/**
-	 * Handles footer button click.
-	 * @param {!Event} event
+	 * @inheritDoc
+	 */
+	attached() {
+		this.addListener('toggle', this._defaultToggle, true);
+	}
+
+	/**
+	 * Toggles the dropdown, closing it when open or opening it when closed.
 	 * @protected
 	 */
-	_handleButtonClick(event) {
-		this.emit('buttonClicked', event);
+	_defaultToggle() {
+		this.expanded = !this.expanded;
 	}
 
 	/**
-	 * Handle expandedChanged to manipulate the internal expanded.
+	 * Handles footer button click.
 	 * @param {!Event} event
 	 * @protected
 	 */
-	_handleExpandedChanged({newVal}) {
-		this.expanded = newVal;
+	_handleButtonClick(event) {
+		this.emit('buttonClicked', event);
 	}
 
 	/**
@@ -44,6 +50,21 @@ class ClayDropdown extends ClayComponent {
 			originalEvent: event,
 		});
 	}
+
+	/**
+	 * Continues the propagation of the toggle event.
+	 * @param {?Event} event
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	toggle(event) {
+		if (event) {
+			event.preventDefault();
+		}
+
+		return !this.emit({
+			name: 'toggle',
+		});
+	}
 }
 
 /**

packages/clay-dropdown/src/ClayDropdown.soy

@@ -7,7 +7,6 @@
 	{@param items: list<?>}
 	{@param spritemap: string}
 	{@param? _handleButtonClick: any}
-	{@param? _handleExpandedChanged: any}
 	{@param? _handleItemClick: any}
 	{@param? button: ?}
 	{@param? disabled: bool}
@@ -20,6 +19,7 @@
 	{@param? preferredAlign: string}
 	{@param? searchable: bool}
 	{@param? style: string}
+	{@param? toggle: any}
 	{@param? triggerClasses: string}
 	{@param? triggerSize: string}
 	{@param? triggerTitle: string}
@@ -52,8 +52,8 @@
 		{param elementClasses: $elementClasses /}
 		{param events: [
 			'buttonClicked': $_handleButtonClick,
-			'expandedChanged': $_handleExpandedChanged,
-			'itemClicked': $_handleItemClick
+			'itemClicked': $_handleItemClick,
+			'toggle': $toggle
 		]/}
 		{param expanded: $expanded /}
 		{param id: $id /}

packages/clay-dropdown/src/ClayDropdownBase.js

@@ -25,6 +25,7 @@ class ClayDropdownBase extends ClayComponent {
 	 * @inheritDoc
 	 */
 	attached() {
+		this.addListener('toggle', this._defaultToggle, true);
 		this.refs.portal.on('rendered', this._handleRenderedPortal.bind(this));
 	}
 
@@ -49,13 +50,21 @@ class ClayDropdownBase extends ClayComponent {
 		this._eventHandler.removeAllListeners();
 	}
 
+	/**
+	 * Toggles the dropdown, closing it when open or opening it when closed.
+	 * @protected
+	 */
+	_defaultToggle() {
+		this.expanded = !this.expanded;
+	}
+
 	/**
 	 * Closes the dropdown.
 	 * @protected
 	 */
 	_close() {
-		this.expanded = false;
 		this._eventHandler.removeAllListeners();
+		this.toggle();
 	}
 
 	/**
@@ -272,14 +281,13 @@ class ClayDropdownBase extends ClayComponent {
 	}
 
 	/**
-	 * Toggles the dropdown, closing it when open or opening it when closed.
+	 * Propagate the event toggle.
+	 * @return {Boolean} If the event has been prevented or not.
 	 */
 	toggle() {
-		if (!this.expanded) {
-			this.expanded = true;
-		} else {
-			this.expanded = false;
-		}
+		return !this.emit({
+			name: 'toggle',
+		});
 	}
 }
 

packages/clay-dropdown/src/ClayDropdownBase.soy

@@ -295,6 +295,8 @@
 			data-onclick="toggle"
 		{/if}
 
+		ref="triggerButton"
+
 		{if $title}
 			title="{$title}"
 		{/if}