Skip to content
This repository has been archived by the owner on Jan 16, 2018. It is now read-only.

Commit

Permalink
Merge db95788 into d628b9c
Browse files Browse the repository at this point in the history
  • Loading branch information
@carloslancha
carloslancha authored Nov 29, 2017
2 parents d628b9c + db95788 commit eeae864
Show file tree
Hide file tree
Showing 18 changed files with 461 additions and 140 deletions.
22 changes: 11 additions & 11 deletions packages/clay-dropdown/demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,31 +360,31 @@ <h4>Actions Dropdown with events in items</h4>
**/
new metal.ClayDropdown(
{
indicatorsPosition: 'left',
items: [
{
label: 'Item 1',
indicatorSymbol: 'check',
icon: 'check',
url: '#1',
},
{
active: true,
label: 'Item 2',
indicatorSymbol: 'check',
icon: 'check',
url: '#2',
},
{
disabled: true,
label: 'Item 3',
indicatorSymbol: 'check',
icon: 'check',
url: '#3',
},
{
label: 'Item 4',
indicatorSymbol: 'check',
icon: 'check',
url: '#4',
},
],
itemsIconAlignment: 'left',
spritemap: spritemap,
label: 'Trigger Label',
},
Expand All @@ -396,33 +396,33 @@ <h4>Actions Dropdown with events in items</h4>
**/
new metal.ClayDropdown(
{
indicatorsPosition: 'right',
items: [
{
label: 'Item 1',
indicatorSymbol: 'check',
icon: 'check',
url: '#1',
},
{
active: true,
label: 'Item 2',
indicatorSymbol: 'check',
icon: 'check',
url: '#2',
},
{
disabled: true,
label: 'Item 3',
indicatorSymbol: 'check',
icon: 'check',
url: '#3',
},
{
label: 'Item 4',
indicatorSymbol: 'check',
icon: 'check',
url: '#4',
},
],
spritemap: spritemap,
itemsIconAlignment: 'right',
label: 'Trigger Label',
spritemap: spritemap,
},
'#right-icons-block'
);
Expand Down
21 changes: 19 additions & 2 deletions packages/clay-dropdown/src/ClayActionsDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,16 @@ import templates from './ClayActionsDropdown.soy.js';
/**
* Implementation for Metal Clay Action Dropdown.
*/
class ClayActionsDropdown extends Component {}
class ClayActionsDropdown extends Component {
/**
* Handles footer button click.
* @param {!Event} event
* @protected
*/
handleButtonClick_(event) {
this.emit('buttonClicked', event);
}
}

/**
* State definition.
Expand All @@ -27,7 +36,6 @@ ClayActionsDropdown.STATE = {
* @default undefined
*/
button: Config.shapeOf({
events: Config.object(),
label: Config.string().required(),
style: Config.oneOf(['primary', 'secondary']).value('primary'),
type: Config.oneOf(['button', 'reset', 'submit']),
Expand Down Expand Up @@ -87,6 +95,15 @@ ClayActionsDropdown.STATE = {
*/
items: itemsValidator.required(),

/**
* Position in which item icon will be placed. Needed if any item has icons.
* @instance
* @memberof ClayDropdown
* @type {?string|undefined}
* @default undefined
*/
itemsIconAlignment: Config.oneOf(['left', 'right']),

/**
* The path to the SVG spritemap file containing the icons.
* @instance
Expand Down
4 changes: 4 additions & 0 deletions packages/clay-dropdown/src/ClayActionsDropdown.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@
{@param? caption: string}
{@param? elementClasses: string}
{@param? expanded: bool}
{@param? handleButtonClick_: any}
{@param? helpText: string}
{@param? id: string}
{@param? itemsIconAlignment: string}

{let $dropdownElementClasses kind="text"}
dropdown-action
Expand All @@ -32,8 +34,10 @@
{param caption: $caption /}
{param elementClasses: $dropdownElementClasses /}
{param expanded: $expanded /}
{param events: ['buttonClicked': $handleButtonClick_] /}
{param helpText: $helpText /}
{param id: $id /}
{param itemsIconAlignment: $itemsIconAlignment /}
{param items: $items /}
{param ref: 'dropdown' /}
{param spritemap: $spritemap /}
Expand Down
25 changes: 16 additions & 9 deletions packages/clay-dropdown/src/ClayDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,16 @@ import templates from './ClayDropdown.soy.js';
/**
* Implementation for Metal Clay Dropdown.
*/
class ClayDropdown extends Component {}
class ClayDropdown extends Component {
/**
* Handles footer button click.
* @param {!Event} event
* @protected
*/
handleButtonClick_(event) {
this.emit('buttonClicked', event);
}
}

/**
* State definition.
Expand All @@ -27,7 +36,6 @@ ClayDropdown.STATE = {
* @default undefined
*/
button: Config.shapeOf({
events: Config.object(),
label: Config.string().required(),
style: Config.oneOf(['primary', 'secondary']),
type: Config.oneOf(['button', 'reset', 'submit']),
Expand Down Expand Up @@ -70,23 +78,22 @@ ClayDropdown.STATE = {
icon: Config.string(),

/**
* Position in which item indicator symbols will be placed. Needed if any
* item has indicators.
* List of menu items.
* @instance
* @memberof ClayDropdown
* @type {?string|undefined}
* @type {!Array}
* @default undefined
*/
indicatorsPosition: Config.oneOf(['left', 'right']),
items: itemsValidator.required(),

/**
* List of menu items.
* Position in which item icon will be placed. Needed if any item has icons.
* @instance
* @memberof ClayDropdown
* @type {!Array}
* @type {?string|undefined}
* @default undefined
*/
items: itemsValidator.required(),
itemsIconAlignment: Config.oneOf(['left', 'right']),

/**
* Label of the trigger button.
Expand Down
6 changes: 4 additions & 2 deletions packages/clay-dropdown/src/ClayDropdown.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
{@param? button: ?}
{@param? elementClasses: string}
{@param? expanded: bool}
{@param? handleButtonClick_: any}
{@param? icon: string}
{@param? id: string}
{@param? indicatorsPosition: string}
{@param? itemsIconAlignment: string}
{@param? label: html|string}
{@param? searchable: bool}
{@param? style: string}
Expand Down Expand Up @@ -42,9 +43,10 @@
{param button: $button /}
{param elementClasses: $elementClasses /}
{param expanded: $expanded /}
{param events: ['buttonClicked': $handleButtonClick_] /}
{param id: $id /}
{param indicatorsPosition: $indicatorsPosition /}
{param items: $items /}
{param itemsIconAlignment: $itemsIconAlignment /}
{param label: $trigger /}
{param ref: 'dropdown' /}
{param searchable: $searchable /}
Expand Down
39 changes: 26 additions & 13 deletions packages/clay-dropdown/src/ClayDropdownBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@ class ClayDropdownBase extends Component {
*/
created() {
this.eventHandler_ = new EventHandler();

this.eventHandler_.add(
dom.on(document, 'click', this.handleDocClick_.bind(this))
);
}

/**
* @inheritDoc
*/
disposed() {
this.eventHandler_.removeAllListeners();
}

/**
Expand All @@ -29,7 +40,6 @@ class ClayDropdownBase extends Component {
*/
close_() {
this.expanded = false;
this.eventHandler_.removeAllListeners();
}

/**
Expand All @@ -51,6 +61,15 @@ class ClayDropdownBase extends Component {
this.close_();
}

/**
* Handles footer button click.
* @param {!Event} event
* @protected
*/
handleButtonClick_(event) {
this.emit('buttonClicked', event);
}

/**
* Handles Search in Dropdown.
* @param {!Event} event
Expand Down Expand Up @@ -109,12 +128,8 @@ class ClayDropdownBase extends Component {
toggle() {
if (!this.expanded) {
this.expanded = true;
this.eventHandler_.add(
dom.on(document, 'click', this.handleDocClick_.bind(this))
);
} else {
this.expanded = false;
this.eventHandler_.removeAllListeners();
}
}
}
Expand Down Expand Up @@ -153,7 +168,6 @@ ClayDropdownBase.STATE = {
* @default undefined
*/
button: Config.shapeOf({
events: Config.object(),
label: Config.string().required(),
style: Config.oneOf(['primary', 'secondary']).value('primary'),
type: Config.oneOf(['button', 'reset', 'submit']).value('button'),
Expand Down Expand Up @@ -205,23 +219,22 @@ ClayDropdownBase.STATE = {
id: Config.string(),

/**
* Position in which item indicator symbols will be placed. Needed if any
* item has indicators.
* List of menu items.
* @instance
* @memberof ClayDropdownBase
* @type {?string|undefined}
* @type {!Array}
* @default undefined
*/
indicatorsPosition: Config.oneOf(['left', 'right']),
items: itemsValidator.required(),

/**
* List of menu items.
* Position in which item icons will be placed. Needed if any item has icons.
* @instance
* @memberof ClayDropdownBase
* @type {!Array}
* @type {?string|undefined}
* @default undefined
*/
items: itemsValidator.required(),
itemsIconAlignment: Config.oneOf(['left', 'right']),

/**
* Label of the trigger button.
Expand Down
Loading

0 comments on commit eeae864

Please sign in to comment.