Merge 0d739ff into f0126cf

deprecate · Dec 29, 2017 · 2d3b46a · 2d3b46a
2 parents f0126cf + 0d739ff
commit 2d3b46a
Show file tree

Hide file tree

Showing 10 changed files with 2,870 additions and 1,293 deletions.
diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html
diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js
@@ -1,14 +1,15 @@
+import 'clay-checkbox';
 import 'clay-dropdown';
 import 'clay-icon';
 import 'clay-label';
 import 'clay-link';
 import 'clay-sticker';
-import './ClayListItem';
-
+// eslint-disable-next-line
+import { ClayActionsDropdown } from 'clay-dropdown';
+import {Config} from 'metal-state';
 import Component from 'metal-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
-import {Config} from 'metal-state';
 
 import templates from './ClayList.soy.js';
 
@@ -54,41 +55,10 @@ ClayList.STATE = {
 	 * List of items.
 	 * @instance
 	 * @memberof ClayList
-	 * @type {!array}
+	 * @type {?array|undefined}
 	 * @default undefined
 	 */
-	items: Config.arrayOf(
-		Config.shapeOf({
-			actionItems: Config.arrayOf(
-				Config.shapeOf({
-					disabled: Config.bool().value(false),
-					href: Config.string().required(),
-					icon: Config.string(),
-					label: Config.string().required(),
-					quickAction: Config.bool(),
-					separator: Config.bool().value(false),
-				})
-			),
-			description: Config.string(),
-			href: Config.string(),
-			icon: Config.string(),
-			iconShape: Config.oneOf(['circle', 'rounded']).value('rounded'),
-			labels: Config.arrayOf(
-				Config.shapeOf({
-					label: Config.string(),
-					style: Config.oneOf([
-						'danger',
-						'info',
-						'secondary',
-						'success',
-						'warning',
-					]).value('secondary'),
-				})
-			),
-			selected: Config.bool().value(false),
-			title: Config.string().required(),
-		})
-	).required(),
+	items: Config.array(),
 
 	/**
 	 * Flag to indicate if the list group items are selectable.
@@ -100,22 +70,31 @@ ClayList.STATE = {
 	selectable: Config.bool().value(false),
 
 	/**
-	 * The path to the SVG spritemap file containing the icons.
+	 * Schema mapping list item fields with item data properties.
 	 * @instance
 	 * @memberof ClayList
-	 * @type {?string|undefined}
+	 * @type {!object}
 	 * @default undefined
 	 */
-	spritemap: Config.string(),
+	schema: Config.arrayOf(
+		Config.shapeOf({
+			contentRenderer: Config.string(),
+			fieldName: Config.string(),
+			fieldsMap: Config.object(),
+			iconsMap: Config.object(),
+			iconShapesMap: Config.object(),
+			labelStylesMap: Config.object(),
+		})
+	).required(),
 
 	/**
-	 * Header of the list group.
+	 * The path to the SVG spritemap file containing the icons.
 	 * @instance
 	 * @memberof ClayList
 	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	title: Config.string(),
+	spritemap: Config.string(),
 };
 
 defineWebComponent('clay-list', ClayList);

diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy
@@ -4,32 +4,20 @@
  * This renders the component's whole content.
  */
 {template .render}
-	{@param items: list<[
-		actionItems: list<[
-			disabled: bool,
-			href: string,
-			icon: string,
-			label: string,
-			quickAction: bool,
-			separator: bool
-		]>,
-		description: string,
-		href: string,
-		icon: string,
-		iconShape: string,
-		labels: list<[
-			label: string,
-			style: string
-		]>,
-		selected: bool,
-		title: string
+	{@param schema: list<[
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
 	]>}
 	{@param? elementClasses: string}
 	{@param? handleItemToggled_: any}
 	{@param? id: string}
+	{@param? items: list<?>}
 	{@param? selectable: bool}
 	{@param? spritemap: string}
-	{@param? title: string}
 
 	{let $attributes kind="attributes"}
 		class="list-group show-quick-actions-on-hover
@@ -44,26 +32,239 @@
 	{/let}
 
 	<ul {$attributes}>
-		{if $title}
+		{if $items}
+			{call .items}
+				{param handleItemToggled_: $handleItemToggled_ /}
+				{param items: $items /}
+				{param schema:	$schema /}
+				{param selectable: $selectable /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
+	</ul>
+{/template}
+
+{template .item}
+	{@param item: ?}
+	{@param schema: list<[
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
+	]>}
+	{@param? handleItemToggled_: any}
+	{@param? selectable: bool}
+	{@param? spritemap: string}
+
+	{let $listItemClasses kind="text"}
+    list-group-item list-group-item-flex
+  		{if $item.selected}
+	  		{sp}active
+		  {/if}
+	{/let}
+
+	<li class="{$listItemClasses}">
+		{if $selectable}
+			<div class="flex-col">
+				{call ClayCheckbox.render}
+					{param checked: $item.selected /}
+					{param events: ['change': $handleItemToggled_] /}
+					{param hideLabel: true /}
+					{param label: 'select' /}
+				{/call}
+			</div>
+		{/if}
+
+		{foreach $fieldSchema in $schema}
+			{delcall ClayList.Field variant="$fieldSchema.contentRenderer"}
+				{param fieldSchema: $fieldSchema /}
+				{param item: $item /}
+				{param spritemap: $spritemap /}
+				{param value: $item[$fieldSchema.fieldName] /}
+			{/delcall}
+		{/foreach}
+
+		{if $item.actionItems and $spritemap}
+			<div class="flex-col">
+				{call .quickMenu}
+					{param items: $item.actionItems /}
+					{param spritemap: $spritemap /}
+				{/call}
+
+				{call ClayActionsDropdown.render}
+					{param items: $item.actionItems /}
+					{param spritemap: $spritemap /}
+				{/call}
+			</div>
+		{/if}
+	</li>
+{/template}
+
+/**
+ * This renders all the items in the list, iteraing over the items and its
+ * possible nested items.
+ */
+{template .items}
+	{@param items: list<?>}
+	{@param schema: list<[
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
+	]>}
+	{@param? handleItemToggled_: any}
+	{@param? selectable: bool}
+	{@param? spritemap: string}
+
+	{foreach $item in $items}
+		{if $item.items}
 			<li class="list-group-header">
-				<h3 class="list-group-header-title">{$title}</h3>
+				<h3 class="list-group-header-title">{$item.label}</h3>
 			</li>
-		{/if}
 
-		{foreach $item in $items}
-			{call ClayListItem.render}
-				{param actionItems: $item.actionItems /}
-				{param description: $item.description /}
-				{param events: ['itemToggled': $handleItemToggled_ ] /}
-				{param href: $item.href /}
-				{param icon: $item.icon /}
-				{param iconShape: $item.iconShape /}
-				{param labels: $item.labels /}
+			{call .items}
+				{param handleItemToggled_: $handleItemToggled_ /}
+				{param items: $item.items /}
+				{param schema:	$schema /}
+				{param selectable: $selectable /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{else}
+			{call .item}
+				{param handleItemToggled_: $handleItemToggled_ /}
+				{param item: $item /}
+				{param schema: $schema /}
 				{param selectable: $selectable /}
-				{param selected: $item.selected /}
 				{param spritemap: $spritemap /}
-				{param title: $item.title /}
 			{/call}
+		{/if}
+	{/foreach}
+{/template}
+
+/**
+ * This renders the quick actions menu
+ */
+{template .quickMenu}
+	{@param items: list<[
+		disabled: bool,
+		href: string,
+		icon: string,
+		label: string,
+		quickAction: bool,
+		separator: bool
+	]>}
+	{@param spritemap: string}
+
+	<div class="quick-action-menu">
+		{foreach $item in $items}
+			{if $item.quickAction and $item.icon and $spritemap}
+				{call ClayLink.render}
+					{param elementClasses: 'quick-action-item' /}
+					{param href: $item.href /}
+					{param icon: $item.icon /}
+					{param spritemap: $spritemap /}
+				{/call}
+			{/if}
 		{/foreach}
-	</ul>
-{/template}
+	</div>
+{/template}
+
+/**
+ * This renders the content of the item.
+ */
+{deltemplate ClayList.Field variant="'content'"}
+	{@param fieldSchema: [
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
+	]}
+	{@param item: ?}
+	{@param value: ?}
+	{@param? spritemap: string}
+
+	<div class="flex-col flex-col-expand">
+		<h4 class="list-group-title text-truncate">
+			{if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.href and $item[$fieldSchema.fieldsMap.href]}
+				{call ClayLink.render}
+					{param href: $item[$fieldSchema.fieldsMap.href] /}
+					{param label: $item[$fieldSchema.fieldsMap.title] /}
+				{/call}
+			{else}
+				{$item[$fieldSchema.fieldsMap.title]}
+			{/if}
+		</h4>
+
+		{if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.description and $item[$fieldSchema.fieldsMap.description]}
+			<p class="list-group-subtitle text-truncate">{$item[$fieldSchema.fieldsMap.description]}</p>
+		{/if}
+
+		{if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.label and $item[$fieldSchema.fieldsMap.label]}
+			<div class="list-group-detail">
+				{call ClayLabel.render}
+					{param label: $item[$fieldSchema.fieldsMap.label] /}
+					{param style: $fieldSchema.labelStylesMap ? $fieldSchema.labelStylesMap[$item[$fieldSchema.fieldsMap.label]] ?: $fieldSchema.labelStylesMap['*'] : null /}
+				{/call}
+			</div>
+		{/if}
+	</div>
+{/deltemplate}
+
+/**
+ * This renders the icon of the item.
+ */
+{deltemplate ClayList.Field variant="'icon'"}
+	{@param fieldSchema: [
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
+	]}
+	{@param item: ?}
+	{@param value: ?}
+	{@param? spritemap: string}
+
+	<div class="flex-col">
+		{if $spritemap}
+			{call ClaySticker.render}
+				{param icon: $fieldSchema.iconsMap ? $fieldSchema.iconsMap[$value] ?: $fieldSchema.iconsMap['*'] : $value /}
+				{param shape: $fieldSchema.iconShapesMap ? $fieldSchema.iconShapesMap[$value] ?: $fieldSchema.iconShapesMap['*'] : null /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
+	</div>
+{/deltemplate}
+
+/**
+ * This renders a simple content of the item.
+ */
+{deltemplate ClayList.Field variant="'simple'"}
+	{@param fieldSchema: [
+		contentRenderer: string,
+		fieldName: string,
+		fieldsMap: ?,
+		iconsMap: ?,
+		iconShapesMap: ?,
+		labelStylesMap: ?
+	]}
+	{@param item: ?}
+	{@param value: ?}
+	{@param? spritemap: string}
+
+	{if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.href and $item[$fieldSchema.fieldsMap.href]}
+		{call ClayLink.render}
+			{param href: $item[$fieldSchema.fieldsMap.href] /}
+			{param label: $item[$fieldSchema.fieldsMap.title] /}
+		{/call}
+	{else}
+		{$item[$fieldSchema.fieldsMap.title]}
+	{/if}
+{/deltemplate}