import * as React from 'react' ; import { findIndex } from '@microsoft/sp-lodash-subset' ; import { ISiteFilePickerTabProps , ISiteFilePickerTabState } from '.' ; import { DocumentLibraryBrowser , FileBrowser } from '../controls' ; import { PrimaryButton , DefaultButton , Breadcrumb , IBreadcrumbItem , Link } from 'office-ui-fabric-react' ; import { IFile , ILibrary } from '../../../services/FileBrowserService.types' ; import { IFilePickerResult , FilePickerBreadcrumbItem } from '../FilePicker.types' ; import styles from './SiteFilePickerTab.module.scss' ; import * as strings from 'M365LPStrings' ; export default class SiteFilePickerTab extends React . Component < ISiteFilePickerTabProps , ISiteFilePickerTabState > { constructor ( props ) { super ( props ) ; const breadcrumbSiteNode = this . props . breadcrumbFirstNode ? this . props . breadcrumbFirstNode : { isCurrentItem : true , text : props . context . pageContext . web . title , key : props . context . pageContext . web . id . toString ( ) } ; breadcrumbSiteNode . onClick = ( ) => { this . onBreadcrumpItemClick ( breadcrumbSiteNode ) ; } ; this . state = { filePickerResult : null , libraryAbsolutePath : undefined , libraryTitle : strings . DocumentLibraries , libraryPath : undefined , folderName : strings . DocumentLibraries , breadcrumbItems : [ breadcrumbSiteNode ] } ; } public render ( ) { return ( < div className = { styles . tabContainer } > < div className = { styles . tabHeaderContainer } > < Breadcrumb items = { this . state . breadcrumbItems } onRenderItem = { this . renderBreadcrumbItem } className = { styles . breadcrumbNav } / > < /div> < div className = { styles . tabFiles } > { this . state . libraryAbsolutePath === undefined && < DocumentLibraryBrowser fileBrowserService = { this . props . fileBrowserService } onOpenLibrary = { ( selectedLibrary ) => this . _handleOpenLibrary ( selectedLibrary , true ) } />} { this . state . libraryAbsolutePath !== undefined && < FileBrowser onChange = { ( filePickerResult ) => this . _handleSelectionChange ( filePickerResult ) } onOpenFolder = { ( folder ) => this . _handleOpenFolder ( folder , true ) } fileBrowserService = { this . props . fileBrowserService } libraryName = { this . state . libraryTitle } folderPath = { this . state . libraryPath } 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 . libraryData == null && node . folderData == null ) { this . setState ( { libraryAbsolutePath : undefined , libraryPath : undefined , folderName : undefined } ) ; } else if ( node . folderData != null ) { this . _handleOpenFolder ( node . folderData , false ) ; breadcrumbClickedItemIndx = findIndex ( breadcrumbItems , item => item . folderData && item . folderData . absoluteUrl === node . key ) ; } else if ( node . libraryData != null ) { this . _handleOpenLibrary ( node . libraryData , false ) ; breadcrumbClickedItemIndx = findIndex ( breadcrumbItems , item => item . libraryData && item . libraryData . serverRelativeUrl === 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 . fileBrowserService . downloadSPFileContent ( filePickerResult . fileAbsoluteUrl , 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 ( { filePickerResult : null , libraryPath : folder . serverRelativeUrl , folderName : folder . name , libraryAbsolutePath : folder . absoluteUrl , breadcrumbItems } ) ; } ; private _handleOpenLibrary = ( library , addBreadcrumbNode ) => { const { breadcrumbItems } = this . state ; if ( addBreadcrumbNode ) { breadcrumbItems . map ( item => item . isCurrentItem = false ) ; const breadcrumbNode = { libraryData : library , isCurrentItem : true , text : library . title , key : library . serverRelativeUrl } ; breadcrumbNode . onClick = ( ) => { this . onBreadcrumpItemClick ( breadcrumbNode ) ; } ; breadcrumbItems . push ( breadcrumbNode ) ; } this . setState ( { libraryAbsolutePath : library . absoluteUrl , libraryTitle : library . title , libraryPath : library . serverRelativeUrl , breadcrumbItems } ) ; } ; }