Merge pull request #553 from gautamdsheth/feature/searchboxFilter

Using Searchbox instead of Textbox for filtering in list view and folder explorer

Author: AJIXuMuK

src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx

@@ -9,6 +9,7 @@ import { IFolder, IFolderExplorerService } from '../../../services/IFolderExplor
 import { NewFolder } from "../NewFolder";
 import { Breadcrumb, IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
 import * as telemetry from '../../../common/telemetry';
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 
 
 export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolderExplorerState> {
@@ -52,7 +53,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
         <div style={{ opacity: this.state.foldersLoading ? 0.8 : 1, }}>
           {!this.props.hiddenFilterBox && this._allFolders.length > 0 &&
             <div>
-              <TextField className={styles.filterBox} placeholder={strings.FolderFilterBoxPlaceholder} onChanged={this._onChangeFilterText} />
+              <SearchBox className={styles.filterBox} placeholder={strings.FolderFilterBoxPlaceholder} onSearch={this._onChangeFilterText} onChange={this._onChangeFilterText} />
             </div>
           }
           {this.state.folders.length === 0 &&

src/controls/listView/ListView.tsx

@@ -7,8 +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 = require('lodash/filter');
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 
 /**
  * File type icon component
@@ -517,7 +517,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     return (
       <div>
         {
-          showFilter && <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          showFilter && <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={this._updateFilterValue} value={filterValue}/>
         }
         <DetailsList
           key="ListViewControl"

src/controls/pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import styles from "./Pagination.module.scss";
 
 export interface IPaginationProps {

src/controls/treeView/TreeItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './TreeView.module.scss';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { IconButton } from 'office-ui-fabric-react';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import * as strings from 'ControlStrings';
 import { ITreeItem } from './ITreeItem';
 import { TreeViewSelectionMode } from './ITreeViewProps';