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

Commit

Permalink
Merge 3cbff0b into 7c17611
Browse files Browse the repository at this point in the history
  • Loading branch information
@carloslancha
carloslancha committed Dec 28, 2017
2 parents 7c17611 + 3cbff0b commit 56feb49
Show file tree
Hide file tree
Showing 5 changed files with 779 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/clay-management-toolbar/demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ <h1 class="page-title">
type: 'radiogroup',
}
],
searchInputName: 'mySearchName',
selectable: true,
sortingOrder: 'desc',
spritemap: spritemap,
Expand Down
74 changes: 74 additions & 0 deletions packages/clay-management-toolbar/src/ClayManagementToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,14 @@ actionItemShape.items = actionItemsValidator;
* Metal ClayManagementToolbar component.
*/
class ClayManagementToolbar extends Component {
/**
* Hides the search in mobile devices
* @private
*/
handleCloseMobileSearchClick_() {
this.showMobileSearch_ = false;
}

/**
* Continues the propagation of the checkbox changed event
* @param {!Event} event
Expand All @@ -51,6 +59,14 @@ class ClayManagementToolbar extends Component {
this.emit('filterDoneClicked', event);
}

/**
* Shows the search in mobile devices
* @private
*/
handleOpenMobileSearchClick_() {
this.showMobileSearch_ = true;
}

/**
* Continues the propagation of the plus button clicked event
* @param {!Event} event
Expand All @@ -60,6 +76,16 @@ class ClayManagementToolbar extends Component {
this.emit('plusButtonClicked', event);
}

/**
* Continues the propagation of the search button clicked event
* @param {!Event} event
* @return {Boolean} If the event has been prevented or not.
* @private
*/
handleSearchSearchClick_(event) {
return !this.emit('search', event);
}

/**
* Continues the propagation of the select all button clicked event
* @param {!Event} event
Expand Down Expand Up @@ -122,6 +148,16 @@ ClayManagementToolbar.STATE = {
*/
filterItems: filterItemsValidator,

/**
* Flag to indicate if the `Done` button in filter dropdown should be hide or
* not.
* @instance
* @memberof ClayManagementToolbar
* @type {?bool}
* @default false
*/
hideFiltersDoneButton: Config.bool().value(false),

/**
* Id to be applied to the element.
* @instance
Expand All @@ -131,6 +167,24 @@ ClayManagementToolbar.STATE = {
*/
id: Config.string(),

/**
* URL of the search form action
* @instance
* @memberof ClayManagementToolbar
* @type {?string|undefined}
* @default undefined
*/
searchActionURL: Config.string(),

/**
* Name of the search input.
* @instance
* @memberof ClayManagementToolbar
* @type {?string|undefined}
* @default undefined
*/
searchInputName: Config.string(),

/**
* Flag to indicate if the managment toolbar will control the selection of
* elements.
Expand All @@ -150,6 +204,26 @@ ClayManagementToolbar.STATE = {
*/
selectedItems: Config.number(),

/**
* Flag to indicate if search should be shown in mobile or not.
* @instance
* @memberof ClayManagementToolbar
* @type {?bool}
* @default false
*/
showMobileSearch_: Config.bool()
.internal()
.value(false),

/**
* Flag to indicate if search should be shown or not.
* @instance
* @memberof ClayManagementToolbar
* @type {?bool}
* @default true
*/
showSearch: Config.bool().value(true),

/**
* Sorting order.
* @instance
Expand Down
87 changes: 86 additions & 1 deletion packages/clay-management-toolbar/src/ClayManagementToolbar.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,22 @@
separator: bool,
type: string
]>}
{@param? handleCloseMobileSearchClick_: any}
{@param? handleFilterDoneButtonClick_: any}
{@param? handleOpenMobileSearchClick_: any}
{@param? handlePlusButtonClicked_: any}
{@param? handleSearchSearchClick_: any}
{@param? handleSelectAllClicked_: any}
{@param? handleSelectPageCheckboxChanged_: any}
{@param? handleSortingButtonClicked_: any}
{@param? hideFiltersDoneButton: bool}
{@param? id: string}
{@param? searchActionURL: string}
{@param? searchInputName: string}
{@param? selectable: bool}
{@param? selectedItems: number}
{@param? showMobileSearch_: bool}
{@param? showSearch: bool}
{@param? sortingOrder: string}
{@param? totalItems: number}
{@param? viewTypes: list<[
Expand All @@ -57,12 +65,20 @@
{call .default}
{param elementClasses: $elementClasses /}
{param filterItems: $filterItems /}
{param handleCloseMobileSearchClick_: $handleCloseMobileSearchClick_ /}
{param handleFilterDoneButtonClick_: $handleFilterDoneButtonClick_ /}
{param handleOpenMobileSearchClick_: $handleOpenMobileSearchClick_ /}
{param handlePlusButtonClicked_: $handlePlusButtonClicked_ /}
{param handleSearchSearchClick_: $handleSearchSearchClick_ /}
{param handleSelectPageCheckboxChanged_: $handleSelectPageCheckboxChanged_ /}
{param handleSortingButtonClicked_: $handleSortingButtonClicked_ /}
{param hideFiltersDoneButton: $hideFiltersDoneButton /}
{param id: $id /}
{param searchActionURL: $searchActionURL /}
{param searchInputName: $searchInputName /}
{param selectable: $selectable /}
{param showMobileSearch_: $showMobileSearch_ /}
{param showSearch: $showSearch /}
{param sortingOrder: $sortingOrder /}
{param spritemap: $spritemap /}
{param viewTypes: $viewTypes /}
Expand Down Expand Up @@ -162,12 +178,20 @@
separator: bool,
type: string
]>}
{@param? handleCloseMobileSearchClick_: any}
{@param? handleFilterDoneButtonClick_: any}
{@param? handleOpenMobileSearchClick_: any}
{@param? handlePlusButtonClicked_: any}
{@param? handleSearchSearchClick_: any}
{@param? handleSelectPageCheckboxChanged_: any}
{@param? handleSortingButtonClicked_: any}
{@param? hideFiltersDoneButton: bool}
{@param? id: string}
{@param? searchActionURL: string}
{@param? searchInputName: string}
{@param? selectable: bool}
{@param? showMobileSearch_: bool}
{@param? showSearch: bool}
{@param? sortingOrder: string}
{@param? viewTypes: list<[
active: bool,
Expand Down Expand Up @@ -205,7 +229,7 @@
{if $filterItems}
<li class="dropdown nav-item">
{call ClayDropdown.render}
{param button: [
{param button: $hideFiltersDoneButton ? null : [
'label': 'Done'
] /}
{param events: ['buttonClicked': $handleFilterDoneButtonClick_] /}
Expand Down Expand Up @@ -240,7 +264,68 @@
</li>
</ul>

{let $searchClasses kind="text"}
navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down
{if $showMobileSearch_}
{sp}show
{/if}
{/let}

{if $showSearch or (isNonnull($showSearch) and $showSearch != false)}
<div class="{$searchClasses}">
<div class="container">
{let $searchFormAttributes kind="attributes"}
{if $searchActionURL}
action="{$searchActionURL}"
{/if}

role="search"
{/let}

<form {$searchFormAttributes}>
<div class="input-group input-group-inset">
<div class="input-group-input">
<input class="form-control" name="{$searchInputName}" placeholder="Search for..." ref="search" type="text" />
</div>

<span class="input-group-inset-item">
{call ClayButton.render}
{param elementClasses: 'navbar-breakpoint-d-none' /}
{param events: ['click': $handleCloseMobileSearchClick_] /}
{param icon: 'times' /}
{param spritemap: $spritemap /}
{param style: 'unstyled' /}
{/call}

{call ClayButton.render}
{param elementClasses: 'navbar-breakpoint-d-block' /}
{param events: ['click': $handleSearchSearchClick_] /}
{param icon: 'search' /}
{param ref: 'searchButton' /}
{param spritemap: $spritemap /}
{param style: 'unstyled' /}
{param type: 'submit' /}
{/call}
</span>
</div>
</form>
</div>
</div>
{/if}

<ul class="navbar-nav">
{if $showSearch or (isNonnull($showSearch) and $showSearch != false)}
<li class="nav-item navbar-breakpoint-d-none">
{call ClayButton.render}
{param elementClasses: 'nav-link nav-link-monospaced' /}
{param events: ['click': $handleOpenMobileSearchClick_] /}
{param icon: 'search' /}
{param spritemap: $spritemap /}
{param style: 'unstyled' /}
{/call}
</li>
{/if}

{if $viewTypes}
<li class="dropdown nav-item">
{call ClayDropdown.render}
Expand Down
61 changes: 61 additions & 0 deletions packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,33 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar without search', () => {
managementToolbar = new ClayManagementToolbar({
showSearch: false,
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with search action url', () => {
managementToolbar = new ClayManagementToolbar({
searchActionURL: 'mySearchURL',
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with search input name', () => {
managementToolbar = new ClayManagementToolbar({
searchInputName: 'mySearchName',
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with selection enabled', () => {
managementToolbar = new ClayManagementToolbar({
selectable: true,
Expand Down Expand Up @@ -137,6 +164,27 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with filters dropdown with items and no done button', () => {
managementToolbar = new ClayManagementToolbar({
filterItems: [
{
href: '#myItem1',
label: 'Item 1',
type: 'item',
},
{
href: '#myItem2',
label: 'Item 2',
type: 'item',
},
],
hideFiltersDoneButton: true,
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with view types', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
Expand Down Expand Up @@ -338,4 +386,17 @@ describe('ClayManagementToolbar', function() {
expect.any(Object)
);
});

it('should render a management toolbar and emit an on search', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
});

const spy = jest.spyOn(managementToolbar, 'emit');

managementToolbar.refs.searchButton.element.click();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('search', expect.any(Object));
});
});
Loading

0 comments on commit 56feb49

Please sign in to comment.