From 10a2ca415e18e38013af9cc7f7f5a05984c6e0d8 Mon Sep 17 00:00:00 2001
From: "parth.satasiya" <parth.satasiya@bacancy.com>
Date: Sat, 9 Mar 2024 23:12:55 +0530
Subject: [PATCH] feat: Add pageSize prop to render initial number of items in
 dropdown #498

---
 .all-contributorsrc                   | 10 ++++++++++
 README.md                             |  8 ++++++++
 src/index.js                          |  3 +++
 types/react-dropdown-tree-select.d.ts |  2 ++
 4 files changed, 23 insertions(+)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 737e396d..5a7305b5 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -366,6 +366,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ParthSatasiya",
+      "name": "Parth Satasiya",
+      "avatar_url": "https://avatars.githubusercontent.com/u/31753548?v=4",
+      "profile": "https://github.com/ParthSatasiya",
+      "contributions": [
+        "question",
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
index 41068257..63344d79 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,7 @@ A lightweight and fast control to render a select component that can display hie
   - [id](#id)
   - [searchPredicate](#searchpredicate)
   - [inlineSearchInput](#inlinesearchinput)
+  - [pageSize](#pageSize)
   - [tabIndex](#tabIndex)
   - [disablePoppingOnBackspace](#disablePoppingOnBackspace)
 - [Styling and Customization](#styling-and-customization)
@@ -416,6 +417,12 @@ Type: `bool` (default: `false`)
 
 `inlineSearchInput=true` makes the search input renders **inside** the dropdown-content. This can be useful when your UX looks something like [this comment](https://github.com/dowjones/react-dropdown-tree-select/issues/308#issue-526467109).
 
+### pageSize
+
+Type: `number` (default: `100`)
+
+`pageSize=100` attribute indicates how many elements will render initially on the dropdown. When the scroll is near the end of the list at that time it automatically renders the next `100` elements in the dropdown.
+
 ### tabIndex
 
 Type: `number` (default: `0`)
@@ -659,6 +666,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
     <td align="center"><a href="http://osmancode.me"><img src="https://avatars0.githubusercontent.com/u/1795294?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohamad Othman</b></sub></a><br /><a href="https://github.com/dowjones/react-dropdown-tree-select/commits?author=osmancode" title="Code">💻</a> <a href="#ideas-osmancode" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://github.com/smurfs2549"><img src="https://avatars3.githubusercontent.com/u/8286468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kathleenlu</b></sub></a><br /><a href="https://github.com/dowjones/react-dropdown-tree-select/commits?author=smurfs2549" title="Code">💻</a> <a href="https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Asmurfs2549" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/r-zane-spalding"><img src="https://avatars.githubusercontent.com/u/88853042?v=4?s=100" width="100px;" alt=""/><br /><sub><b>r-zane-spalding</b></sub></a><br /><a href="https://github.com/dowjones/react-dropdown-tree-select/commits?author=r-zane-spalding" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ParthSatasiya"><img src="https://avatars.githubusercontent.com/u/31753548?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Parth Satasiya</b></sub></a><br /><a href="https://github.com/dowjones/react-dropdown-tree-select/commits?author=ParthSatasiya" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/src/index.js b/src/index.js
index 17c0ea4f..1c4903c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,6 +48,7 @@ class DropdownTreeSelect extends Component {
     id: PropTypes.string,
     searchPredicate: PropTypes.func,
     inlineSearchInput: PropTypes.bool,
+    pageSize: PropTypes.number,
     tabIndex: PropTypes.number,
     disablePoppingOnBackspace: PropTypes.bool,
   }
@@ -60,6 +61,7 @@ class DropdownTreeSelect extends Component {
     texts: {},
     showDropdown: 'default',
     inlineSearchInput: false,
+    pageSize: 100,
     tabIndex: 0,
     disablePoppingOnBackspace: false,
   }
@@ -362,6 +364,7 @@ class DropdownTreeSelect extends Component {
                   onAction={this.onAction}
                   onCheckboxChange={this.onCheckboxChange}
                   onNodeToggle={this.onNodeToggle}
+                  pageSize={this.props.pageSize}
                   mode={mode}
                   showPartiallySelected={this.props.showPartiallySelected}
                   {...commonProps}
diff --git a/types/react-dropdown-tree-select.d.ts b/types/react-dropdown-tree-select.d.ts
index b9e4f2b8..32a76656 100644
--- a/types/react-dropdown-tree-select.d.ts
+++ b/types/react-dropdown-tree-select.d.ts
@@ -103,6 +103,8 @@ declare module 'react-dropdown-tree-select' {
      * search bar, the tree will not deselect nodes.
      */
     disablePoppingOnBackspace?: boolean
+    /** `pageSize=100` attribute indicates how many elements will render initially on the dropdown. When the scroll is near the end of the list at that time it automatically renders the next `100` elements in the dropdown. */
+    pageSize?: number
   }
 
   export interface DropdownTreeSelectState {