wip

Author: AJIXuMuK

src/controls/filePicker/controls/TilesList/TilesList.tsx

@@ -39,8 +39,6 @@ const TILE_HORZ_PADDING: number = 32;
  */
 const BOTTOM_MARGIN: number = 36;
 
-const LAYOUT_STORAGE_KEY: string = 'comparerOneDriveLayout';
-
 
 export class TilesList extends React.Component<ITilesListProps> {
   private _columnCount: number;
@@ -53,18 +51,18 @@ export class TilesList extends React.Component<ITilesListProps> {
     super(props);
   }
 
-  public componentDidUpdate(prevProps: ITilesListProps) {
+  public componentDidUpdate(prevProps: ITilesListProps): void {
     if (this.props.filePickerResult !== prevProps.filePickerResult) {
       this._listElem.forceUpdate();
     }
   }
 
   public render(): React.ReactElement<ITilesListProps> {
     return (
-      <SelectionZone selection={this.props.selection} onItemInvoked={(item: IFile) => {this._handleItemInvoked(item);}}>
+      <SelectionZone selection={this.props.selection} onItemInvoked={(item: IFile) => { this._handleItemInvoked(item); }}>
         <FocusZone>
           <List
-            ref={(e:any) => { this._listElem = e; }}
+            ref={(e: List) => { this._listElem = e; }}
             className={styles.folderList}
             items={this.props.items}
             getItemCountForPage={this._getItemCountForPage}
@@ -79,20 +77,20 @@ export class TilesList extends React.Component<ITilesListProps> {
   /**
   * Gets called what a file is selected.
   */
- private _handleItemInvoked = (item: IFile) => {
-  // If a file is selected, open the library
-  if (item.isFolder) {
-    this.props.onFolderOpen(item);
-  } else {
-    // Otherwise, remember it was selected
-    this.props.onFileSelected(item);
+  private _handleItemInvoked = (item: IFile): void => {
+    // If a file is selected, open the library
+    if (item.isFolder) {
+      this.props.onFolderOpen(item);
+    } else {
+      // Otherwise, remember it was selected
+      this.props.onFileSelected(item);
+    }
   }
-}
 
   /**
     * Calculates how many items there should be in the page
     */
-   private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
+  private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
     if (itemIndex === 0) {
       this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
       this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
@@ -165,7 +163,7 @@ export class TilesList extends React.Component<ITilesListProps> {
       this.props.onNextPageDataRequest();
       return null;
     }
-    let isSelected: boolean = this.props.filePickerResult && item.absoluteUrl === this.props.filePickerResult.fileAbsoluteUrl;
+    const isSelected: boolean = this.props.filePickerResult && item.absoluteUrl === this.props.filePickerResult.fileAbsoluteUrl;
 
     // I know this is a lot of divs and spans inside of each other, but my
     // goal was to mimic the HTML and style of the out-of-the-box file picker
@@ -203,7 +201,7 @@ export class TilesList extends React.Component<ITilesListProps> {
                   }}
                   onItemInvoked={(itemInvoked: IFile) => this._handleItemInvoked(itemInvoked)}
                 />
-              :
+                :
                 <DocumentTile
                   fileBroserService={this.props.fileBrowserService}
                   item={item}
@@ -216,7 +214,7 @@ export class TilesList extends React.Component<ITilesListProps> {
                   }}
                   onItemInvoked={(itemInvoked: IFile) => this._handleItemInvoked(itemInvoked)}
                 />
-              }
+            }
           </div>
         </div>
       </div>

src/controls/fileTypeIcon/FileTypeIcon.test.tsx

@@ -1,12 +1,10 @@
 /// <reference types="sinon" />
 
 import * as React from 'react';
-import { assert, expect } from 'chai';
+import { expect } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
 import { FileTypeIcon } from './FileTypeIcon';
-import { IFileTypeIconProps, IconType, ApplicationType, ImageSize } from './IFileTypeIcon';
-
-declare const sinon;
+import { IconType, ApplicationType, ImageSize } from './IFileTypeIcon';
 
 describe('<FileTypeIcon />', () => {
   let fileTypeIcon: ReactWrapper;

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -3,7 +3,6 @@ import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96, ImageInformation } from './IFileTypeIcon';
 import * as telemetry from '../../common/telemetry';
 import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
-import * as styles from './FileTypeIcon.module.scss';
 import { ICON_GENERIC_20 } from '.';
 
 const ICON_GENERIC = 'Page';

src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx

@@ -31,7 +31,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
     };
   }
 
-  public async componentDidMount() {
+  public async componentDidMount(): Promise<void> {
     const targetFolder = this.props.defaultFolder ? this.props.defaultFolder : this.props.rootFolder;
     const siteAbsoluteUrl: string = this.props.siteAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
     // get libraries if site absolute url does not end with folder relative url - if not retrieving document libraries by default
@@ -64,7 +64,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
             <div>
               {this.state.folders.map((folder) => {
                 return (
-                  <div className={styles.libraryItem} onClick={() => { this._getFolders(folder); }}>
+                  <div className={styles.libraryItem} key={folder.ServerRelativeUrl} onClick={() => { this._getFolders(folder).then(() => { /* no-op; */ }).catch(() => { /* no-op; */ }); }}>
                     <Icon iconName="FabricFolder" className={styles.folderIcon} />
                     {folder.Name}
                   </div>
@@ -77,7 +77,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
             <NewFolder context={this.props.context}
               siteAbsoluteUrl={siteAbsoluteUrl}
               selectedFolder={this.state.selectedFolder}
-              addSubFolder={this._addSubFolder}></NewFolder>
+              addSubFolder={this._addSubFolder} />
           }
         </div>
       </div>
@@ -91,8 +91,8 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
   private _getBreadcrumbDOM = (): JSX.Element => {
     let breadCrumbDOM = null;
 
-    let breadCrumbItems = this._getCurrentBreadcrumbItems();
-    let overflowIndex = breadCrumbItems.length > 1 ? 1 : 0;
+    const breadCrumbItems = this._getCurrentBreadcrumbItems();
+    const overflowIndex = breadCrumbItems.length > 1 ? 1 : 0;
     breadCrumbDOM = <Breadcrumb items={breadCrumbItems} className={styles.breadcrumbPath} maxDisplayedItems={3} overflowIndex={overflowIndex} />;
 
     return breadCrumbDOM;
@@ -109,7 +109,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
       items = [...this.props.initialBreadcrumbItems];
     }
 
-    let rootItem: IBreadcrumbItem = { text: this.props.rootFolder.Name, key: 'Root-Item', onClick: this._getFolders.bind(this, this.props.rootFolder) };
+    const rootItem: IBreadcrumbItem = { text: this.props.rootFolder.Name, key: 'Root-Item', onClick: this._getFolders.bind(this, this.props.rootFolder) };
     items.push(rootItem);
 
     if (this.state.selectedFolder && this.state.selectedFolder.ServerRelativeUrl !== this.props.rootFolder.ServerRelativeUrl) {
@@ -125,7 +125,7 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
             itemText = lib[0].Name;
           }
 
-          let folderItem: IBreadcrumbItem = { text: itemText, key: `Folder-${index.toString()}`, onClick: this._getFolders.bind(this, { Name: folderName, ServerRelativeUrl: folderPath }) };
+          const folderItem: IBreadcrumbItem = { text: itemText, key: `Folder-${index.toString()}`, onClick: this._getFolders.bind(this, { Name: folderName, ServerRelativeUrl: folderPath }) };
           items.push(folderItem);
         }
       });

src/controls/folderExplorer/NewFolder/NewFolder.tsx

@@ -47,7 +47,7 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
           }} /></span>
         }
         {!this.state.loading &&
-          <Icon iconName="FabricNewFolder" className={styles.folderIcon}></Icon>
+          <Icon iconName="FabricNewFolder" className={styles.folderIcon} />
         }
         {!this.state.showInput &&
           <div className={styles.defaultText} onClick={this._onShowInputChange}>New folder</div>
@@ -82,11 +82,11 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
     );
   }
 
-  private _onFolderNameChange = (newValue?: string) => {
+  private _onFolderNameChange = (newValue?: string): void => {
     this.setState({ folderName: newValue || '', errorMessage: '' });
   }
 
-  private _onShowInputChange = (event: React.MouseEvent<HTMLDivElement>) => {
+  private _onShowInputChange = (event: React.MouseEvent<HTMLDivElement>): void => {
     this.setState({ showInput: true });
   }
 
@@ -122,6 +122,6 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
     }
 
     // callback
-    this.props.addSubFolder(newFolder);
+    this.props.addSubFolder(newFolder).then(() => { /* no-op; */}).catch(() => { /* no-op; */ });
   }
 }

src/controls/folderPicker/FolderPicker.tsx

@@ -27,7 +27,7 @@ export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPic
     };
   }
 
-  public UNSAFE_componentWillReceiveProps(nextProps: IFolderPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFolderPickerProps): void {
 
     this.setState({
       selectedFolder: nextProps.defaultFolder,
@@ -95,15 +95,15 @@ export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPic
     );
   }
 
-  private _showPanel = () => {
+  private _showPanel = (): void => {
     this.setState({ showPanel: true });
   }
 
-  private _hidePanel = () => {
+  private _hidePanel = (): void => {
     this.setState({ showPanel: false });
   }
 
-  private _onRenderFooterContent = () => {
+  private _onRenderFooterContent = (): JSX.Element => {
     return (
       <div className={styles.actions}>
         <PrimaryButton iconProps={{ iconName: 'Save' }} onClick={this._onFolderSave}>

src/controls/gridLayout/GridLayout.test.tsx

@@ -1,7 +1,7 @@
 /// <reference types="sinon" />
 
 import * as React from 'react';
-import { assert, expect } from 'chai';
+import { expect } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
 import { GridLayout } from './GridLayout';
 
@@ -18,12 +18,18 @@ import {
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { ISize } from 'office-ui-fabric-react/lib/Utilities';
 
-
-declare const sinon;
+interface IDummyItem {
+  thumbnail: string;
+  title: string;
+  name: string;
+  profileImageSrc: string;
+  location: string;
+  activity: string;
+}
 
 describe('<GridLayout />', () => {
   let gridLayout: ReactWrapper;
-  const dummyItems: any[] = [{
+  const dummyItems: IDummyItem[] = [{
     thumbnail: "https://pixabay.com/get/57e9dd474952a414f1dc8460825668204022dfe05555754d742e7bd6/hot-air-balloons-1984308_640.jpg",
     title: "Adventures in SPFx",
     name: "Perry Losselyong",
@@ -60,9 +66,7 @@ describe('<GridLayout />', () => {
     activity: "5/26/2019"
   }];
 
-  const dummyOnClick = sinon.spy((evt) => { /* Nothing to do here */ });
-
-  const dummyOnRenderGridItem = (item: any, _finalSize: ISize, isCompact: boolean): JSX.Element => {
+  const dummyOnRenderGridItem = (item: IDummyItem, _finalSize: ISize, isCompact: boolean): JSX.Element => {
     const previewProps: IDocumentCardPreviewProps = {
       previewImages: [
         {
@@ -105,7 +109,7 @@ describe('<GridLayout />', () => {
   });
 
   it('Test grid layout', (done) => {
-    gridLayout = mount(<GridLayout items={dummyItems} onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean)=>dummyOnRenderGridItem(item, finalSize, isCompact)} />);
+    gridLayout = mount(<GridLayout items={dummyItems} onRenderGridItem={(item: IDummyItem, finalSize: ISize, isCompact: boolean) => dummyOnRenderGridItem(item, finalSize, isCompact)} />);
     expect(gridLayout.find('.ms-List-surface')).to.have.length(1);
     done();
   });

src/controls/gridLayout/GridLayout.tsx

@@ -93,7 +93,7 @@ export class GridLayout extends React.Component<IGridLayoutProps, IGridLayoutSta
   /**
    * Calls the passed onRenderCell
    */
-  private _onRenderCell = (item: any, index: number | undefined): JSX.Element => {
+  private _onRenderCell = (item: any, index: number | undefined): JSX.Element => { // eslint-disable-line @typescript-eslint/no-explicit-any
     const isCompact: boolean = this._isCompact;
     const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && !isCompact ? PADDING : 0;
     const finalSize: ISize = { width: this._columnWidth, height: this._rowHeight };

src/controls/gridLayout/GridLayout.types.ts

@@ -5,7 +5,7 @@ export interface IGridLayoutProps {
   /**
    * The array of items to display.
    */
-  items: any[];
+  items: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /**
    * In case you want to override the underlying list
@@ -16,7 +16,7 @@ export interface IGridLayoutProps {
   /**
    * The method to render each cell item
    */
-  onRenderGridItem: (item: any, finalSize: ISize, isCompact: boolean) => JSX.Element;
+  onRenderGridItem: (item: any, finalSize: ISize, isCompact: boolean) => JSX.Element; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export interface IGridLayoutState {}

src/controls/iFrameDialog/IFrameDialog.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Dialog, IDialogContentProps, IDialogProps, IDialogStyleProps, IDialogStyles } from 'office-ui-fabric-react/lib/Dialog';
 import { IFrameDialogContent } from './IFrameDialogContent';
 import * as telemetry from '../../common/telemetry';
@@ -16,7 +15,7 @@ export interface IFrameDialogProps extends IDialogProps {
   /**
    * iframe's onload event handler
    */
-  iframeOnLoad?: (iframe: any) => void;
+  iframeOnLoad?: (iframe: HTMLIFrameElement) => void;
   /**
    * iframe width
    */
@@ -61,7 +60,7 @@ export interface IFrameDialogProps extends IDialogProps {
 }
 
 export interface IFrameDialogState {
-  dialogId: string | null;
+  dialogId: string | undefined;
   isStylingSet?: boolean;
 }
 
@@ -96,7 +95,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
     this.setDialogStyling();
   }
 
-  public UNSAFE_componentWillReceiveProps(nextProps: IFrameDialogProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFrameDialogProps): void {
     if (nextProps.hidden && nextProps.hidden !== this.props.hidden) {
       this.setState({
         isStylingSet: false
@@ -126,7 +125,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
       className
     } = this.props;
 
-    let dlgModalProps = {
+    const dlgModalProps = {
       ...modalProps,
       onLayerDidMount: () => { this.setDialogStyling(); }
     };