From 63067040cdf6998266a243dfe62c90aef6b2b569 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 22 Feb 2018 17:04:30 +0100 Subject: [PATCH 1/7] Extract items to a regular template and make a deltemplate for dropdown content | Fixes #609 --- .../clay-dropdown/src/ClayDropdownBase.soy | 133 ++++++++++-------- 1 file changed, 77 insertions(+), 56 deletions(-) diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy index b8f527547a..336f832bac 100644 --- a/packages/clay-dropdown/src/ClayDropdownBase.soy +++ b/packages/clay-dropdown/src/ClayDropdownBase.soy @@ -69,6 +69,45 @@ {/template} +/** + * Renders a list of items + */ +{template .items} + {@param items: list} + {@param? _handleItemClick: any} + {@param? contentRenderer: string} + {@param? itemsIconAlignment: string} + {@param? spritemap: string} + + {foreach $item in $items} + {let $variant kind="text"} + {if isNonnull($contentRenderer) and $contentRenderer != ''} + {$contentRenderer} + {elseif $item.type} + {$item.type} + {else} + item + {/if} + {/let} + + {delcall ClayDropdownBase.Item variant="$variant"} + {param _handleItemClick: $_handleItemClick /} + {param active: $item.active /} + {param checked: $item.checked /} + {param disabled: $item.disabled /} + {param href: $item.href /} + {param icon: $item.icon /} + {param inputName: $item.inputName /} + {param inputValue: $item.inputValue /} + {param items: $item.items /} + {param itemsIconAlignment: $itemsIconAlignment /} + {param label: $item.label ? '' + $item.label : '' /} + {param separator: $item.separator /} + {param spritemap: $spritemap /} + {/delcall} + {/foreach} +{/template} + /** * Renders a search input */ @@ -113,22 +152,22 @@ {@param? searchable: bool} {@param? spritemap: string} - {let $listAttributes kind="attributes"} - class="dropdown-menu - {if $itemsIconAlignment == 'left'} - {sp}dropdown-menu-indicator-start - {elseif $itemsIconAlignment == 'right'} - {sp}dropdown-menu-indicator-end - {/if} + {let $dropdownMenu kind="html"} + {let $listAttributes kind="attributes"} + class="dropdown-menu + {if $itemsIconAlignment == 'left'} + {sp}dropdown-menu-indicator-start + {elseif $itemsIconAlignment == 'right'} + {sp}dropdown-menu-indicator-end + {/if} - {if $expanded} - {sp}show - {/if} - " - ref="menu" - {/let} + {if $expanded} + {sp}show + {/if} + " + ref="menu" + {/let} - {let $dropdownMenu kind="html"}
{if $helpText}
+
+
+

With Advanced Search

+
+
+
+

Without Search

@@ -187,6 +194,15 @@

With search results bar with active state

}, '#only-search-block'); + //With Advanced Search + new metal.ClayManagementToolbar({ + searchFormName: 'mySearchName', + searchInputName: 'mySearchInputName', + showAdvancedSearch: true, + spritemap: spritemap, + }, + '#advanced-search-block'); + //Without Search new metal.ClayManagementToolbar({ creationMenu: '#creationPageURL', diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html index bf24748142..e45783c627 100644 --- a/packages/clay-management-toolbar/demos/index.html +++ b/packages/clay-management-toolbar/demos/index.html @@ -52,6 +52,13 @@

With Only Search

+
+
+

With Advanced Search

+
+
+
+

Without Search

@@ -260,6 +267,15 @@

With search results bar with active state

}, '#only-search-block'); + //With Advanced Search + new metal.ClayManagementToolbar({ + searchFormName: 'mySearchName', + searchInputName: 'mySearchInputName', + showAdvancedSearch: true, + spritemap: spritemap, + }, + '#advanced-search-block'); + //Without Search new metal.ClayManagementToolbar({ creationMenu: '#creationPageURL', From c0ed0c774030757b3e9172c1ca385eee0b26c89d Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 22 Feb 2018 17:16:29 +0100 Subject: [PATCH 5/7] =?UTF-8?q?SF=20|=C2=A0Fixes=20#609?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../clay-dropdown/src/ClayDropdownBase.soy | 44 ++++----- .../src/ClayManagementToolbar.soy | 92 +++++++++---------- 2 files changed, 68 insertions(+), 68 deletions(-) diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy index 336f832bac..1dce71da47 100644 --- a/packages/clay-dropdown/src/ClayDropdownBase.soy +++ b/packages/clay-dropdown/src/ClayDropdownBase.soy @@ -284,6 +284,28 @@ {/template} +/** + * Renders the dropdown menu content + */ +{deltemplate ClayDropdownBase.Content} + {@param? _handleItemClick: any} + {@param? contentRenderer: string} + {@param? items: list} + {@param? itemsIconAlignment: string} + {@param? spritemap: string} + + {if $items} +
    + {call .items} + {param _handleItemClick: $_handleItemClick /} + {param items: $items /} + {param itemsIconAlignment: $itemsIconAlignment /} + {param spritemap: $spritemap /} + {/call} +
+ {/if} +{/deltemplate} + /** * Renders list item */ @@ -537,26 +559,4 @@ {if $separator} {/if} -{/deltemplate} - -/** - * Renders the dropdown menu content - */ -{deltemplate ClayDropdownBase.Content} - {@param? _handleItemClick: any} - {@param? contentRenderer: string} - {@param? items: list} - {@param? itemsIconAlignment: string} - {@param? spritemap: string} - - {if $items} -
    - {call .items} - {param _handleItemClick: $_handleItemClick /} - {param items: $items /} - {param itemsIconAlignment: $itemsIconAlignment /} - {param spritemap: $spritemap /} - {/call} -
- {/if} {/deltemplate} \ No newline at end of file diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy index c906df0bdf..6aeca4421c 100644 --- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy +++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy @@ -249,6 +249,52 @@ {/template} +/** + * This renders the creation menu. + */ +{template .creationMenu} + {@param creationMenu: ?} + {@param spritemap: string} + {@param? _handleCreationButtonClicked: any} + + {if $creationMenu.items} + {call ClayDropdownBase.render} + {param button: $creationMenu.button /} + {param caption: $creationMenu.caption /} + {param helpText: $creationMenu.helpText /} + {param items: $creationMenu.items /} + {param label kind="html"} + {call ClayIcon.render} + {param spritemap: $spritemap /} + {param symbol: 'plus' /} + {/call} + {/param} + + {param ref: 'creationMenuDropdown' /} + {param spritemap: $spritemap /} + {param style: 'primary' /} + {param triggerClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /} + {/call} + {elseif $creationMenu == true} + {call ClayButton.render} + {param elementClasses: 'nav-btn nav-btn-monospaced' /} + {param events: ['click': $_handleCreationButtonClicked ] /} + {param icon: 'plus' /} + {param ref: 'creationMenu' /} + {param spritemap: $spritemap /} + {/call} + {else} + {call ClayLink.render} + {param ariaLabel: 'add' /} + {param buttonStyle: 'primary' /} + {param elementClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /} + {param href: $creationMenu /} + {param icon: 'plus' /} + {param spritemap: $spritemap /} + {/call} + {/if} +{/template} + /** * This renders the component's active content. */ @@ -489,52 +535,6 @@ {/template} -/** - * This renders the creation menu. - */ -{template .creationMenu} - {@param creationMenu: ?} - {@param spritemap: string} - {@param? _handleCreationButtonClicked: any} - - {if $creationMenu.items} - {call ClayDropdownBase.render} - {param button: $creationMenu.button /} - {param caption: $creationMenu.caption /} - {param helpText: $creationMenu.helpText /} - {param items: $creationMenu.items /} - {param label kind="html"} - {call ClayIcon.render} - {param spritemap: $spritemap /} - {param symbol: 'plus' /} - {/call} - {/param} - - {param ref: 'creationMenuDropdown' /} - {param spritemap: $spritemap /} - {param style: 'primary' /} - {param triggerClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /} - {/call} - {elseif $creationMenu == true} - {call ClayButton.render} - {param elementClasses: 'nav-btn nav-btn-monospaced' /} - {param events: ['click': $_handleCreationButtonClicked ] /} - {param icon: 'plus' /} - {param ref: 'creationMenu' /} - {param spritemap: $spritemap /} - {/call} - {else} - {call ClayLink.render} - {param ariaLabel: 'add' /} - {param buttonStyle: 'primary' /} - {param elementClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /} - {param href: $creationMenu /} - {param icon: 'plus' /} - {param spritemap: $spritemap /} - {/call} - {/if} -{/template} - /** * This renders the search results bar. */ From 54c4ec10413ec78ef5e34cbb344ba71664fa6460 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 22 Feb 2018 17:20:01 +0100 Subject: [PATCH 6/7] Update ClayManagementToolbar tests | Fixes #609 --- .../src/__tests__/ClayManagementToolbar.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js index 993e8ecf49..9aa7a3ef4e 100644 --- a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js +++ b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js @@ -73,6 +73,15 @@ describe('ClayManagementToolbar', function() { expect(managementToolbar).toMatchSnapshot(); }); + it('should render a management toolbar with advanced search', () => { + managementToolbar = new ClayManagementToolbar({ + showAdvancedSearch: true, + spritemap: spritemap, + }); + + expect(managementToolbar).toMatchSnapshot(); + }); + it('should render a management toolbar with selection enabled', () => { managementToolbar = new ClayManagementToolbar({ selectable: true, From db21cdc97aeded30e506a0bcb691d66342c32254 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 22 Feb 2018 17:25:51 +0100 Subject: [PATCH 7/7] Regen snapshots | Fixes #609 --- .../ClayManagementToolbar.js.snap | 39 + .../__snapshots__/ClayPagination.js.snap | 1894 ++++++++--------- 2 files changed, 903 insertions(+), 1030 deletions(-) diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap index ba8b901514..c5ae6915eb 100644 --- a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap +++ b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap @@ -213,6 +213,45 @@ exports[`ClayManagementToolbar should render a management toolbar with actions i
`; +exports[`ClayManagementToolbar should render a management toolbar with advanced search 1`] = ` +
+ +
+
+
    +
    +`; + exports[`ClayManagementToolbar should render a management toolbar with ascending sorting 1`] = `