Changed single selection to multiple selection for Recent, OneDrive and Site Files tabs in FilePicker component

src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts

@@ -2,7 +2,7 @@ import { OneDriveFilesBreadcrumbItem } from "./OneDriveFilesTab.types";
 import { IFilePickerResult } from "../FilePicker.types";
 
 export interface IOneDriveFilesTabState {
-  filePickerResult: IFilePickerResult;
+  filePickerResults: IFilePickerResult[];
   libraryAbsolutePath: string;
   libraryUrl: string;
   folderPath: string;

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -18,7 +18,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
     super(props);
 
     this.state = {
-      filePickerResult: null,
+      filePickerResults: [],
       libraryAbsolutePath: undefined,
       libraryUrl: '/Documents',
       folderPath: undefined,
@@ -66,12 +66,12 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
     return (
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
-          <Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav}/>
+          <Breadcrumb items={this.state.breadcrumbItems} /*onRenderItem={this.renderBreadcrumbItem}*/ className={styles.breadcrumbNav} />
         </div>
         <div className={styles.tabFiles}>
           {this.state.libraryAbsolutePath !== undefined &&
             <FileBrowser
-              onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
+              onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
               onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
               fileBrowserService={this.props.oneDriveService}
               libraryUrl={this.state.libraryUrl}
@@ -81,7 +81,7 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
-              disabled={!this.state.filePickerResult}
+              disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
               onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
             <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
           </div>
@@ -124,27 +124,26 @@ export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IO
 
     this.setState({
       breadcrumbItems,
-      filePickerResult: undefined
+      filePickerResults: []
     });
   }
 
   /**
    * Is called when user selects a different file
    */
-  private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
-    if (filePickerResult) {
+  private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
+    filePickerResults.map((filePickerResult: IFilePickerResult) => {
       filePickerResult.downloadFileContent = () => { return this.props.oneDriveService.downloadSPFileContent(filePickerResult.spItemUrl, filePickerResult.fileName); };
-    }
-    this.setState({
-      filePickerResult
     });
+
+    this.setState({ filePickerResults });
   }
 
   /**
    * Called when user saves
    */
   private _handleSave = () => {
-    this.props.onSave([this.state.filePickerResult]);
+    this.props.onSave(this.state.filePickerResults);
   }
 
   /**

src/controls/filePicker/RecentFilesTab/IRecentFilesTabState.ts

@@ -4,5 +4,5 @@ import { IRecentFile } from "../../../services/FilesSearchService.types";
 export interface IRecentFilesTabState {
   results: IRecentFile[];
   isLoading: boolean;
-  filePickerResult: IFilePickerResult;
+  filePickerResults: IFilePickerResult[];
 }

src/controls/filePicker/RecentFilesTab/RecentFilesTab.module.scss

@@ -131,12 +131,11 @@
   }
 }
 
-.gridListCell.isSelected .itemTileCheckCircle,
-.gridListCell:hover,
-.gridListCell:hover .itemTileCheckCircle {
-  opacity: 1;
+.itemTile.isSelected {
+  .itemTileCheckCircle {
+    opacity: 1;
+  }
 }
-
 .itemTileNamePlate {
   position: absolute;
   bottom:0;

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -39,16 +39,13 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
   constructor(props: IRecentFilesTabProps) {
     super(props);
 
-    this._selection = new Selection({
-      selectionMode: SelectionMode.single,
-      onSelectionChanged: this._onSelectionChanged
-    });
+    this._selection = null;
 
 
     this.state = {
       isLoading: true,
       results: [],
-      filePickerResult: null
+      filePickerResults: []
     };
   }
 
@@ -57,6 +54,10 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
    */
   public async componentDidMount() {
     const recentFilesResult = await this.props.fileSearchService.executeRecentSearch(this.props.accepts);
+    this._selection = new Selection({
+      selectionMode: SelectionMode.multiple,
+      onSelectionChanged: this._onSelectionChanged
+    });
     this._selection.setItems(recentFilesResult, true);
 
     this.setState({
@@ -85,7 +86,7 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
-              disabled={!this.state.filePickerResult}
+              disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
               onClick={() => this._handleSave()}
               className={styles.actionButton}
             >{strings.OpenButtonLabel}</PrimaryButton>
@@ -97,28 +98,20 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
   }
 
   private _onSelectionChanged = () => {
+    let filePickerResults: IFilePickerResult[] = [];
     // Get the selected item
-    const selectedItems = this._selection.getSelection();
-    if (selectedItems && selectedItems.length > 0) {
-      //Get the selected key
-      const selectedKey: IRecentFile = selectedItems[0] as IRecentFile;
-      const filePickerResult: IFilePickerResult = {
+    this._selection.getSelection().map((selectedKey: IRecentFile) => {
+      if(!selectedKey.isFolder && selectedKey.fileUrl)
+      filePickerResults.push({
         fileAbsoluteUrl: selectedKey.fileUrl,
         fileName: GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl),
         fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl),
         downloadFileContent: () => { return this.props.fileSearchService.downloadSPFileContent(selectedKey.fileUrl, GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl)); }
-      };
-
-      // Save the selected file
-      this.setState({
-        filePickerResult
       });
-    } else {
-      // Remove any selected file
-      this.setState({
-        filePickerResult: undefined
-      });
-    }
+    });
+
+    this.setState({ filePickerResults });
+
     if (this._listElem) {
       // Force the list to update to show the selection check
       this._listElem.forceUpdate();
@@ -168,7 +161,8 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
     return <span className={styles.recentGridList} role="grid">
       <FocusZone>
         <SelectionZone selection={this._selection}
-          onItemInvoked={(item: IRecentFile) => this._handleItemInvoked(item)}>
+          selectionMode={SelectionMode.multiple}
+          onItemInvoked={(item: any) => this._handleItemInvoked(item)}>
           <List
             ref={this._linkElement}
             items={this.state.results}
@@ -188,8 +182,8 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
   private _onRenderCell = (item: IRecentFile, index: number | undefined): JSX.Element => {
     let isSelected: boolean = false;
 
-    if (this._selection && index !== undefined) {
-      isSelected = this._selection.isIndexSelected(index);
+    if (this._selection) {
+      isSelected = this._selection.isKeySelected(item.key);
     }
 
     return (
@@ -242,14 +236,16 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
    * Gets called what a file is selected.
    */
   private _handleItemInvoked = (item: IRecentFile) => {
-    this._selection.setKeySelected(item.key, true, true);
+    if(!item.isFolder) {
+      this._selection.toggleKeySelected(item.key);
+    }
   }
 
   /**
    * Gets called when it is time to save the currently selected item
    */
   private _handleSave = () => {
-    this.props.onSave([this.state.filePickerResult]);
+    this.props.onSave(this.state.filePickerResults);
   }
 
   /**

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts

@@ -1,7 +1,7 @@
 import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types";
 
 export interface ISiteFilePickerTabState {
-  filePickerResult: IFilePickerResult;
+  filePickerResults: IFilePickerResult[];
   libraryAbsolutePath: string;
   libraryUrl: string;
   libraryPath: string;

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -45,7 +45,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;
 
     this.state = {
-      filePickerResult: null,
+      filePickerResults: [],
       libraryAbsolutePath: folderAbsPath || undefined,
       libraryUrl: libraryServRelUrl || urlCombine(props.context.pageContext.web.serverRelativeUrl, '/Shared%20Documents'),
       libraryPath: folderServRelPath,
@@ -157,7 +157,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
               onOpenLibrary={(selectedLibrary: ILibrary) => this._handleOpenLibrary(selectedLibrary, true)} />}
           {this.state.libraryAbsolutePath !== undefined &&
             <FileBrowser
-              onChange={(filePickerResult: IFilePickerResult) => this._handleSelectionChange(filePickerResult)}
+              onChange={(filePickerResults: IFilePickerResult[]) => this._handleSelectionChange(filePickerResults)}
               onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
               fileBrowserService={this.props.fileBrowserService}
               libraryUrl={this.state.libraryUrl}
@@ -167,7 +167,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
-              disabled={!this.state.filePickerResult}
+              disabled={this.state.filePickerResults && !this.state.filePickerResults.length}
               onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
             <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
           </div>
@@ -215,28 +215,26 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
 
     this.setState({
       breadcrumbItems,
-      filePickerResult: undefined
+      filePickerResults: undefined
     });
   }
 
   /**
    * Is called when user selects a different file
    */
-  private _handleSelectionChange = (filePickerResult: IFilePickerResult) => {
-    if (filePickerResult) {
+  private _handleSelectionChange = (filePickerResults: IFilePickerResult[]) => {
+    filePickerResults.map((filePickerResult: IFilePickerResult) => {
       filePickerResult.downloadFileContent = () => { return this.props.fileBrowserService.downloadSPFileContent(filePickerResult.fileAbsoluteUrl, filePickerResult.fileName); };
-    }
-    // this.props.fileBrowserService
-    this.setState({
-      filePickerResult
     });
+    // this.props.fileBrowserService
+    this.setState({ filePickerResults });
   }
 
   /**
    * Called when user saves
    */
   private _handleSave = () => {
-    this.props.onSave([this.state.filePickerResult]);
+    this.props.onSave(this.state.filePickerResults);
   }
 
   /**
@@ -265,7 +263,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     }
 
     this.setState({
-      filePickerResult: null,
+      filePickerResults: null,
       libraryPath: folder.serverRelativeUrl,
       folderName: folder.name,
       libraryAbsolutePath: folder.absoluteUrl,