import * as React from 'react' ; import { IOneDriveFilesTabProps } from './IOneDriveFilesTabProps' ; import { IOneDriveFilesTabState } from './IOneDriveFilesTabState' ; import { IFile } from '../../../services/FileBrowserService.types' ; import { OneDriveFilesBreadcrumbItem } from './OneDriveFilesTab.types' ; import { findIndex } from '@microsoft/sp-lodash-subset' ; import { Breadcrumb , IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb' ; import { FileBrowser } from '../controls' ; import { PrimaryButton , DefaultButton } from 'office-ui-fabric-react/lib/Button' ; import { Link } from 'office-ui-fabric-react/lib/Link' ; import { IFilePickerResult } from '../FilePicker.types' ; import styles from './OneDriveFilesTab.module.scss' ; import * as strings from 'ControlStrings' ; export class OneDriveFilesTab extends React . Component < IOneDriveFilesTabProps , IOneDriveFilesTabState > { constructor ( props ) { super ( props ) ; this . state = { filePickerResult : null , libraryAbsolutePath : undefined , libraryUrl : '/Documents' , folderPath : undefined , folderName : strings . DocumentLibraries , breadcrumbItems : [ ] } ; } public async componentDidMount ( ) { const folderPath = await this . props . oneDriveService . getOneDriveRootFolderRelativeUrl ( ) ; const libraryAbsolutePath = await this . props . oneDriveService . getOneDriveRootFolderFullUrl ( ) ; const libraryTitle = await this . props . oneDriveService . getOneDrivePersonalLibraryTitle ( ) ; const oneDriveFolderData = { isFolder : true , modified : null , modifiedDate : null , absoluteUrl : libraryAbsolutePath , name : libraryTitle , fileIcon : "" , serverRelativeUrl : folderPath , spItemUrl : "" , supportsThumbnail : false , fileType : "" } ; const breadcrumbItems = this . state . breadcrumbItems ; const breadcrumbNode = { folderData : oneDriveFolderData , isCurrentItem : true , text : oneDriveFolderData . name , key : oneDriveFolderData . absoluteUrl } ; breadcrumbNode . onClick = ( ) => { this . onBreadcrumpItemClick ( breadcrumbNode ) ; } ; breadcrumbItems . push ( breadcrumbNode ) ; this . setState ( { libraryAbsolutePath : libraryAbsolutePath , folderName : folderPath } ) ; } public render ( ) { return ( < div className = { styles . tabContainer } > < div className = { styles . tabHeaderContainer } > < Breadcrumb items = { this . state . breadcrumbItems } className = { styles . breadcrumbNav } / > < /div> < div className = { styles . tabFiles } > { this . state . libraryAbsolutePath !== undefined && < FileBrowser onChange = { ( filePickerResult ) => this . _handleSelectionChange ( filePickerResult ) } onOpenFolder = { ( folder ) => this . _handleOpenFolder ( folder , true ) } fileBrowserService = { this . props . oneDriveService } libraryUrl = { this . state . libraryUrl } folderPath = { this . state . folderPath } accepts = { this . props . accepts } / > } < /div> < div className = { styles . actionButtonsContainer } > < div className = { styles . actionButtons } > < PrimaryButton disabled = { ! this . state . filePickerResult } onClick = { ( ) => this . _handleSave ( ) } className = { styles . actionButton } > { strings . OpenButtonLabel } < /PrimaryButton> < DefaultButton onClick = { ( ) => this . _handleClose ( ) } className = { styles . actionButton } > { strings . CancelButtonLabel } < /DefaultButton> < /div> < /div> < /div>); } private renderBreadcrumbItem = ( item ) : JSX . Element => { return ( < Link href = { item . href } onClick = { item . onClick } key = { item . key } className = { `ms-Link ms-Breadcrumb-itemLink ${ styles . breadcrumbNavItem }` } > { item . text } < /Link>); } ; private onBreadcrumpItemClick = ( node ) => { let { breadcrumbItems } = this . state ; let breadcrumbClickedItemIndx = 0 ; if ( node . folderData == null ) { this . setState ( { libraryAbsolutePath : undefined , folderPath : undefined , folderName : undefined } ) ; } else if ( node . folderData != null ) { this . _handleOpenFolder ( node . folderData , false ) ; breadcrumbClickedItemIndx = findIndex ( breadcrumbItems , item => item . folderData && item . folderData . absoluteUrl === node . key ) ; } breadcrumbItems = breadcrumbItems . slice ( 0 , breadcrumbClickedItemIndx + 1 ) ; breadcrumbItems [ breadcrumbItems . length - 1 ] . isCurrentItem = true ; this . setState ( { breadcrumbItems , filePickerResult : undefined } ) ; } ; private _handleSelectionChange = ( filePickerResult ) => { if ( filePickerResult ) { filePickerResult . downloadFileContent = ( ) => { return this . props . oneDriveService . downloadSPFileContent ( filePickerResult . spItemUrl , filePickerResult . fileName ) ; } ; } this . setState ( { filePickerResult } ) ; } ; private _handleSave = ( ) => { this . props . onSave ( [ this . state . filePickerResult ] ) ; } ; private _handleClose = ( ) => { this . props . onClose ( ) ; } ; private _handleOpenFolder = ( folder , addBreadcrumbNode ) => { const { breadcrumbItems } = this . state ; if ( addBreadcrumbNode ) { breadcrumbItems . map ( item => item . isCurrentItem = false ) ; const breadcrumbNode = { folderData : folder , isCurrentItem : true , text : folder . name , key : folder . absoluteUrl } ; breadcrumbNode . onClick = ( ) => { this . onBreadcrumpItemClick ( breadcrumbNode ) ; } ; breadcrumbItems . push ( breadcrumbNode ) ; } this . setState ( { folderPath : folder . serverRelativeUrl , folderName : folder . name , libraryAbsolutePath : folder . absoluteUrl , breadcrumbItems } ) ; } ; }