Extend List Component functionality: Add onClick action and selection styles

recipes/src/components/List/index.tsx

@@ -1,35 +1,49 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
+import { update } from 'ramda';
 
 import './styles.scss';
 
+type ItemProps = { focused?: boolean } ;
 
-type ListProps<T> = {
+type ListProps<T extends ItemProps> = {
   nonInteractive?: boolean,
+  focusOnClick?: boolean,
   dense?: boolean,
+  focusMultiple?: number[],
   focus?: number,
   items: T[],
-  render: (item: T, index: number) => React.ComponentElement<T, any>
+  render: (item: T, index: number) => React.ComponentElement<T, any>,
+  onClick?: (item: T, index: number) => void,
 }
 
-const CBKList = <T extends {}>(props: ListProps<T>) => (
-  <ul className={
-    classnames({
-      'cbk-list': true,
-      'cbk-list--dense': props.dense
-    })
-  }>
-    {
-      props.items.map((item, index) => (
-        <li
-          key={index}
-          className={`cbk-list__item ${index === props.focus ? 'cbk-list__item--focus' : ''}`}
-        >
-          {props.render(item, index)}
-        </li>
-      ))
-    }
-  </ul>
-);
+const CBKList = <T extends ItemProps>(props: ListProps<T>) => {
+  return (
+    <ul className={
+      classnames({
+        'cbk-list': true,
+        'cbk-list--non-interactive': props.nonInteractive,
+        'cbk-list--dense': props.dense
+      })
+    }>
+      {
+        props.items.map((item, index) => (
+          <li
+            key={index}
+            className={
+              classnames({
+                'cbk-list__item': true,
+                'cbk-list__item--focus': index === props.focus || item.focused || (props.focusMultiple && props.focusMultiple.includes(index))
+              })
+            }
+            onClick={() => { props.onClick ? props.onClick(item, index) : null }}
+          >
+            {props.render(item, index)}
+          </li>
+        ))
+      }
+    </ul>
+  );
+};
 
 export default CBKList

recipes/src/components/List/styles.scss

@@ -3,6 +3,7 @@
 .cbk-list {
   padding: 8px 0;
   width: 100%;
+
   &__item {
     display: flex;
     position: relative;
@@ -11,6 +12,7 @@
     height: 48px;
     padding: 0 16px;
     overflow: hidden;
+    cursor: pointer;
     &:hover,
     &--focus {
       background-color: $yellow
@@ -37,4 +39,9 @@
       height: auto;
     }
   }
+  &--non-interactive {
+    .cbk-list__item {
+      cursor: default;
+    }
+  }
 }