feat: 🎸 Renderers now are supplied with row index

Author: diogofcunha

index.d.ts

@@ -45,6 +45,7 @@ export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export interface RendererProps<T> {
   measure: () => void;
+  index: number;
   onChange: (updateParams: NodeAction) => void;
   node: FlattenedNode;
   iconsClassNameMap?: T;

src/__tests__/__snapshots__/Tree.test.js.snap

@@ -28,6 +28,7 @@ Object {
 
 exports[`Tree rowRenderer should render the Node renderer with the correct props 1`] = `
 Object {
+  "index": 0,
   "measure": [MockFunction],
   "node": Object {
     "children": Array [

src/renderers/Deletable.js

@@ -13,14 +13,15 @@ const Deletable = ({
     delete: 'mi mi-delete',
   },
   children,
+  index,
 }) => {
   const {isDeletable} = getNodeRenderOptions(node);
 
   const className = classNames({
     [iconsClassNameMap.delete]: isDeletable,
   });
 
-  const handleChange = () => onChange(deleteNode(node));
+  const handleChange = () => onChange({...deleteNode(node), index});
 
   return (
     <span>

src/renderers/Expandable.js

@@ -10,6 +10,7 @@ const Expandable = ({
   onChange,
   node,
   children,
+  index,
   iconsClassNameMap = {
     expanded: 'mi mi-keyboard-arrow-down',
     collapsed: 'mi mi-keyboard-arrow-right',
@@ -23,7 +24,7 @@ const Expandable = ({
     [iconsClassNameMap.lastChild]: !hasChildren,
   });
 
-  const handleChange = () => onChange(updateNode(node, {expanded: !isExpanded}));
+  const handleChange = () => onChange({...updateNode(node, {expanded: !isExpanded}), index});
 
   return (
     <span onDoubleClick={handleChange}>

src/renderers/Favorite.js

@@ -14,6 +14,7 @@ const Favorite = ({
     notFavorite: 'mi mi-star-border',
   },
   children,
+  index,
 }) => {
   const {isFavorite} = getNodeRenderOptions(node);
 
@@ -22,7 +23,7 @@ const Favorite = ({
     [iconsClassNameMap.notFavorite]: !isFavorite,
   });
 
-  const handleChange = () => onChange(updateNode(node, {favorite: !isFavorite}));
+  const handleChange = () => onChange({...updateNode(node, {favorite: !isFavorite}), index});
 
   return (
     <span>

src/renderers/__tests__/Deletable.test.js

@@ -22,6 +22,7 @@ describe('renderers Deletable', () => {
         delete: 'delete',
       },
       measure: jest.fn(),
+      index: 1,
     };
 
     const props = {...baseProps, ...extraProps};
@@ -42,15 +43,15 @@ describe('renderers Deletable', () => {
 
       deleteIconWrapper.simulate('click');
 
-      expect(props.onChange).toHaveBeenCalledWith(deleteNode(props.node));
+      expect(props.onChange).toHaveBeenCalledWith({...deleteNode(props.node), index: props.index});
     });
 
     it('pressing enter should call onChange with the correct params', () => {
       const {deleteIconWrapper, props} = setup();
 
       deleteIconWrapper.simulate('keyDown', {keyCode: KEY_CODES.Enter});
 
-      expect(props.onChange).toHaveBeenCalledWith(deleteNode(props.node));
+      expect(props.onChange).toHaveBeenCalledWith({...deleteNode(props.node), index: props.index});
     });
   });
 

src/renderers/__tests__/Expandable.test.js

@@ -23,6 +23,7 @@ describe('renderers Expandable', () => {
         collapsed: 'colpased',
       },
       measure: jest.fn(),
+      index: 1,
     };
 
     const props = {...baseProps, ...extraProps};
@@ -44,23 +45,23 @@ describe('renderers Expandable', () => {
 
         expandIconWrapper.simulate('click');
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: false}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: false}), index: props.index});
       });
 
       it('pressing enter should call onChange with the correct params', () => {
         const {expandIconWrapper, props} = setup({expanded: true});
 
         expandIconWrapper.simulate('keyDown', {keyCode: KEY_CODES.Enter});
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: false}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: false}), index: props.index});
       });
 
       it('double clicking in the parent node should call onChange with the correct params', () => {
         const {props, wrapper} = setup({expanded: true});
 
         wrapper.first().simulate('doubleClick');
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: false}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: false}), index: props.index});
       });
     });
 
@@ -76,23 +77,23 @@ describe('renderers Expandable', () => {
 
         expandIconWrapper.simulate('click');
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: true}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: true}), index: props.index});
       });
 
       it('pressing enter should call onChange with the correct params', () => {
         const {expandIconWrapper, props} = setup({expanded: false});
 
         expandIconWrapper.simulate('keyDown', {keyCode: KEY_CODES.Enter});
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: true}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: true}), index: props.index});
       });
 
       it('double clicking in the parent node should call onChange with the correct params', () => {
         const {props, wrapper} = setup({expanded: false});
 
         wrapper.first().simulate('doubleClick');
 
-        expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {expanded: true}));
+        expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {expanded: true}), index: props.index});
       });
     });
   });

src/renderers/__tests__/Favorite.test.js

@@ -23,6 +23,7 @@ describe('renderers Favorite', () => {
         notFavorite: 'non-fav',
       },
       measure: jest.fn(),
+      index: 1,
     };
 
     const props = {...baseProps, ...extraProps};
@@ -45,15 +46,15 @@ describe('renderers Favorite', () => {
 
       favoriteIconWrapper.simulate('click');
 
-      expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {favorite: false}));
+      expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {favorite: false}), index: props.index});
     });
 
     it('pressing enter should call onChange with the correct params', () => {
       const {favoriteIconWrapper, props} = setupFavorite();
 
       favoriteIconWrapper.simulate('keyDown', {keyCode: KEY_CODES.Enter});
 
-      expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {favorite: false}));
+      expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {favorite: false}), index: props.index});
     });
   });
 
@@ -71,15 +72,15 @@ describe('renderers Favorite', () => {
 
       favoriteIconWrapper.simulate('click');
 
-      expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {favorite: true}));
+      expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {favorite: true}), index: props.index});
     });
 
     it('pressing enter should call onChange with the correct params', () => {
       const {favoriteIconWrapper, props} = setupNotFavorite();
 
       favoriteIconWrapper.simulate('keyDown', {keyCode: KEY_CODES.Enter});
 
-      expect(props.onChange).toHaveBeenCalledWith(updateNode(props.node, {favorite: true}));
+      expect(props.onChange).toHaveBeenCalledWith({...updateNode(props.node, {favorite: true}), index: props.index});
     });
   });
 });

src/shapes/rendererShapes.js

@@ -6,4 +6,5 @@ export const Renderer = {
   measure: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   node: PropTypes.shape(FlattenedNode),
+  index: PropTypes.number.isRequired,
 };