feat(List): handler for <List selection/>

src/elements/List/List.d.ts

@@ -9,7 +9,7 @@ import { default as ListContent } from './ListContent';
 import { default as ListDescription } from './ListDescription';
 import { default as ListHeader } from './ListHeader';
 import { default as ListIcon } from './ListIcon';
-import { default as ListItem } from './ListItem';
+import { default as ListItem, ListItemProps } from './ListItem';
 import { default as ListList } from './ListList';
 
 export interface ListProps {
@@ -51,6 +51,14 @@ export interface ListProps {
   /** A list can be specially formatted for navigation links. */
   link?: boolean;
 
+  /**
+   * onClick handler for ListItem. Mutually exclusive with children.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All item props.
+   */
+  onItemClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: ListItemProps) => void;
+
   /** A list can be ordered numerically. */
   ordered?: boolean;
 

src/elements/List/List.js

@@ -36,6 +36,7 @@ function List(props) {
     inverted,
     items,
     link,
+    onItemClick,
     ordered,
     relaxed,
     selection,
@@ -70,7 +71,7 @@ function List(props) {
 
   return (
     <ElementType {...rest} role='list' className={classes}>
-      {_.map(items, (item) => ListItem.create(item))}
+      {_.map(items, (item) => ListItem.create(item, { onClick: onItemClick }))}
     </ElementType>
   )
 }
@@ -117,6 +118,17 @@ List.propTypes = {
   /** A list can be specially formatted for navigation links. */
   link: PropTypes.bool,
 
+  /**
+   * onClick handler for ListItem. Mutually exclusive with children.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All item props.
+   */
+  onItemClick: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.func,
+  ]),
+
   /** A list can be ordered numerically. */
   ordered: PropTypes.bool,
 

src/elements/List/ListItem.d.ts

@@ -33,6 +33,14 @@ export interface ListItemProps {
   /** Shorthand for Image. */
   image?: any;
 
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: ListItemProps) => void;
+
   /** A value for an ordered list. */
   value?: string;
 }

src/elements/List/ListItem.js

@@ -44,17 +44,28 @@ function ListItem(props) {
   const rest = getUnhandledProps(ListItem, props)
   const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
 
+  const handleClick = (e) => {
+    const { onClick } = props
+
+    if (onClick) onClick(e, props)
+  }
+
   if (!_.isNil(children)) {
-    return <ElementType {...rest} {...valueProp} role='listitem' className={classes}>{children}</ElementType>
+    return (
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes} onClick={handleClick}>
+        {children}
+      </ElementType>
+    )
   }
 
   const iconElement = ListIcon.create(icon)
   const imageElement = Image.create(image)
 
+
   // See description of `content` prop for explanation about why this is necessary.
   if (!isValidElement(content) && _.isPlainObject(content)) {
     return (
-      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes} onClick={handleClick}>
         {iconElement || imageElement}
         {ListContent.create(content, { header, description })}
       </ElementType>
@@ -63,10 +74,9 @@ function ListItem(props) {
 
   const headerElement = ListHeader.create(header)
   const descriptionElement = ListDescription.create(description)
-
   if (iconElement || imageElement) {
     return (
-      <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
+      <ElementType {...rest} {...valueProp} role='listitem' className={classes} onClick={handleClick}>
         {iconElement || imageElement}
         {(content || headerElement || descriptionElement) && (
           <ListContent>
@@ -80,7 +90,7 @@ function ListItem(props) {
   }
 
   return (
-    <ElementType {...rest} {...valueProp} role='listitem' className={classes}>
+    <ElementType {...rest} {...valueProp} role='listitem' className={classes} onClick={handleClick}>
       {headerElement}
       {descriptionElement}
       {content}
@@ -145,6 +155,9 @@ ListItem.propTypes = {
     customPropTypes.itemShorthand,
   ]),
 
+  /** A ListItem can be clicked */
+  onClick: PropTypes.func,
+
   /** A value for an ordered list. */
   value: PropTypes.string,
 }