add leading and trailing to listitem widget (#1690)

* convert list-item test to use test renderer
* add leading and trailing to listitem widget

closes #1570

Author: aciccarello

src/examples/src/config.tsx

@@ -105,6 +105,7 @@ import BasicList from './widgets/list/Basic';
 import DividedList from './widgets/list/Dividers';
 import ControlledList from './widgets/list/Controlled';
 import ItemRenderer from './widgets/list/ItemRenderer';
+import ListItemRenderer from './widgets/list/ListItemRenderer';
 import FetchedResource from './widgets/list/FetchedResource';
 import DisabledList from './widgets/list/Disabled';
 import DraggableList from './widgets/list/Draggable';
@@ -1069,6 +1070,11 @@ export const config = {
 					module: ItemRenderer,
 					title: 'Item Renderer'
 				},
+				{
+					filename: 'ListItemRenderer',
+					module: ListItemRenderer,
+					title: 'ListItem Renderer'
+				},
 				{
 					description:
 						'This example shows the menu used as a Listbox. This allows for a selection to be made and persisted. Useful for user selections and within selects / typeahead etc.',

src/examples/src/widgets/list/ListItemRenderer.tsx

@@ -0,0 +1,42 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import List, { ListItem } from '@dojo/widgets/list';
+import Icon from '@dojo/widgets/icon';
+import states from './states';
+import icache from '@dojo/framework/core/middleware/icache';
+import Example from '../../Example';
+import {
+	createResourceTemplate,
+	createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+
+const resource = createResourceMiddleware();
+const factory = create({ icache, resource });
+const template = createResourceTemplate<typeof states[0]>('value');
+
+export default factory(function ListItemRenderer({ id, middleware: { icache, resource } }) {
+	return (
+		<Example>
+			<List
+				resource={resource({
+					template: template({ id, data: states }),
+					transform: { value: 'value', label: 'value' }
+				})}
+				onValue={(value) => {
+					icache.set('value', value);
+				}}
+				itemsInView={8}
+			>
+				{({ value, label }, props) => (
+					<ListItem {...props}>
+						{{
+							leading: <Icon type="locationIcon" />,
+							primary: label,
+							trailing: value
+						}}
+					</ListItem>
+				)}
+			</List>
+			<p>{`Clicked On: ${JSON.stringify(icache.getOrSet('value', ''))}`}</p>
+		</Example>
+	);
+});

src/list/README.md

@@ -19,3 +19,9 @@ Dojo's `List` provides a base widget that can be used as a List or an options Li
 - Up Arrow: highlights the previous option
 - Down Arrow: highlights the next option
 - a-z, 0-9: highlights matching entries, ie. `ne` would match `nevada` in a list of states.
+
+### ListItem
+When using a custom renderer, the `ListItem` widget supports different child properties.
+- Leading: Content to display at the start of the list item, such as an icon
+- Primary: Main content of the list item
+- Trailing: Content to display at the end of the list item, such as minor details

src/list/index.tsx

@@ -2,7 +2,7 @@ import { RenderResult } from '@dojo/framework/core/interfaces';
 import { focus } from '@dojo/framework/core/middleware/focus';
 import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
 import { create, tsx } from '@dojo/framework/core/vdom';
-import { Keys } from '../common/util';
+import { Keys, isRenderResult } from '../common/util';
 import theme, { ThemeProperties } from '../middleware/theme';
 import offscreen from '../middleware/offscreen';
 import * as listItemCss from '../theme/default/list-item.m.css';
@@ -104,7 +104,18 @@ export interface ListItemProperties {
 	collapsed?: boolean;
 }
 
-const listItemFactory = create({ theme }).properties<ListItemProperties>();
+export interface ListItemChildren {
+	/** Icon or avatar to place before the primary content */
+	leading?: RenderResult;
+	/** The main content of the item, typically text */
+	primary?: RenderResult;
+	/** Icon or text to place after the primary content */
+	trailing?: RenderResult;
+}
+
+const listItemFactory = create({ theme })
+	.properties<ListItemProperties>()
+	.children<ListItemChildren | RenderResult | RenderResult[]>();
 
 export const ListItem = listItemFactory(function ListItem({
 	properties,
@@ -141,6 +152,11 @@ export const ListItem = listItemFactory(function ListItem({
 		!disabled && !active && onRequestActive();
 	}
 
+	const [firstChild, ...otherChildren] = children();
+	const { leading = undefined, primary, trailing = undefined } = isRenderResult(firstChild)
+		? { primary: [firstChild, ...otherChildren] }
+		: firstChild;
+
 	return (
 		<div
 			id={widgetId}
@@ -176,8 +192,10 @@ export const ListItem = listItemFactory(function ListItem({
 			ondrop={onDrop}
 			styles={{ visibility: dragged ? 'hidden' : undefined }}
 		>
-			{children()}
-			{draggable && (
+			{leading ? <span classes={themedCss.leading}>{leading}</span> : undefined}
+			<span classes={themedCss.primary}>{primary}</span>
+			{trailing ? <span classes={themedCss.trailing}>{trailing}</span> : undefined}
+			{draggable && !trailing && (
 				<Icon
 					type="barsIcon"
 					classes={{ '@dojo/widgets/icon': { icon: [themedCss.dragIcon] } }}