Add support of filter on ListView.

Update documentation.

Author: Piotr Siatka

docs/documentation/docs/controls/ListView.md

@@ -27,8 +27,12 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp
   compact={true}
   selectionMode={SelectionMode.multiple}
   selection={this._getSelection}
+  showFilter={true}
+  defaultFilter="John"
+  filterPlaceHolder="Search..."
   groupByFields={groupByFields} />
 ```
+- The control provides full text filtering through all the columns. If you want to exectue filtering on the specified columns, you can use syntax : `<ColumndName>`:`<FilterValue>`. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface.
 
 - With the `selection` property you can define a method that which gets called when the user selects one or more items in the list view:
 
@@ -71,6 +75,9 @@ The ListView control can be configured with the following properties:
 | selection | function | no | Selection event that passes the selected item(s) from the list view. |
 | groupByFields | IGrouping[] | no | Defines the field on which you want to group the items in the list view. |
 | defaultSelection | number[] | no | The index of the items to be select by default |
+| filterPlaceHolder | string | no | Specify the placeholder for the filter text box. Default 'Search' |
+| showFilter | boolean | no | Specify if the filter text box should be rendered. |
+| defaultFilter | string | no | Specify the initial filter to be applied to the list. |
 
 The `IViewField` has the following implementation:
 

src/controls/listView/IListView.ts

@@ -9,7 +9,6 @@ export enum GroupOrder {
 }
 
 export interface IListViewProps {
-
   /**
    * Specify the name of the file URL path which will be used to show the file icon.
    */
@@ -44,10 +43,25 @@ export interface IListViewProps {
    * The index of the items to be select by default
    */
   defaultSelection?: number[];
+  /**
+   * Specify the placeholder for the filter text box. Default 'Search'
+   */
+  filterPlaceHolder?: string;
+  /**
+   * Specify if the filter text box should be rendered.
+   */
+  showFilter?: boolean;
+  /**
+   * Specify the initial filter to be applied to the list.
+   */
+  defaultFilter?: string;
 }
 
 export interface IListViewState {
-
+  /**
+   * Current value of the filter input
+   */
+  filterValue?: string;
   /**
    * The items to render.
    */

src/controls/listView/ListView.tsx

@@ -7,6 +7,8 @@ import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
 import { IGroupsItems } from './IListView';
 import * as telemetry from '../../common/telemetry';
+import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
+import { filter } from 'lodash';
 
 /**
  * File type icon component
@@ -27,11 +29,13 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
 
     // Initialize state
     this.state = {
-      items: []
+      items: [],
+      filterValue: this.props.defaultFilter
     };
 
     // Binding the functions
     this._columnClick = this._columnClick.bind(this);
+    this._updateFilterValue = this._updateFilterValue.bind(this);
 
     if (typeof this.props.selection !== 'undefined' && this.props.selection !== null) {
       // Initialize the selection
@@ -73,9 +77,9 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    */
   private _setSelectedItems(): void {
     if (this.props.items &&
-        this.props.items.length > 0 &&
-        this.props.defaultSelection &&
-        this.props.defaultSelection.length > 0) {
+      this.props.items.length > 0 &&
+      this.props.defaultSelection &&
+      this.props.defaultSelection.length > 0) {
       for (const index of this.props.defaultSelection) {
         if (index > -1) {
           this._selection.setIndexSelected(index, true, false);
@@ -344,6 +348,16 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
   }
 
+  /**
+   * Method updates the controlled value of the filter field
+   * @param newValue
+   */
+  private _updateFilterValue(newValue: string) {
+    this.setState({
+      filterValue: newValue
+    })
+  }
+
   /**
    * Sort the list of items by the clicked column
    * @param items
@@ -373,11 +387,90 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     return sortedItems;
   }
 
+
+  /**
+   * Executes filtering. Method tries to indicate if filtering should be executed on a single or all columns.
+   * @param filterValue
+   * @param items
+   * @param columns
+   */
+  private _executeFilternig(filterValue: string, items: any[], columns: IColumn[]): any {
+    const filterSeparator = ":";
+
+    let filterColumns = [...columns];
+    if (filterValue && filterValue.indexOf(filterSeparator) >= 0) {
+      const columnName = filterValue.split(filterSeparator)[0];
+      filterValue = filterValue.split(filterSeparator)[1]
+
+      filterColumns = filter(columns, column => {
+        return column.fieldName === columnName || column.name === columnName;
+      });
+    }
+
+    return this._getFilteredItems(filterValue, items, filterColumns);
+  }
+  /**
+   * Execute filtering on the provided data set and columns
+   * @param filterValue
+   * @param items
+   * @param columns
+   */
+  private _getFilteredItems(filterValue: string, items: any[], columns: IColumn[]): any {
+    if (!filterValue) {
+      return items;
+    }
+
+    let result: any[] = [];
+    for (let itemIndex = 0; itemIndex < items.length; itemIndex++) {
+      const item: any = items[itemIndex];
+      let addItemToResultSet: boolean = false;
+      for (let viewFieldIndex = 0; viewFieldIndex < columns.length; viewFieldIndex++) {
+        let viewField = columns[viewFieldIndex];
+        if (this._doesPropertyContainsValue(item, viewField.fieldName, filterValue)) {
+          addItemToResultSet = true;
+          break;
+        }
+        if (this._doesPropertyContainsValue(item, viewField.name, filterValue)) {
+          addItemToResultSet = true;
+          break;
+        }
+      }
+
+      if (addItemToResultSet) {
+        result.push(item);
+      }
+    };
+
+    return result;
+  }
+
+  /**
+   * Check if the item contains property with proper value
+   * @param item
+   * @param property
+   * @param filter
+   */
+  private _doesPropertyContainsValue(item: any, property: string, filter: string): boolean {
+    const propertyValue = item[property];
+    let result = false;
+    if (propertyValue) {
+      // Case insensitive
+      result = String(propertyValue).toLowerCase().indexOf(filter.toLowerCase()) >= 0;
+    }
+
+    return result;
+  }
+
   /**
    * Default React component render method
    */
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
+
+    let { showFilter, filterPlaceHolder } = this.props;
+    let { filterValue, items, columns } = this.state;
+
+    filterPlaceHolder = filterPlaceHolder ? filterPlaceHolder : "Search";
     // Check if selection mode is single selection,
     // if that is the case, disable the selection on grouping headers
     if (this.props.selectionMode === SelectionMode.single) {
@@ -388,11 +481,17 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
         }
       };
     }
+    if (showFilter && filterValue && columns) {
+      items = this._executeFilternig(filterValue, items, columns)
+    }
 
     return (
       <div>
+        {
+          showFilter && <TextField placeholder={filterPlaceHolder} onChanged={this._updateFilterValue} value={filterValue}/>
+        }
         <DetailsList
-          items={this.state.items}
+          items={items}
           columns={this.state.columns}
           groups={this.state.groups}
           selectionMode={this.props.selectionMode || SelectionMode.none}