Fixes liferay#1268 - Extract ClayDropdownItem to a component

bryceosterhaus · Nov 5, 2018 · ee2ff9c · ee2ff9c
1 parent ea8c79b
commit ee2ff9c
Show file tree

Hide file tree

Showing 5 changed files with 372 additions and 291 deletions.
diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js
@@ -1,9 +1,7 @@
 import 'clay-button';
-import 'clay-checkbox';
-import 'clay-icon';
 import 'clay-link';
 import 'clay-portal';
-import 'clay-radio';
+import './ClayDropdownItem';
 import ClayComponent from 'clay-component';
 import Soy from 'metal-soy';
 import dom from 'metal-dom';

diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy
@@ -95,10 +95,12 @@
 			{/if}
 		{/let}
 
-		{delcall ClayDropdownBase.Item variant="$variant"}
+		{call ClayDropdownItem.render}
 			{param _handleItemClick: $_handleItemClick /}
 			{param active: $item.active /}
 			{param checked: $item.checked /}
+			{param contentRenderer: $variant /}
+			{param data: $item.data /}
 			{param disabled: $item.disabled /}
 			{param href: $item.href /}
 			{param icon: $item.icon /}
@@ -111,7 +113,7 @@
 			{param separator: $item.separator /}
 			{param spritemap: $spritemap /}
 			{param title: $item.title /}
-		{/delcall}
+		{/call}
 	{/for}
 {/template}
 
@@ -329,290 +331,4 @@
 			{/call}
 		</ul>
 	{/if}
-{/deltemplate}
-
-/**
- * Renders list item
- */
-{deltemplate ClayDropdownBase.Item}
-	{@param label: string}
-	{@param? _handleItemClick: any}
-	{@param? active: bool}
-	{@param? checked: bool}
-	{@param? data: any}
-	{@param? disabled: bool}
-	{@param? href: string}
-	{@param? icon: string}
-	{@param? inputName: string}
-	{@param? inputValue: string}
-	{@param? items: list<?>}
-	{@param? itemsIconAlignment: string}
-	{@param? maxItems: int}
-	{@param? separator: bool}
-	{@param? spritemap: string}
-	{@param? title: string}
-
-	{let $itemContent kind="html"}
-		{let $elementClasses kind="text"}
-			dropdown-item
-			{if $active}
-				{sp}active
-			{/if}
-
-			{if $disabled}
-				{sp}disabled
-			{/if}
-		{/let}
-
-		{let $labelContent kind="html"}
-			{let $iconContent kind="html"}
-				{if $icon and $spritemap}
-					<span class="dropdown-item-indicator">
-						{call ClayIcon.render}
-							{param spritemap: $spritemap /}
-							{param symbol: $icon /}
-						{/call}
-					</span>
-				{/if}
-			{/let}
-
-			{if $icon and $itemsIconAlignment == 'left'}
-				{$iconContent}
-			{/if}
-
-			{$label}
-
-			{if $icon and $itemsIconAlignment == 'right'}
-				{$iconContent}
-			{/if}
-		{/let}
-
-		{if $href}
-			{call ClayLink.render}
-				{param data: $data /}
-				{param elementClasses: $elementClasses /}
-				{param href kind="text"}
-					{if $disabled}
-						javascript:;
-					{elseif $href}
-						{$href}
-					{/if}
-				{/param}
-
-				{param label: $labelContent /}
-				{param title: $title /}
-			{/call}
-		{else}
-			{call ClayButton.render}
-				{param ariaLabel: $label /}
-				{param data: $data /}
-				{param disabled: $disabled /}
-				{param elementClasses: $elementClasses /}
-				{param label: $labelContent /}
-				{param size: 'sm' /}
-				{param spritemap: $spritemap /}
-				{param style: 'link' /}
-			{/call}
-		{/if}
-	{/let}
-
-	{let $itemAttributes kind="attributes"}
-		data-onclick="{$_handleItemClick}"
-	{/let}
-
-	<li {$itemAttributes}>
-		{$itemContent}
-	</li>
-
-	{if $separator}
-		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
-	{/if}
-{/deltemplate}
-
-/**
- * Renders list item with checkbox
- */
-{deltemplate ClayDropdownBase.Item variant="'checkbox'"}
-	{@param label: string}
-	{@param? _handleItemClick: any}
-	{@param? active: bool}
-	{@param? checked: bool}
-	{@param? disabled: bool}
-	{@param? href: string}
-	{@param? icon: string}
-	{@param? inputName: string}
-	{@param? inputValue: string}
-	{@param? items: list<?>}
-	{@param? itemsIconAlignment: string}
-	{@param? maxItems: int}
-	{@param? separator: bool}
-	{@param? spritemap: string}
-	{@param? title: string}
-
-	{let $checkbox kind="html"}
-		{call ClayCheckbox.render}
-			{param checked: $checked /}
-			{param disabled: $disabled /}
-			{param inline: true /}
-			{param label: $label /}
-			{param name: $inputName /}
-			{param value: $inputValue /}
-		{/call}
-	{/let}
-
-	{let $itemAttributes kind="attributes"}
-		class="dropdown-item
-			{if $active or $checked}
-				{sp}active
-			{/if}
-		"
-
-		data-onclick="{$_handleItemClick}"
-	{/let}
-
-	<li {$itemAttributes}>
-		{$checkbox}
-	</li>
-
-	{if $separator}
-		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
-	{/if}
-{/deltemplate}
-
-/**
- * Renders list group header item
- */
-{deltemplate ClayDropdownBase.Item variant="'group'"}
-	{@param label: string}
-	{@param? _handleItemClick: any}
-	{@param? active: bool}
-	{@param? checked: bool}
-	{@param? disabled: bool}
-	{@param? href: string}
-	{@param? icon: string}
-	{@param? inputName: string}
-	{@param? inputValue: string}
-	{@param? items: list<?>}
-	{@param? itemsIconAlignment: string}
-	{@param? maxItems: int}
-	{@param? separator: bool}
-	{@param? spritemap: string}
-	{@param? title: string}
-
-	{if $label and $label != ''}
-		<li class="dropdown-subheader" role="presentation">
-			{$label}
-		</li>
-	{/if}
-
-	{if $items}
-		{call .items}
-			{param _handleItemClick: $_handleItemClick /}
-			{param items: $items /}
-			{param itemsIconAlignment: $itemsIconAlignment /}
-			{param maxItems: $maxItems /}
-			{param spritemap: $spritemap /}
-		{/call}
-	{/if}
-
-	{if $separator}
-		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
-	{/if}
-{/deltemplate}
-
-/**
- * Renders list item with radio
- */
-{deltemplate ClayDropdownBase.Item variant="'radio'"}
-	{@param label: string}
-	{@param? _handleItemClick: any}
-	{@param? active: bool}
-	{@param? checked: bool}
-	{@param? disabled: bool}
-	{@param? href: string}
-	{@param? icon: string}
-	{@param? inputName: string}
-	{@param? inputValue: string}
-	{@param? items: list<?>}
-	{@param? itemsIconAlignment: string}
-	{@param? maxItems: int}
-	{@param? separator: bool}
-	{@param? spritemap: string}
-	{@param? title: string}
-
-	{let $radio kind="html"}
-		{call ClayRadio.render}
-			{param checked: $checked /}
-			{param disabled: $disabled /}
-			{param inline: true /}
-			{param label: $label /}
-			{param name: $inputName /}
-			{param value: $inputValue /}
-		{/call}
-	{/let}
-
-	{let $itemAttributes kind="attributes"}
-		class="dropdown-item
-			{if $active or $checked}
-				{sp}active
-			{/if}
-		"
-
-		data-onclick="{$_handleItemClick}"
-	{/let}
-
-	<li {$itemAttributes}>
-		{$radio}
-	</li>
-
-	{if $separator}
-		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
-	{/if}
-{/deltemplate}
-
-
-/**
- * Renders list item with radio group
- */
-{deltemplate ClayDropdownBase.Item variant="'radiogroup'"}
-	{@param label: string}
-	{@param? _handleItemClick: any}
-	{@param? active: bool}
-	{@param? checked: bool}
-	{@param? disabled: bool}
-	{@param? href: string}
-	{@param? icon: string}
-	{@param? inputName: string}
-	{@param? inputValue: string}
-	{@param? items: list<?>}
-	{@param? itemsIconAlignment: string}
-	{@param? maxItems: int}
-	{@param? separator: bool}
-	{@param? spritemap: string}
-	{@param? title: string}
-
-	{if $label and $label != ''}
-		<li class="dropdown-subheader" role="presentation">
-			{$label}
-		</li>
-	{/if}
-
-	<li aria-label="{$label}" role="radiogroup">
-		{if $items}
-			<ul class="list-unstyled">
-				{call .items}
-					{param _handleItemClick: $_handleItemClick /}
-					{param contentRenderer: 'radio' /}
-					{param items: $items /}
-					{param itemsIconAlignment: $itemsIconAlignment /}
-					{param maxItems: $maxItems /}
-					{param spritemap: $spritemap /}
-				{/call}
-			</ul>
-		{/if}
-	</li>
-
-	{if $separator}
-		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
-	{/if}
 {/deltemplate}
diff --git a/packages/clay-dropdown/src/ClayDropdownItem.js b/packages/clay-dropdown/src/ClayDropdownItem.js
@@ -0,0 +1,41 @@
+import 'clay-button';
+import 'clay-checkbox';
+import 'clay-icon';
+import 'clay-link';
+import 'clay-radio';
+import './ClayDropdownBase';
+import ClayComponent from 'clay-component';
+import defineWebComponent from 'metal-web-component';
+import Soy from 'metal-soy';
+import {Config} from 'metal-state';
+
+import templates from './ClayDropdownItem.soy.js';
+
+/**
+ * Implementation of the Metal Clay Icon.
+ * @extends Component
+ */
+class ClayDropdownItem extends ClayComponent {}
+
+/**
+ * State definition.
+ * @static
+ * @type {!Object}
+ */
+ClayDropdownItem.STATE = {
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayDropdownItem
+	 * @type {?object}
+	 */
+	data: Config.object(),
+};
+
+defineWebComponent('clay-dropdown-item', ClayDropdownItem);
+
+Soy.register(ClayDropdownItem, templates);
+
+export {ClayDropdownItem};
+export default ClayDropdownItem;