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

Commit

Permalink
Merge f48b2d8 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 + f48b2d8 commit 62d942e
Show file tree
Hide file tree
Showing 5 changed files with 845 additions and 2 deletions.
2 changes: 2 additions & 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,8 @@ <h1 class="page-title">
type: 'radiogroup',
}
],
searchFormName: 'mySearchName',
searchInputName: 'mySearchInputName',
selectable: true,
sortingOrder: 'desc',
spritemap: spritemap,
Expand Down
84 changes: 84 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.showSearch_ = 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.showSearch_ = 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 @@ -104,6 +130,15 @@ ClayManagementToolbar.STATE = {
*/
actionItems: actionItemsValidator,

/**
* Name of the content renderer to use template variants.
* @instance
* @memberof ClayManagementToolbar
* @type {?string|undefined}
* @default undefined
*/
contentRenderer: Config.string(),

/**
* CSS classes to be applied to the element.
* @instance
Expand All @@ -122,6 +157,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 +176,33 @@ 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 form.
* @instance
* @memberof ClayManagementToolbar
* @type {?string|undefined}
* @default undefined
*/
searchFormName: 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 +222,18 @@ ClayManagementToolbar.STATE = {
*/
selectedItems: Config.number(),

/**
* Flag to indicate if search should be shown in or not. This is for the
* hide/show interaction in small devices.
* @instance
* @memberof ClayManagementToolbar
* @type {?bool}
* @default false
*/
showSearch_: Config.bool()
.internal()
.value(false),

/**
* Sorting order.
* @instance
Expand Down
110 changes: 108 additions & 2 deletions packages/clay-management-toolbar/src/ClayManagementToolbar.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
separator: bool,
type: string
]>}
{@param? contentRenderer: string}
{@param? elementClasses: string}
{@param? filterItems: list<[
checked: bool,
Expand All @@ -24,14 +25,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? searchFormName: string}
{@param? searchInputName: string}
{@param? selectable: bool}
{@param? selectedItems: number}
{@param? showSearch_: bool}
{@param? sortingOrder: string}
{@param? totalItems: number}
{@param? viewTypes: list<[
Expand All @@ -55,14 +64,23 @@
{/call}
{else}
{call .default}
{param contentRenderer: $contentRenderer /}
{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 searchFormName: $searchFormName /}
{param searchInputName: $searchInputName /}
{param selectable: $selectable /}
{param showSearch_: $showSearch_ /}
{param sortingOrder: $sortingOrder /}
{param spritemap: $spritemap /}
{param viewTypes: $viewTypes /}
Expand Down Expand Up @@ -152,6 +170,7 @@
*/
{template .default}
{@param spritemap: string}
{@param? contentRenderer: string}
{@param? elementClasses: string}
{@param? filterItems: list<[
checked: bool,
Expand All @@ -162,12 +181,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? searchFormName: string}
{@param? searchInputName: string}
{@param? selectable: bool}
{@param? showSearch_: bool}
{@param? sortingOrder: string}
{@param? viewTypes: list<[
active: bool,
Expand Down Expand Up @@ -205,7 +232,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 +267,37 @@
</li>
</ul>

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

<div class="{$searchClasses}">
<div class="container">
{delcall ClayManagementToolbar.SearchForm variant="$contentRenderer"}
{param handleCloseMobileSearchClick_: $handleCloseMobileSearchClick_ /}
{param handleSearchSearchClick_: $handleSearchSearchClick_ /}
{param searchActionURL: $searchActionURL /}
{param searchFormName: $searchFormName /}
{param searchInputName: $searchInputName /}
{param spritemap: $spritemap /}
{/delcall}
</div>
</div>

<ul class="navbar-nav">
<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 $viewTypes}
<li class="dropdown nav-item">
{call ClayDropdown.render}
Expand Down Expand Up @@ -271,4 +328,53 @@
</ul>
</div>
</nav>
{/template}
{/template}

{deltemplate ClayManagementToolbar.SearchForm}
{@param spritemap: string}
{@param? handleCloseMobileSearchClick_: any}
{@param? handleSearchSearchClick_: any}
{@param? searchActionURL: string}
{@param? searchFormName: string}
{@param? searchInputName: string}

{let $searchFormAttributes kind="attributes"}
{if $searchActionURL}
action="{$searchActionURL}"
{/if}

{if $searchFormName}
name="{$searchFormName}"
{/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>
{/deltemplate}
Loading

0 comments on commit 62d942e

Please sign in to comment.