Merge pull request #1181 from matuzalemsteles/issue-1178

Change the default value of actionItems to [] | Fixes #1178
liferay · Sep 18, 2018 · 54a7a1c · 54a7a1c
2 parents 97b1021 + 7551b99
commit 54a7a1c
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 15 deletions.
diff --git a/packages/clay-dataset-display/src/ClayDatasetDisplay.js b/packages/clay-dataset-display/src/ClayDatasetDisplay.js
@@ -334,7 +334,7 @@ ClayDatasetDisplay.STATE = {
 
 	/**
 	 * List of items to display in the management toolbar actions menu.
-	 * @default undefined
+	 * @default []
 	 * @instance
 	 * @memberof ClayDatasetDisplay
 	 * @type {?(array|undefined)}

diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -38,6 +38,13 @@ <h2>Active State</h2>
 		</div>
 	</div>
 
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>Active State with no actions</h2>
+			<div id="active-no-actions-block"></div>
+		</div>
+	</div>
+
 	<div class="row row-spacing">
 		<div class="col">
 			<h2>Disabled State</h2>
@@ -315,6 +322,17 @@ <h4>With filter labels</h4>
 		},
 		'#active-block');
 
+		// Active state no actions
+		new metal.ClayManagementToolbar({
+			actionItems: [],
+			selectable: true,
+			selectedItems: 5,
+			showInfoButton: true,
+			spritemap: spritemap,
+			totalItems: 10,
+		},
+		'#active-no-actions-block');
+
 		//Disabled State
 		new metal.ClayManagementToolbar({
 			creationMenu: {

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -224,7 +224,7 @@ ClayManagementToolbar.STATE = {
 
 	/**
 	 * List of items to display in the actions menu on active state.
-	 * @default undefined
+	 * @default []
 	 * @instance
 	 * @memberof ClayManagementToolbar
 	 * @type {?(array|undefined)}

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -133,7 +133,7 @@
 				{param _handleInfoButtonClicked: $_handleInfoButtonClicked /}
 				{param _handleQuickActionClicked: $_handleQuickActionClicked /}
 				{param _handleSelectPageCheckboxChanged: $_handleSelectPageCheckboxChanged /}
-				{param actionItems: $actionItems /}
+				{param actionItems: $actionItems ?: [] /}
 				{param selectedItems: $selectedItems /}
 				{param showInfoButton: $showInfoButton /}
 				{param spritemap: $spritemap /}
@@ -200,20 +200,12 @@
  * This renders the component's active content.
  */
 {template .active}
+	{@param actionItems: list<?>}
 	{@param spritemap: string}
 	{@param? _handleActionItemClicked: any}
 	{@param? _handleInfoButtonClicked: any}
 	{@param? _handleQuickActionClicked: any}
 	{@param? _handleSelectPageCheckboxChanged: any}
-	{@param? actionItems: list<[
-		disabled: bool,
-		href: string,
-		icon: string,
-		label: string,
-		quickAction: bool,
-		separator: bool,
-		type: string
-	]>}
 	{@param? selectedItems: number}
 	{@param? showInfoButton: bool}
 	{@param? totalItems: number}
@@ -251,7 +243,9 @@
 				</li>
 			</ul>
 
-			{if $actionItems or $showInfoButton}
+			{let $hasActionItems: length($actionItems) > 0 /}
+
+			{if $hasActionItems or $showInfoButton}
 				<ul class="navbar-nav">
 					{if $showInfoButton}
 						<li class="nav-item">
@@ -271,7 +265,7 @@
 						</li>
 					{/if}
 
-					{if $actionItems}
+					{if $hasActionItems}
 						{foreach $item in $actionItems}
 							{if $item.quickAction and $item.icon and $spritemap}
 								<li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="{index($item)}" data-onclick="{$_handleQuickActionClicked}">

diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
@@ -570,6 +570,18 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with no actions when actionsItems is empty in active state', () => {
+		managementToolbar = new ClayManagementToolbar({
+			actionItems: [],
+			selectable: true,
+			selectedItems: 1,
+			spritemap: spritemap,
+			totalItems: 10,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a management toolbar with actions as quick actions in active state', () => {
 		managementToolbar = new ClayManagementToolbar({
 			actionItems: [

diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
@@ -1783,6 +1783,32 @@ exports[`ClayManagementToolbar should render a management toolbar with links as
 </div>
 `;
 
+exports[`ClayManagementToolbar should render a management toolbar with no actions when actionsItems is empty in active state 1`] = `
+<div>
+  <nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap">
+    <div class="container-fluid container-fluid-max-xl">
+      <ul class="navbar-nav navbar-nav-expand">
+        <li class="nav-item">
+          <div class="custom-control custom-checkbox">
+            <label>
+              <input checked="" class="custom-control-input" ref="input" type="checkbox">
+              <span class="custom-control-label">
+                <span class="custom-control-label-text sr-only">select-items</span>
+              </span>
+            </label>
+          </div>
+        </li>
+        <li class="nav-item">
+          <span class="navbar-text">1-of-10
+            <span class="navbar-breakpoint-down-d-none">items-selected</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>
+`;
+
 exports[`ClayManagementToolbar should render a management toolbar with no search 1`] = `
 <div>
   <nav class="management-bar management-bar-light navbar navbar-expand-md">

diff --git a/packages/clay-management-toolbar/src/validators.js b/packages/clay-management-toolbar/src/validators.js
@@ -12,7 +12,9 @@ let actionItemShape = {
 	type: Config.oneOf(['group', 'item']).value('item'),
 };
 
-const actionItemsValidator = Config.arrayOf(Config.shapeOf(actionItemShape));
+const actionItemsValidator = Config.arrayOf(
+	Config.shapeOf(actionItemShape)
+).value([]);
 
 actionItemShape.items = actionItemsValidator;