Merge pull request #64 from uptick/enhance/onclick-handlers

Add onclick functionality for items in a dataset
uptick · Aug 3, 2018 · f034d30 · f034d30
2 parents 96d250e + 3a230e6
commit f034d30
Show file tree

Hide file tree

Showing 17 changed files with 731 additions and 21 deletions.
diff --git a/src/ObjectList.demo.stories.js b/src/ObjectList.demo.stories.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { withInfo } from '@storybook/addon-info'
 import {TextContainsFilter, SearchFilter} from './filters'
 
@@ -154,6 +155,7 @@ class InteractiveObjectList extends React.Component {
       removeFilter={this.removeFilter}
       updateFilter={this.updateFilter}
       searchKey="first_name"
+      itemOnClick={action('clicked on')}
     />
   }
 }

diff --git a/src/ObjectList.js b/src/ObjectList.js
@@ -41,6 +41,8 @@ class ObjectList extends Component {
       ...FILTER_BASE_TYPE,
       active: PropTypes.bool,
     })),
+    /** function called when a datapoint's representation is clicked on **/
+    itemOnClick: PropTypes.func,
     /** the column renderer to use, if 2d array they are grouped together  */
     columns: PropTypes.arrayOf(PropTypes.oneOfType([COLUMN_TYPE, PropTypes.arrayOf(COLUMN_TYPE)])),
     /** callback function when toggling an extra column on or off */
@@ -118,7 +120,7 @@ class ObjectList extends Component {
     const {
       DataRenderer, Pagination, ErrorMessage,
       filters, addFilter, updateFilter, meta, status, searchKey,
-      data, columns, updateColumns,
+      data, columns, updateColumns, itemOnClick,
       favourites, handleDeleteFavourite, handleAddFavourite, favouritesEnabled,
       selectedFavouriteName, loadFavourite, maxPages, removeFilter,
       updatePage, updateSorting, selection, selectItems, customActions, error,
@@ -166,6 +168,7 @@ class ObjectList extends Component {
           select={selectItems}
           status={status}
           numSelected={numSelected}
+          itemOnClick={itemOnClick}
         />
         { (totalCount / perPage) > 0 &&
           <Pagination

diff --git a/src/__snapshots__/ObjectList.demo.stories.storyshot b/src/__snapshots__/ObjectList.demo.stories.storyshot
@@ -118,7 +118,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
       className="objectlist-list__list"
     >
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -167,7 +168,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -216,7 +218,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -265,7 +268,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -314,7 +318,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -363,7 +368,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -412,7 +418,8 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
         </div>
       </li>
       <li
-        className="objectlist-list__item"
+        className="objectlist-list__item objectlist-list__item--clickable"
+        onClick={[Function]}
       >
         <div
           className="objectlist-list__content"
@@ -780,7 +787,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
       </thead>
       <tbody>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -800,7 +808,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -820,7 +829,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -840,7 +850,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -860,7 +871,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -880,7 +892,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"
@@ -900,7 +913,8 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
           </td>
         </tr>
         <tr
-          className="objectlist-table__row"
+          className="objectlist-table__row objectlist-table__row--clickable"
+          onClick={[Function]}
         >
           <td
             className="objectlist-table__td"