clay-dropdown - npm Package Compare versions

Comparing version 2.0.0-rc.12 to 2.0.0

lib/ClayActionsDropdown.js

@@ -14,5 +14,5 @@ 'use strict';
 
-var _metalComponent = require('metal-component');
+var _clayComponent = require('clay-component');
 
-var _metalComponent2 = _interopRequireDefault(_metalComponent);
+var _clayComponent2 = _interopRequireDefault(_clayComponent);
 
@@ -47,6 +47,6 @@ var _metalWebComponent = require('metal-web-component');
  * Implementation for Metal Clay Action Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-var ClayActionsDropdown = function (_Component) {
-	_inherits(ClayActionsDropdown, _Component);
+var ClayActionsDropdown = function (_ClayComponent) {
+	_inherits(ClayActionsDropdown, _ClayComponent);
 
@@ -73,4 +73,5 @@ function ClayActionsDropdown() {
    * 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.
    */
@@ -80,4 +81,8 @@
 		key: '_handleItemClick',
-		value: function _handleItemClick(item) {
-			this.emit('itemClicked', item);
+		value: function _handleItemClick(event) {
+			return !this.emit({
+				data: event.data,
+				name: 'itemClicked',
+				originalEvent: event
+			});
 		}
@@ -87,3 +92,3 @@ }]);
 	return ClayActionsDropdown;
-}(_metalComponent2.default);
+}(_clayComponent2.default);
 
@@ -90,0 +95,0 @@ /**

lib/ClayCreationMenuDropdown.js

@@ -14,5 +14,5 @@ 'use strict';
 
-var _metalComponent = require('metal-component');
+var _clayComponent = require('clay-component');
 
-var _metalComponent2 = _interopRequireDefault(_metalComponent);
+var _clayComponent2 = _interopRequireDefault(_clayComponent);
 
@@ -47,6 +47,6 @@ var _metalWebComponent = require('metal-web-component');
  * Implementation for Metal Clay Action Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-var ClayCreationMenuDropdown = function (_Component) {
-	_inherits(ClayCreationMenuDropdown, _Component);
+var ClayCreationMenuDropdown = function (_ClayComponent) {
+	_inherits(ClayCreationMenuDropdown, _ClayComponent);
 
@@ -73,4 +73,5 @@ function ClayCreationMenuDropdown() {
    * 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.
    */
@@ -80,4 +81,8 @@
 		key: '_handleItemClick',
-		value: function _handleItemClick(item) {
-			this.emit('itemClicked', item);
+		value: function _handleItemClick(event) {
+			return !this.emit({
+				data: event.data,
+				name: 'itemClicked',
+				originalEvent: event
+			});
 		}
@@ -87,3 +92,3 @@ }]);
 	return ClayCreationMenuDropdown;
-}(_metalComponent2.default);
+}(_clayComponent2.default);
 
@@ -90,0 +95,0 @@ /**

lib/ClayDropdown.js

@@ -14,5 +14,5 @@ 'use strict';
 
-var _metalComponent = require('metal-component');
+var _clayComponent = require('clay-component');
 
-var _metalComponent2 = _interopRequireDefault(_metalComponent);
+var _clayComponent2 = _interopRequireDefault(_clayComponent);
 
@@ -47,6 +47,6 @@ var _metalWebComponent = require('metal-web-component');
  * Implementation for Metal Clay Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-var ClayDropdown = function (_Component) {
-	_inherits(ClayDropdown, _Component);
+var ClayDropdown = function (_ClayComponent) {
+	_inherits(ClayDropdown, _ClayComponent);
 
@@ -73,4 +73,5 @@ function ClayDropdown() {
    * 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.
    */
@@ -80,4 +81,8 @@
 		key: '_handleItemClick',
-		value: function _handleItemClick(item) {
-			this.emit('itemClicked', item);
+		value: function _handleItemClick(event) {
+			return !this.emit({
+				data: event.data,
+				name: 'itemClicked',
+				originalEvent: event
+			});
 		}
@@ -87,3 +92,3 @@ }]);
 	return ClayDropdown;
-}(_metalComponent2.default);
+}(_clayComponent2.default);
 
@@ -90,0 +95,0 @@ /**

lib/ClayDropdownBase.js

@@ -22,5 +22,5 @@ 'use strict';
 
-var _metalComponent = require('metal-component');
+var _clayComponent = require('clay-component');
 
-var _metalComponent2 = _interopRequireDefault(_metalComponent);
+var _clayComponent2 = _interopRequireDefault(_clayComponent);
 
@@ -59,6 +59,6 @@ var _metalSoy = require('metal-soy');
  * Implementation of the base for Metal Clay Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-var ClayDropdownBase = function (_Component) {
-	_inherits(ClayDropdownBase, _Component);
+var ClayDropdownBase = function (_ClayComponent) {
+	_inherits(ClayDropdownBase, _ClayComponent);
 
@@ -170,2 +170,3 @@ function ClayDropdownBase() {
    * @protected
+   * @return {Boolean} If the event has been prevented or not.
    */
@@ -178,5 +179,16 @@
 			var elementIndex = this._getDropdownItemIndex(element);
-			var item = this.items[elementIndex];
+			var flatenItems = this.items.map(function (item) {
+				return item.items || item;
+			}).reduce(function (acc, cur) {
+				return acc.concat(cur);
+			}, []);
+			var item = flatenItems[elementIndex];
 
-			this.emit('itemClicked', item);
+			return !this.emit({
+				data: {
+					item: item
+				},
+				name: 'itemClicked',
+				originalEvent: event
+			});
 		}
@@ -206,2 +218,3 @@
    * @protected
+   * @return {Boolean} If the event has been prevented or not.
    */
@@ -234,5 +247,9 @@
 
-			this.emit('itemsFiltered', {
-				originalItems: this._originalItems,
-				filteredItems: this.items
+			return !this.emit({
+				data: {
+					filteredItems: this.items,
+					originalItems: this._originalItems
+				},
+				name: 'itemsFiltered',
+				originalEvent: event
 			});
@@ -257,3 +274,3 @@ }
 	return ClayDropdownBase;
-}(_metalComponent2.default);
+}(_clayComponent2.default);
 
@@ -260,0 +277,0 @@ /**

package.json

 {
   "name": "clay-dropdown",
-  "version": "2.0.0-rc.12",
+  "version": "2.0.0",
   "description": "Clay Dropdown Component",
@@ -30,10 +30,10 @@ "license": "BSD",
   "dependencies": {
-    "clay-button": "^2.0.0-rc.12",
-    "clay-checkbox": "^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",
+    "clay-button": "^2.0.0",
+    "clay-checkbox": "^2.0.0",
+    "clay-component": "^2.0.0",
+    "clay-icon": "^2.0.0",
+    "clay-link": "^2.0.0",
+    "clay-portal": "^2.0.0",
+    "clay-radio": "^2.0.0",
     "metal": "^2.16.0",
-    "metal-component": "^2.16.0",
     "metal-dom": "^2.16.0",
@@ -52,4 +52,4 @@ "metal-events": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay-components": "^2.0.0-rc.12",
-    "clay-css": "^2.0.0-rc.12",
+    "browserslist-config-clay-components": "^2.0.0",
+    "clay-css": "^2.0.0",
     "metal-dom": "^2.13.2",
@@ -56,0 +56,0 @@ "metal-tools-soy": "^6.0.0",

src/ClayActionsDropdown.js

 import 'clay-icon';
 import './ClayDropdownBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
@@ -13,5 +13,5 @@ import Soy from 'metal-soy';
  * Implementation for Metal Clay Action Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayActionsDropdown extends Component {
+class ClayActionsDropdown extends ClayComponent {
 	/**
@@ -28,7 +28,12 @@ * Handles footer button click.
 	 * 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,
+		});
 	}
@@ -35,0 +40,0 @@ }

src/ClayCreationMenuDropdown.js

 import 'clay-icon';
 import './ClayDropdownBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
@@ -13,5 +13,5 @@ import Soy from 'metal-soy';
  * Implementation for Metal Clay Action Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayCreationMenuDropdown extends Component {
+class ClayCreationMenuDropdown extends ClayComponent {
 	/**
@@ -28,7 +28,12 @@ * Handles footer button click.
 	 * 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,
+		});
 	}
@@ -35,0 +40,0 @@ }

src/ClayDropdown.js

 import 'clay-icon';
 import './ClayDropdownBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
@@ -13,5 +13,5 @@ import Soy from 'metal-soy';
  * Implementation for Metal Clay Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayDropdown extends Component {
+class ClayDropdown extends ClayComponent {
 	/**
@@ -28,7 +28,12 @@ * Handles footer button click.
 	 * 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,
+		});
 	}
@@ -35,0 +40,0 @@ }

src/ClayDropdownBase.js

@@ -7,3 +7,3 @@ import 'clay-button';
 import 'clay-radio';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import Soy from 'metal-soy';
@@ -20,5 +20,5 @@ import dom from 'metal-dom';
  * Implementation of the base for Metal Clay Dropdown.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayDropdownBase extends Component {
+class ClayDropdownBase extends ClayComponent {
 	/**
@@ -110,9 +110,19 @@ * @inheritDoc
 	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
 	 */
 	_handleItemClick(event) {
-		let element = event.delegateTarget;
-		let elementIndex = this._getDropdownItemIndex(element);
-		let item = this.items[elementIndex];
+		const element = event.delegateTarget;
+		const elementIndex = this._getDropdownItemIndex(element);
+		const flatenItems = this.items
+			.map(item => item.items || item)
+			.reduce((acc, cur) => acc.concat(cur), []);
+		const item = flatenItems[elementIndex];
 
-		this.emit('itemClicked', item);
+		return !this.emit({
+			data: {
+				item: item,
+			},
+			name: 'itemClicked',
+			originalEvent: event,
+		});
 	}
@@ -145,2 +155,3 @@
 	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
 	 */
@@ -183,5 +194,9 @@ _handleSearch(event) {
 
-		this.emit('itemsFiltered', {
-			originalItems: this._originalItems,
-			filteredItems: this.items,
+		return !this.emit({
+			data: {
+				filteredItems: this.items,
+				originalItems: this._originalItems,
+			},
+			name: 'itemsFiltered',
+			originalEvent: event,
 		});
@@ -188,0 +203,0 @@ }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

646602

0.5%

Lines of code

6037

1.04%

Number of low quality alerts

1

-50%

Dependency changes

• + Added

  clay-component@^2.0.0

• - Removed

  metal-component@^2.16.0

• Updated

  clay-button@^2.0.0

• Updated

  clay-checkbox@^2.0.0

• Updated

  clay-icon@^2.0.0

• Updated

  clay-link@^2.0.0

• Updated

  clay-portal@^2.0.0

• Updated

  clay-radio@^2.0.0