Add paged data support.

Fix OneDrive items handle.
Add scrollable panel for files pane.

Author: Piotr Siatka

src/controls/filePicker/FilePicker.module.scss

@@ -159,6 +159,16 @@
   -ms-flex-positive: 2;
   flex-grow: 2;
 }
+.tabFiles {
+  overflow-y: auto;
+  -webkit-box-flex: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+}
+.scrollablePaneWrapper {
+  height: 75vh;
+  position: 'relative';
+}
 
 .actionButtonsContainer {
   display: -webkit-box;
@@ -172,6 +182,7 @@
   background-color: $ms-color-white;
   -ms-flex-negative: 0;
   flex-shrink: 0;
+  z-index: 100;
 }
 
 .actionButtons {

src/controls/filePicker/FilePicker.tsx

@@ -18,14 +18,12 @@ import UploadFilePickerTab from './UploadFilePickerTab/UploadFilePickerTab';
 import SiteFilePickerTab from './SiteFilePickerTab/SiteFilePickerTab';
 import WebSearchTab from './WebSearchTab/WebSearchTab';
 import RecentFilesTab from './RecentFilesTab/RecentFilesTab';
-import OneDriveTab from './OneDriveTab/OneDriveTab';
 
 import styles from './FilePicker.module.scss';
 import { FileBrowserService } from '../../services/FileBrowserService';
 import { OneDriveFilesTab } from './OneDriveFilesTab';
 import { OneDriveService } from '../../services/OneDriveService';
 
-
 export class FilePicker extends React.Component<IFilePickerProps, IFilePickerState> {
   private fileBrowserService: FileBrowserService;
   private oneDriveService: OneDriveService;

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -11,6 +11,7 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
 
 import styles from './OneDriveFilesTab.module.scss';
 import * as strings from 'ControlStrings';
+import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 
 export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IOneDriveFilesTabState> {
   constructor(props: IOneDriveFilesTabProps) {
@@ -58,14 +59,18 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
   }
 
   public render(): React.ReactElement<IOneDriveFilesTabProps> {
+    const listStyle = mergeStyles({
+      flex: "1 1 auto",
+      overflowX: "hidden",
+      overflowY: "auto"
+  });
     return (
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
           { /** TODO: Fix breadcrumb styles */}
           <Breadcrumb items={this.state.breadcrumbItems} className={styles.tabHeader}/>
         </div>
-        <div className={styles.tab}>
-
+        <div className={styles.tabFiles}>
           {this.state.libraryAbsolutePath !== undefined &&
             <FileBrowser
               onChange={(fileUrl: string) => this._handleSelectionChange(fileUrl)}