Fix of #569 - correctly working itemLimit prop

pnp · Jun 21, 2020 · 62f4754 · 62f4754
1 parent c31ce7f
commit 62f4754
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/docs/documentation/docs/controls/ComboBoxListItemPicker.md b/docs/documentation/docs/controls/ComboBoxListItemPicker.md
@@ -121,5 +121,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | filter | string | no | Condition to filter list Item, same as $filter ODATA parameter|
 | multiSelect | boolean | no | Allows multiple selection|
 | onInitialized | () => void | no | Calls when component is ready|
+| itemLimit | number | no | Maximum number of items to be displayed in the combobox. Default: 100 |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ComboBoxListItemPicker)
diff --git a/src/common/dal/ListItemRepository.ts b/src/common/dal/ListItemRepository.ts
@@ -17,7 +17,7 @@ export class ListItemRepository {
         let returnItems: any[];
         try {
             const webAbsoluteUrl = !webUrl ? this.SiteUrl : webUrl;
-            const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}`;
+            const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}&$top=${top}`;
             const data = await this.SPClient.get(apiUrl, SPHttpClient.configurations.v1);
             if (data.ok) {
                 const results = await data.json();

diff --git a/src/controls/listItemPicker/ComboBoxListItemPicker.tsx b/src/controls/listItemPicker/ComboBoxListItemPicker.tsx
@@ -35,36 +35,46 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
   }
 
   protected async loadOptions(): Promise<void> {
-    let query = "";
-    query += this.props.filter || "Id gt 0";
-    let keyColumnName = this.props.keyColumnInternalName || "Id";
+    const {
+      filter,
+      keyColumnInternalName,
+      listId,
+      columnInternalName,
+      webUrl,
+      itemLimit,
+      defaultSelectedItems,
+      onInitialized
+    } = this.props;
+    let query = filter || "";
+    //query += filter;
+    let keyColumnName = keyColumnInternalName || "Id";
     let listItems = await this._listItemRepo.getListItemsByFilterClause(query,
-      this.props.listId,
-      this.props.columnInternalName,
-      this.props.keyColumnInternalName,
-      this.props.webUrl,
-      /*this.props.itemLimit ||*/ 100);
+      listId,
+      columnInternalName,
+      keyColumnInternalName,
+      webUrl,
+      itemLimit || 100);
 
     let options = listItems.map(option => {
       return {
         key: option[keyColumnName],
-        text: option[this.props.columnInternalName || "Id"]
+        text: option[columnInternalName || "Id"]
       };
     });
-    if (this.props.defaultSelectedItems) {
+    if (defaultSelectedItems) {
       //if passed only ids
-      if (!isNaN(this.props.defaultSelectedItems[0])) {
-        this.selectedItems = options.filter(opt => this.props.defaultSelectedItems.indexOf(opt.key) >= 0);
+      if (!isNaN(defaultSelectedItems[0])) {
+        this.selectedItems = options.filter(opt => defaultSelectedItems.indexOf(opt.key) >= 0);
       }
       else {
-        this.selectedItems = options.filter(opt => this.props.defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
+        this.selectedItems = options.filter(opt => defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
       }
     }
     this.setState({
       availableOptions: options
     });
-    if(this.props.onInitialized){
-      this.props.onInitialized();
+    if(onInitialized){
+      onInitialized();
     }
   }
 
@@ -105,7 +115,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
   /**
    * On Selected Item
    */
-  private onChanged = (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void => { 
+  private onChanged = (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void => {
     if(this.props.multiSelect){
       if (option && option.selected) {
         this.selectedItems.push({
@@ -119,12 +129,12 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
     }else{
       this.selectedItems.push({
         [this.props.keyColumnInternalName || "Id"]: option.key,
-        [this.props.columnInternalName]: option.text        
+        [this.props.columnInternalName]: option.text
       });
-      
+
       this.selectedItems = this.selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] === option.key);
     }
-    
+
     this.props.onSelectedItem(this.selectedItems);
   }
 }
diff --git a/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts b/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts
@@ -19,7 +19,7 @@ export interface IComboBoxListItemPickerProps {
     webUrl: string;
     spHttpClient: SPHttpClient;
     listId: string;
-    // itemLimit: number;
+    itemLimit?: number;
     filter?: string;
     className?: string;
     defaultSelectedItems?: any[];