diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js index 121ce463f..0c54e4090 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.js @@ -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 @@ -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 @@ -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 @@ -131,6 +157,15 @@ ClayManagementToolbar.STATE = { */ id: Config.string(), + /** + * URL of the search form action + * @instance + * @memberof ClayManagementToolbar + * @type {?string|undefined} + * @default undefined + */ + searchActionURL: Config.string(), + /** * Flag to indicate if the managment toolbar will control the selection of * elements. @@ -150,6 +185,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 diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy index 80e675e8a..e39e0f261 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy @@ -24,14 +24,20 @@ 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? id: string} + {@param? searchActionURL: string} {@param? selectable: bool} {@param? selectedItems: number} + {@param? showMobileSearch_: bool} + {@param? showSearch: bool} {@param? sortingOrder: string} {@param? totalItems: number} {@param? viewTypes: list<[ @@ -57,12 +63,18 @@ {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 id: $id /} + {param searchActionURL: $searchActionURL /} {param selectable: $selectable /} + {param showMobileSearch_: $showMobileSearch_ /} + {param showSearch: $showSearch /} {param sortingOrder: $sortingOrder /} {param spritemap: $spritemap /} {param viewTypes: $viewTypes /} @@ -162,12 +174,18 @@ 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? id: string} + {@param? searchActionURL: string} {@param? selectable: bool} + {@param? showMobileSearch_: bool} + {@param? showSearch: bool} {@param? sortingOrder: string} {@param? viewTypes: list<[ active: bool, @@ -240,7 +258,68 @@ + {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)} +
+
+ {let $searchFormAttributes kind="attributes"} + {if $searchActionURL} + action="{$searchActionURL}" + {/if} + + role="search" + {/let} + +
+
+
+ +
+ + + {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} + +
+
+
+
+ {/if} + +
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ +
+ + + + +
+
+
+
+ + + +`; + exports[`ClayManagementToolbar should render a management toolbar with selection enabled 1`] = ` `; +exports[`ClayManagementToolbar should render a management toolbar without search 1`] = ` + +`; + exports[`ClayManagementToolbar should render the default markup 1`] = `