✨ Clicking on child row shows payload

Click on a child row with a reference ID shows the payload for that ID
kids-first · Mar 4, 2020 · 9c4cf3f · 9c4cf3f
1 parent 9e437ed
commit 9c4cf3f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/src/components/tables/ReferenceTable.js b/src/components/tables/ReferenceTable.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Modal} from 'semantic-ui-react';
 import {getReferencedBy} from '../../utils/api';
 import SortableTable from './SortableTable';
 import './ReferenceTable.css';
@@ -10,6 +11,7 @@ class ReferenceTable extends React.Component {
     this.state = {
       loadingReferences: false,
       referenceData: [],
+      showChildModal: null,
     };
   }
 
@@ -58,6 +60,14 @@ class ReferenceTable extends React.Component {
     });
   };
 
+  onChildRowClick = child => {
+    this.setState({showChildModal: child});
+  };
+
+  closeModal = () => {
+    this.setState({showChildModal: null});
+  };
+
   render() {
     return (
       <div className="reference-table">
@@ -73,7 +83,26 @@ class ReferenceTable extends React.Component {
               headerCells={this.props.tableHeaders}
               data={this.state.referenceData}
               rowChildren={true}
+              onChildRowClick={this.onChildRowClick}
             />
+            <Modal
+              open={!!this.state.showChildModal}
+              onClose={() => this.closeModal()}
+              dimmer="inverted"
+            >
+              <Modal.Header>
+                {this.state.showChildModal
+                  ? this.state.showChildModal.id
+                  : null}
+              </Modal.Header>
+              <Modal.Content>
+                <Modal.Description>
+                  <pre>
+                    {JSON.stringify(this.state.showChildModal, null, 2)}
+                  </pre>
+                </Modal.Description>
+              </Modal.Content>
+            </Modal>
           </div>
         ) : null}
       </div>

diff --git a/src/components/tables/SortableTable.css b/src/components/tables/SortableTable.css
@@ -16,9 +16,3 @@
 .sortable-table td:hover {
   background-color: var(--d3b-hoverblue);
 }
-
-.sortable-table__child-row:hover,
-.sortable-table__child-row td:hover {
-  background-color: inherit !important;
-  cursor: default;
-}
diff --git a/src/components/tables/SortableTable.js b/src/components/tables/SortableTable.js
@@ -110,7 +110,10 @@ class SortableTable extends React.Component {
                         key={`${child.id}-${j}`}
                         className="sortable-table__child-row"
                       >
-                        <Table.Cell colSpan="4">
+                        <Table.Cell
+                          colSpan={headerCells.length}
+                          onClick={() => this.props.onChildRowClick(child)}
+                        >
                           <p>{child.id}</p>
                         </Table.Cell>
                       </Table.Row>
@@ -140,13 +143,15 @@ SortableTable.propTypes = {
   ),
   rowChildren: PropTypes.bool,
   onRowClick: PropTypes.func,
+  onChildRowClick: PropTypes.func,
 };
 
 SortableTable.defaultProps = {
   headerCells: [],
   data: [],
   rowChildren: false,
   onRowClick: () => {},
+  onChildRowClick: () => {},
 };
 
 export default SortableTable;