Refactor DocumentLibraryBrowser layout.

Fix bugs.

Author: Piotr Siatka

src/common/utilities/GeneralHelper.ts

@@ -6,6 +6,8 @@ import * as _ from '@microsoft/sp-lodash-subset';
 
 import * as strings from 'ControlStrings';
 
+export const IMG_SUPPORTED_EXTENSIONS = ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg";
+
 /**
  * Helper with general methods to simplify some routines
  */
@@ -241,15 +243,56 @@ export class GeneralHelper {
       return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + strings.SizeUnit[i];
     }
 
+    /**
+     * Returns file name without extension.
+     */
     public static getFileNameWithoutExtension(itemUrl : string) {
+      const fileNameWithExtension = GeneralHelper.getFileNameFromUrl(itemUrl);
+      const fileNameTokens = fileNameWithExtension.split(".");
+      const fileName = fileNameTokens[0];
+
+      return fileName;
+    }
+
+    /**
+     * Returns file name with the extension
+     */
+    public static getFileNameFromUrl(itemUrl : string) {
       const urlTokens = itemUrl.split("?");
       const url = urlTokens[0];
       const tokens = url.split("/");
       const fileNameWithExtension = tokens[tokens.length - 1];
-      const fileNameTokens = fileNameWithExtension.split(".");
-      const fileName = fileNameTokens[0];
 
-      return fileName;
+      return fileNameWithExtension;
+    }
+
+    public static isImage(fileName: string): boolean {
+      const acceptableExtensions: string[] = IMG_SUPPORTED_EXTENSIONS.split(",");
+      // const IMG_SUPPORTED_EXTENSIONS = ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg"
+
+      const thisExtension: string = GeneralHelper.getFileExtension(fileName);
+      return acceptableExtensions.indexOf(thisExtension) > -1;
+    }
+
+    /**
+     * Returns extension of the file
+     */
+    public static getFileExtension(fileName): string {
+
+      // Split the URL on the dots
+      const splitFileName = fileName.toLowerCase().split('.');
+
+      // Take the last value
+      let extensionValue = splitFileName.pop();
+
+      // Check if there are query string params in place
+      if (extensionValue.indexOf('?') !== -1) {
+        // Split the string on the question mark and return the first part
+        const querySplit = extensionValue.split('?');
+        extensionValue = querySplit[0];
+      }
+
+      return `.${extensionValue}`;
     }
 
     private static _getEncodedChar(c): string {

src/controls/filePicker/FilePicker.types.ts

@@ -1,4 +1,11 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
+import { IFile, ILibrary } from "../../services/FileBrowserService.types";
+
+export interface FilePickerBreadcrumbItem extends IBreadcrumbItem {
+  libraryData?: ILibrary;
+  folderData?: IFile;
+}
 
 export interface IFilePickerTab {
   context: WebPartContext;
@@ -8,7 +15,8 @@ export interface IFilePickerTab {
 }
 
 export interface IFilePickerResult {
-  fileTitle: string;
+  fileName: string;
+  fileNameWithoutExtension: string;
   fileAbsoluteUrl: string;
   file: File;
 }

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.module.scss

@@ -3,3 +3,14 @@
 .linkTextField {
   max-width: 640px;
 }
+
+.localTabSinglePreview {
+  margin-bottom: 20px;
+}
+
+.localTabSinglePreviewImage {
+  display: block;
+  max-width: 100%;
+  max-height: 220px;
+  image-orientation: from-image;
+}

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -48,7 +48,6 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
             value={fileUrl}
             onChanged={(newValue: string) => this._handleChange(newValue)}
           />
-
         </div>
 
         <div className={styles.actionButtonsContainer}>
@@ -70,7 +69,8 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
     const filePickerResult: IFilePickerResult = fileUrl && this._isUrl(fileUrl) ? {
       file: null,
       fileAbsoluteUrl: fileUrl,
-      fileTitle: GeneralHelper.getFileNameWithoutExtension(fileUrl)
+      fileName: GeneralHelper.getFileNameFromUrl(fileUrl),
+      fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(fileUrl)
     } : null;
     this.setState({
       filePickerResult
@@ -134,39 +134,6 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
     }
   }
 
-  /**
-   * Verifies that file ends with an image extension.
-   * Should really check the content type instead.
-   */
-  private _isImage = (fileName: string): boolean => {
-    const acceptableExtensions: string[] = this.props.accepts.toLowerCase().split(",");
-    // ".gif,.jpg,.jpeg,.bmp,.dib,.tif,.tiff,.ico,.png,.jxr,.svg"
-
-    const thisExtension: string = this._getFileExtension(fileName);
-    return acceptableExtensions.indexOf(thisExtension) > -1;
-  }
-
-  /**
-   * Inspired from the code in PnP controls
-   */
-  private _getFileExtension = (fileName): string => {
-
-    // Split the URL on the dots
-    const splitFileName = fileName.toLowerCase().split('.');
-
-    // Take the last value
-    let extensionValue = splitFileName.pop();
-
-    // Check if there are query string params in place
-    if (extensionValue.indexOf('?') !== -1) {
-      // Split the string on the question mark and return the first part
-      const querySplit = extensionValue.split('?');
-      extensionValue = querySplit[0];
-    }
-
-    return `.${extensionValue}`;
-  }
-
   private _isSameDomain = (fileUrl: string): boolean => {
     const siteUrl: string = this.props.context.pageContext.web.absoluteUrl;
     return GeneralHelper.getAbsoluteDomainUrl(siteUrl) === GeneralHelper.getAbsoluteDomainUrl(fileUrl);

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -23,6 +23,8 @@ import * as strings from 'ControlStrings';
 // PnP
 import { Placeholder } from '../../../Placeholder';
 import { IRecentFile } from '../../../services/FilesSearchService.types';
+import { IFilePickerResult } from '../FilePicker.types';
+import { GeneralHelper } from '../../../Utilities';
 
 /**
  * Rows per page
@@ -44,36 +46,10 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
   constructor(props: IRecentFilesTabProps) {
     super(props);
 
-    this._selection = new Selection(
-      {
-        selectionMode: SelectionMode.single,
-        onSelectionChanged: () => {
-          // 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;
-
-            // Save the selected file
-            this.setState({
-              filePickerResult:  {
-                file: null,
-                fileAbsoluteUrl: selectedKey.fileUrl,
-                fileTitle: selectedKey.name
-              }
-            });
-          } else {
-            // Remove any selected file
-            this.setState({
-              filePickerResult: undefined
-            });
-          }
-          if (this._listElem) {
-            // Force the list to update to show the selection check
-            this._listElem.forceUpdate();
-          }
-        }
-      });
+    this._selection = new Selection({
+      selectionMode: SelectionMode.single,
+      onSelectionChanged: this._onSelectionChanged
+    });
 
 
     this.state = {
@@ -127,6 +103,34 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
     );
   }
 
+  private _onSelectionChanged = () => {
+    // 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 = {
+        file: null,
+        fileAbsoluteUrl: selectedKey.fileUrl,
+        fileName: GeneralHelper.getFileNameFromUrl(selectedKey.fileUrl),
+        fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(selectedKey.fileUrl)
+      };
+      // Save the selected file
+      this.setState({
+        filePickerResult
+      });
+    } else {
+      // Remove any selected file
+      this.setState({
+        filePickerResult: undefined
+      });
+    }
+    if (this._listElem) {
+      // Force the list to update to show the selection check
+      this._listElem.forceUpdate();
+    }
+  }
+
   /**
      * Calculates how many items there should be in the page
      */
@@ -211,13 +215,13 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
             width: this._columnWidth,
             height: this._rowHeight
           }}
-          >
+        >
           <div className={styles.itemTileContent}>
             <div className={styles.itemTileFile}>
               <div className={styles.itemTileFileContainer}>
                 <div className={styles.itemTileThumbnail}>
                   {/* <div className={styles.image}> */}
-                    <Image src={item.fileUrl} width={this._columnWidth} height={this._rowHeight} imageFit={ImageFit.cover} />
+                  <Image src={item.fileUrl} width={this._columnWidth} height={this._rowHeight} imageFit={ImageFit.cover} />
                   {/* </div> */}
                 </div>
                 <div className={styles.itemTileCheckCircle}

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabState.ts

@@ -1,6 +1,4 @@
-import { IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
-import { SiteFilePickerBreadcrumbItem } from ".";
-import { IFilePickerResult } from "../FilePicker.types";
+import { IFilePickerResult , FilePickerBreadcrumbItem} from "../FilePicker.types";
 
 export interface ISiteFilePickerTabState {
   filePickerResult: IFilePickerResult;
@@ -9,5 +7,5 @@ export interface ISiteFilePickerTabState {
   libraryPath: string;
   folderName: string;
 
-  breadcrumbItems: SiteFilePickerBreadcrumbItem[];
+  breadcrumbItems: FilePickerBreadcrumbItem[];
 }

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -5,7 +5,7 @@ import { findIndex } from '@microsoft/sp-lodash-subset';
 import styles from './SiteFilePickerTab.module.scss';
 
 // Custom picker interface
-import { ISiteFilePickerTabProps, ISiteFilePickerTabState, SiteFilePickerBreadcrumbItem } from '.';
+import { ISiteFilePickerTabProps, ISiteFilePickerTabState } from '.';
 import { DocumentLibraryBrowser, FileBrowser } from '../controls';
 
 // Office Fabric
@@ -16,14 +16,14 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru
 import * as strings from 'ControlStrings';
 import { IFile, ILibrary } from '../../../services/FileBrowserService.types';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { IFilePickerResult } from '../FilePicker.types';
+import { IFilePickerResult, FilePickerBreadcrumbItem } from '../FilePicker.types';
 
 export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTabProps, ISiteFilePickerTabState> {
   constructor(props: ISiteFilePickerTabProps) {
     super(props);
 
     // Add current site to the breadcrumb or the provided node
-    const breadcrumbSiteNode: SiteFilePickerBreadcrumbItem = this.props.breadcrumbFirstNode ? this.props. breadcrumbFirstNode : {
+    const breadcrumbSiteNode: FilePickerBreadcrumbItem = this.props.breadcrumbFirstNode ? this.props. breadcrumbFirstNode : {
       isCurrentItem: true,
       text: props.context.pageContext.web.title,
       key: props.context.pageContext.web.id.toString()
@@ -81,7 +81,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
   /**
    * Handles breadcrump item click
    */
-  private onBreadcrumpItemClick = (node: SiteFilePickerBreadcrumbItem) => {
+  private onBreadcrumpItemClick = (node: FilePickerBreadcrumbItem) => {
     let { breadcrumbItems } = this.state;
     let breadcrumbClickedItemIndx = 0;
     // Site node clicked
@@ -146,7 +146,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
 
     if (addBreadcrumbNode) {
       breadcrumbItems.map(item => item.isCurrentItem = false);
-      const breadcrumbNode: SiteFilePickerBreadcrumbItem = {
+      const breadcrumbNode: FilePickerBreadcrumbItem = {
         folderData: folder,
         isCurrentItem: true,
         text: folder.name,
@@ -172,7 +172,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
     const { breadcrumbItems } = this.state;
     if (addBreadcrumbNode) {
       breadcrumbItems.map(item => item.isCurrentItem = false);
-      const breadcrumbNode: SiteFilePickerBreadcrumbItem = {
+      const breadcrumbNode: FilePickerBreadcrumbItem = {
         libraryData: library,
         isCurrentItem: true,
         text: library.title,

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.types.ts

@@ -1,5 +1,3 @@
 export * from './SiteFilePickerTab';
 export * from './ISiteFilePickerTabProps';
 export * from './ISiteFilePickerTabState';
-
-export * from './SiteFilePickerTab.types';

src/controls/filePicker/SiteFilePickerTab/index.ts

@@ -2,4 +2,5 @@ import { IFilePickerResult } from "../FilePicker.types";
 
 export interface IUploadFilePickerTabState {
   filePickerResult: IFilePickerResult;
+  filePreview?: string;
 }