Merge pull request #751 from nbelyh/feature/folder_explorer_renderers

Custom render callbacks for the "Upload" and "Link" tabs

Author: AJIXuMuK

docs/documentation/docs/controls/FilePicker.md

@@ -76,6 +76,8 @@ The FilePicker component can be configured with the following properties:
 | hideLocalUploadTab | boolean | no | Specifies if LocalUploadTab should be hidden. |
 | hideLinkUploadTab | boolean | no | Specifies if LinkUploadTab should be hidden. |
 | storeLastActiveTab | boolean | no | Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default `true` |
+| renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element | null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
+| renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element | null | no | Optional renderer to add custom user-defined fields to "Link" tab |
 
 interface `IFilePickerResult`
 

src/controls/filePicker/FilePicker.tsx

@@ -121,13 +121,15 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
               this.state.selectedTab === "keyLink" &&
               <LinkFilePickerTab
                 fileSearchService={this.fileSearchService}
+                renderCustomLinkTabContent={this.props.renderCustomLinkTabContent}
                 allowExternalTenantLinks={true}
                 {...linkTabProps}
               />
             }
             {
               this.state.selectedTab === "keyUpload" &&
               <UploadFilePickerTab
+                renderCustomUploadTabContent={this.props.renderCustomUploadTabContent}
                 {...linkTabProps}
                 onChange={this._handleOnChange}
               />

src/controls/filePicker/IFilePickerProps.ts

@@ -121,4 +121,12 @@ export interface IFilePickerProps {
    * Handler when file picker has been cancelled.
    */
   onCancel?: () => void;
+  /**
+   * Optional additional renderer for Link tab
+   */
+  renderCustomLinkTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+  /**
+   * Optional additional renderer for Upload tab
+   */
+  renderCustomUploadTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
 }

src/controls/filePicker/LinkFilePickerTab/ILinkFilePickerTabProps.ts

@@ -1,7 +1,8 @@
-import { IFilePickerTab } from "../FilePicker.types";
+import { IFilePickerTab, IFilePickerResult } from "../FilePicker.types";
 import { FilesSearchService } from "../../../services/FilesSearchService";
 
 export interface ILinkFilePickerTabProps extends IFilePickerTab {
   allowExternalTenantLinks: boolean;
   fileSearchService: FilesSearchService;
+  renderCustomLinkTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null;
 }

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -45,6 +45,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
             value={fileUrl}
             onChanged={(newValue: string) => this._handleChange(newValue)}
           />
+          {this.props.renderCustomLinkTabContent && this.props.renderCustomLinkTabContent(this.state.filePickerResult)}
         </div>
 
         <div className={styles.actionButtonsContainer}>

src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts

@@ -2,4 +2,5 @@ import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types";
 
 export interface IUploadFilePickerTabProps extends IFilePickerTab {
   onChange: (value: IFilePickerResult) => void;
+  renderCustomUploadTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null;
 }

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -52,6 +52,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
           <label className={styles.localTabLabel} htmlFor="fileInput">{
             (fileName ? strings.ChangeFileLinkLabel : strings.ChooseFileLinkLabel)
           }</label>
+          {this.props.renderCustomUploadTabContent && this.props.renderCustomUploadTabContent(this.state.filePickerResult)}
         </div>
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -56,7 +56,7 @@ import {
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { FilePicker, IFilePickerResult } from '../../../FilePicker';
 import { FolderPicker } from '../../../FolderPicker';
-import { FolderExplorer, IFolder, IBreadcrumbItem } from '../../../FolderExplorer';
+import { FolderExplorer, IBreadcrumbItem, IFolder } from '../../../FolderExplorer';
 import { Pagination } from '../../../controls/pagination';
 import CarouselImage from '../../../controls/carousel/CarouselImage';
 import { FieldCollectionData, CustomCollectionFieldType } from '../../../FieldCollectionData';
@@ -522,6 +522,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     }
   }
 
+  private rootFolder: IFolder = {
+    Name: "Site",
+    ServerRelativeUrl: this.props.context.pageContext.web.serverRelativeUrl
+  };
+  
   private _onFolderSelect = (folder: IFolder): void => {
     console.log('selected folder', folder);
 
@@ -1275,6 +1280,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         </div>
 
         <div>
+          <h3>File Picker</h3>
           <FilePicker
             bingAPIKey="<BING API KEY>"
             //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
@@ -1298,6 +1304,27 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           }
         </div>
 
+        <div>
+          <h3>File Picker with target folder browser</h3>
+          <FilePicker
+            bingAPIKey="<BING API KEY>"
+            //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
+            buttonLabel="Upload image"
+            buttonIcon="FileImage"
+            onSave={this._onFilePickerSave}
+            onChange={(filePickerResult: IFilePickerResult) => { console.log(filePickerResult.fileName); }}
+            context={this.props.context}
+            hideRecentTab={false}
+            renderCustomUploadTabContent={() => (
+              <FolderExplorer context={this.props.context}
+                rootFolder={this.rootFolder}
+                defaultFolder={this.rootFolder}
+                onSelect={this._onFolderSelect}
+                canCreateFolders={true}
+            />)}
+          />
+        </div>
+
         <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>
         <div>
           <Progress title={'Progress Test'}