Pass rowDatum to the rowDrawer function [#153324179]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Dec 1, 2017 · c3e0d2d · c3e0d2d
1 parent e55dbe8
commit c3e0d2d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/spec/pivotal-ui-react/table/plugins/row-drawer_spec.js b/spec/pivotal-ui-react/table/plugins/row-drawer_spec.js
@@ -81,7 +81,7 @@ describe('withRowDrawer', () => {
           $('.tbody .tr:eq(0)').simulate('click');
         });
 
-        it('does not exand the row', () => {
+        it('does not expand the row', () => {
           expect('.tbody > div:eq(0) .collapse').not.toHaveClass('in');
         });
 
@@ -202,6 +202,12 @@ describe('withRowDrawer', () => {
         ReactDOM.render(<ComposedTable {...{columns, data, rowDrawer, keyboardNavigation: true}}/>, root);
       });
 
+      it('calls rowDrawer with the correct arguments', () => {
+        expect(rowDrawer).toHaveBeenCalledWith(0, {attr1: 'row1-value1', attr2: 'row1-value2'});
+        expect(rowDrawer).toHaveBeenCalledWith(1, {attr1: 'row2-value1', attr2: 'row2-value2'});
+        expect(rowDrawer).toHaveBeenCalledWith(2, {attr1: 'row3-value1', attr2: 'row3-value2'});
+      });
+
       it('renders an > icon on the first column', () => {
         expect('.thead .tr:eq(0) .th:eq(0) svg').not.toExist();
         expect('.tbody .tr:eq(0) .icon svg').toHaveClass('icon-chevron_right');
@@ -272,13 +278,18 @@ describe('withRowDrawer', () => {
 
           describe('when pressing right (keyCode=39)', () => {
             beforeEach(() => {
+              rowDrawer.calls.reset();
               keyDown(39);
             });
 
             it('expands the first row', () => {
               expect('.tr:eq(1)').toHaveClass('expanded');
             });
 
+            it('calls the rowDrawer function with the correct arguments', () => {
+              expect(rowDrawer.calls.first().args).toEqual([0, {attr1: 'row1-value1', attr2: 'row1-value2'}]);
+            });
+
             describe('when pressing left (keyCode=37)', () => {
               beforeEach(() => {
                 keyDown(37);

diff --git a/src/react/table/plugins/row-drawer.js b/src/react/table/plugins/row-drawer.js
@@ -82,6 +82,7 @@ export function withRowDrawer(Table) {
     static propTypes = {
       rowDrawer: PropTypes.func,
       rowIndex: PropTypes.number,
+      rowDatum: PropTypes.object,
       keyboardNavigation: PropTypes.bool,
       isSelected: PropTypes.bool
     };
@@ -114,8 +115,8 @@ export function withRowDrawer(Table) {
       const {isSelected} = this.props;
       if (!isSelected) return;
 
-      const {rowDrawer, rowIndex} = this.props;
-      const drawerContent = rowIndex !== -1 && rowDrawer(rowIndex);
+      const {rowDrawer, rowIndex, rowDatum} = this.props;
+      const drawerContent = rowIndex !== -1 && rowDrawer(rowIndex, rowDatum);
       if (!drawerContent) return;
 
       if (e.keyCode === ROW_KEYS.RIGHT) {
@@ -127,10 +128,10 @@ export function withRowDrawer(Table) {
 
     render() {
       // eslint-disable-next-line no-unused-vars
-      const {children, rowDrawer, rowIndex, keyboardNavigation, isSelected, ...props} = this.props;
+      const {children, rowDrawer, rowIndex, rowDatum, keyboardNavigation, isSelected, ...props} = this.props;
       const {expanded} = this.state;
 
-      const drawerContent = rowIndex !== -1 && rowDrawer(rowIndex);
+      const drawerContent = rowIndex !== -1 && rowDrawer(rowIndex, rowDatum);
       const onClick = () => drawerContent && this.setState({expanded: !expanded});
       const src = expanded ? 'chevron_down' : 'chevron_right';
       const className = classnames(props.className, {expandable: rowIndex !== -1}, {expanded},
@@ -171,9 +172,10 @@ export function withRowDrawer(Table) {
         tbodyTag: () => rowDrawer && TbodyWithDrawer,
         trTag: () => rowDrawer && RowWithDrawer,
         tbody: () => rowDrawer && {keyboardNavigation},
-        tr: (props, {rowIndex}) => rowDrawer && {
+        tr: (props, {rowIndex, rowDatum}) => rowDrawer && {
           rowDrawer,
           rowIndex,
+          rowDatum,
           keyboardNavigation
         }
       }, props);