Implement is last item (#256)

fjmorant · web-flow · commit 688bdf88160f · 2021-02-14T23:27:20.000Z
* Implement is last

* Updated readme file

* Bump version
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}
   data={data}
   getChildrenName={(node) => 'items'}
   onNodePressed={(node) => alert('Selected node')}
-  renderNode={(node, level) => (
+  renderNode={(node, level, isLastLevel) => (
     <NestedRow
       level={level}
       style={styles.row}
@@ -52,14 +52,14 @@ const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}
 
 ### NestedListView
 
-| Prop                  | Description                                                                                                                                                 | Type     | Default      |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------ |
-| **`data`**            | Array of nested items                                                                                                                                       | Array    | **Required** |
-| **`renderNode`**      | Takes a node from data and renders it into the NestedlistView. The function receives `{node, level}` (see [Usage](#usage)) and must return a React element. | Function | **Required** |
-| **`getChildrenName`** | Function to determine in a node where are the children, by default NestedListView will try to find them in **items**                                        | Function | **items**    |
-| **`onNodePressed`**   | Function called when a node is pressed by a user                                                                                                            | Function | Not required |
-| **`extraData`**       | A marker property for telling the list to re-render                                                                                                         | Boolean  | Not required |
-| **`keepOpenedState`** | Prop for keeping the opened state of each node when data passed to the list changes                                                                         | Boolean  | Not required |
+| Prop                  | Description                                                                                                                                                              | Type     | Default      |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------ |
+| **`data`**            | Array of nested items                                                                                                                                                    | Array    | **Required** |
+| **`renderNode`**      | Takes a node from data and renders it into the NestedlistView. The function receives `{node, level, isLastLevel}` (see [Usage](#usage)) and must return a React element. | Function | **Required** |
+| **`getChildrenName`** | Function to determine in a node where are the children, by default NestedListView will try to find them in **items**                                                     | Function | **items**    |
+| **`onNodePressed`**   | Function called when a node is pressed by a user                                                                                                                         | Function | Not required |
+| **`extraData`**       | A marker property for telling the list to re-render                                                                                                                      | Boolean  | Not required |
+| **`keepOpenedState`** | Prop for keeping the opened state of each node when data passed to the list changes                                                                                      | Boolean  | Not required |
 
 ### NestedRow
 
@@ -74,12 +74,12 @@ const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}
 
 You can find examples [here](https://github.com/fjmorant/react-native-nested-listview-examples).
 
-| Version App  | React Native | Library |
-| ------------ | ------------ | ------- |
-| 1.0.0        | 0.63.2       | 0.9.2   |
+| Version App | React Native | Library |
+| ----------- | ------------ | ------- |
+| 1.0.0       | 0.63.2       | 0.9.2   |
 
 ## Roadmap
 
--   Autoscrolling optionally
--   Expand/contract nodes programatically
--   Support animations
+- Autoscrolling optionally
+- Expand/contract nodes programatically
+- Support animations
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-nested-listview",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Nested Listview for React native",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/src/NestedListView.test.tsx b/src/NestedListView.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
-import NestedListView, { NestedRow } from '.';
+import { Pressable, Text, View } from 'react-native';
+import NestedListView, { INode, NestedRow } from '.';
 import { render, waitFor, fireEvent } from '@testing-library/react-native';
 
 let mockCounter = 0;
@@ -126,13 +126,13 @@ describe('NestedListView', () => {
 
     const { queryByText } = render(
       <NestedListView
-        getChildrenName={(node: any) => {
+        getChildrenName={(node: INode) => {
           if (node.title === 'child2') {
             return 'descendants';
           }
           return 'items';
         }}
-        renderNode={(node: any) => (
+        renderNode={(node: INode) => (
           <View>
             <Text>{node.title}</Text>
           </View>
@@ -168,13 +168,13 @@ describe('NestedListView', () => {
 
     const { queryByText } = render(
       <NestedListView
-        getChildrenName={(node: any) => {
+        getChildrenName={(node: INode) => {
           if (node.title === 'child2') {
             return 'children';
           }
           return 'items';
         }}
-        renderNode={(node: any) => (
+        renderNode={(node: INode) => (
           <View>
             <Text>{node.title}</Text>
           </View>
@@ -237,7 +237,7 @@ describe('NestedListView', () => {
     const { queryByText } = render(
       <NestedListView
         getChildrenName={() => 'children'}
-        renderNode={(node: any) => (
+        renderNode={(node: INode) => (
           <View>
             <Text>{node.name}</Text>
           </View>
@@ -277,7 +277,7 @@ describe('NestedListView', () => {
     const { queryByText } = render(
       <NestedListView
         onNodePressed={mockOnNodePressed}
-        renderNode={(node: any) => (
+        renderNode={(node: INode) => (
           <View>
             <Text>{node.title}</Text>
           </View>
@@ -308,7 +308,7 @@ describe('NestedListView', () => {
     const { UNSAFE_queryAllByType } = render(
       <NestedListView
         onNodePressed={mockOnNodePressed}
-        renderNode={(node: any, level?: number) => (
+        renderNode={(node: INode, level?: number) => (
           <NestedRow level={level}>{node.name}</NestedRow>
         )}
         data={data}
@@ -350,4 +350,36 @@ describe('NestedListView', () => {
     const component = queryByText('prop data has not been passed');
     expect(component).toBeDefined();
   });
+
+  test('renders with isLast renderNode', async () => {
+    const data = [
+      {
+        title: 'child1',
+        items: [{ title: 'subchild 1.1' }, { title: 'subchild 1.2' }],
+      },
+    ];
+
+    const mockIsTheLast = jest.fn();
+
+    const { UNSAFE_getByType } = render(
+      <NestedListView
+        renderNode={(item: INode, level: number, isLastItem: boolean) => {
+          mockIsTheLast(isLastItem);
+
+          return <NestedRow level={level}>{item.title}</NestedRow>;
+        }}
+        data={data}
+      />,
+    );
+
+    await waitFor(() => {
+      const child1 = UNSAFE_getByType(Pressable);
+
+      if (child1) {
+        fireEvent.press(child1);
+      }
+
+      expect(mockIsTheLast).toHaveBeenLastCalledWith(true);
+    });
+  });
 });
diff --git a/src/NestedListView.tsx b/src/NestedListView.tsx
@@ -1,5 +1,5 @@
 import hashObjectGenerator from 'object-hash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import { StyleSheet, Text, View } from 'react-native';
 import shortid from 'shortid';
@@ -24,9 +24,13 @@ const styles = StyleSheet.create({
 export interface IProps {
   data: any;
   extraData?: any;
-  renderNode: (elem: INode, level?: number) => any;
-  onNodePressed?: (node?: INode) => void;
-  getChildrenName?: (elem: any) => any;
+  renderNode: (
+    item: INode,
+    level: number,
+    isLastLevel: boolean,
+  ) => ReactElement;
+  onNodePressed?: (item: INode) => void;
+  getChildrenName?: (item: INode) => string;
   style?: StyleSheet;
   keepOpenedState?: boolean;
 }
@@ -35,6 +39,14 @@ export interface IState {
   root: INode;
 }
 
+const defaultRootNode = {
+  _internalId: 'root',
+  items: [],
+  name: 'root',
+  opened: true,
+  hidden: true,
+} as INode;
+
 const NestedListView = React.memo(
   ({
     getChildrenName,
@@ -100,12 +112,7 @@ const NestedListView = React.memo(
     );
 
     const [_root, setRoot]: [INode, (_root: INode) => void] = useState(
-      generateRootNode({
-        getChildrenName,
-        renderNode,
-        data,
-        onNodePressed,
-      }),
+      defaultRootNode,
     );
 
     useEffect(() => {
@@ -156,7 +163,6 @@ const NestedListView = React.memo(
         getChildrenName={_getChildrenName}
         node={_root}
         onNodePressed={onNodePressed}
-        generateIds={generateIds}
         level={0}
         renderNode={renderNode}
         extraData={extraData}
diff --git a/src/NodeView.tsx b/src/NodeView.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
-import { FlatList, TouchableWithoutFeedback, View } from 'react-native';
+import { FlatList, Pressable } from 'react-native';
 import globalHook from 'use-global-hook';
 
 export interface INode {
@@ -11,14 +11,16 @@ export interface INode {
 }
 
 export interface IProps {
-  generateIds?: (node?: INode) => any;
-  getChildren?: () => any;
-  getChildrenName: (item: INode) => any;
+  getChildrenName: (item: INode) => string;
   node: INode;
   level: number;
-  onNodePressed?: (item: any) => any;
-  renderNode: (item: any, level: number) => any;
-  renderChildrenNode?: (item: any) => any;
+  onNodePressed?: (item: INode) => void;
+  renderNode: (
+    item: INode,
+    level: number,
+    isLastLevel: boolean,
+  ) => ReactElement;
+  renderChildrenNode?: (item: INode) => ReactElement;
   extraData?: any;
   keepOpenedState?: boolean;
 }
@@ -57,13 +59,12 @@ const NodeView = React.memo(
   }: IProps) => {
     const [globalState, globalActions]: [any, any] = useGlobal();
 
-    // tslint:disable-next-line:variable-name
     const [_node, setNode]: [INode, any] = useState({
       ...node,
       opened:
         keepOpenedState && globalState.nodesState[node._internalId]
-          ? globalState.nodesState[node._internalId]
-          : node.opened,
+          ? !!globalState.nodesState[node._internalId]
+          : !!node.opened,
     });
 
     useEffect(() => {
@@ -73,7 +74,6 @@ const NodeView = React.memo(
       });
     }, [node, _node.opened]);
 
-    // tslint:disable-next-line:variable-name
     const _onNodePressed = () => {
       if (keepOpenedState) {
         globalActions.setOpenedNode({
@@ -92,9 +92,8 @@ const NodeView = React.memo(
       }
     };
 
-    // tslint:disable-next-line:variable-name
-    const renderChildren = (item: INode, _level: number): any => {
-      return (
+    const renderChildren = useCallback(
+      (item: INode, _level: number): ReactElement => (
         <NodeView
           getChildrenName={getChildrenName}
           node={item}
@@ -104,14 +103,17 @@ const NodeView = React.memo(
           renderNode={renderNode}
           keepOpenedState={keepOpenedState}
         />
-      );
-    };
+      ),
+      [extraData, getChildrenName, onNodePressed, renderNode, keepOpenedState],
+    );
 
-    const renderItem = ({ item }: { item: INode }) =>
-      renderChildren(item, level);
+    const renderItem = useCallback(
+      ({ item }: { item: INode }) => renderChildren(item, level),
+      [renderChildren, level],
+    );
 
-    const rootChildrenName = getChildrenName(_node);
-    const rootChildren = _node[rootChildrenName];
+    const nodeChildrenName = getChildrenName(_node);
+    const nodeChildren: [] = _node[nodeChildrenName];
 
     const isNodeOpened =
       (keepOpenedState && globalState.nodesState[node._internalId]) ||
@@ -120,13 +122,13 @@ const NodeView = React.memo(
     return (
       <>
         {!_node.hidden ? (
-          <TouchableWithoutFeedback onPress={_onNodePressed}>
-            <View>{renderNode(_node, level)}</View>
-          </TouchableWithoutFeedback>
+          <Pressable onPress={_onNodePressed}>
+            {renderNode(_node, level, !nodeChildren || !nodeChildren.length)}
+          </Pressable>
         ) : null}
-        {isNodeOpened && rootChildren ? (
+        {isNodeOpened && nodeChildren ? (
           <FlatList
-            data={rootChildren}
+            data={nodeChildren}
             renderItem={renderItem}
             extraData={extraData}
             keyExtractor={(item: INode) => item._internalId}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-nested-listview",`
`3`		`- "version": "0.9.2",`
	`3`	`+ "version": "0.10.0",`
`4`	`4`	`"description": "Nested Listview for React native",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"types": "./dist/index.d.ts",`