import * as React from 'react' ; import styles from './TilesList.module.scss' ; import { SelectionZone , List , IPageProps , FocusZone , IRenderFunction , IRectangle , css } from 'office-ui-fabric-react' ; import { IFile } from '../../../../services/FileBrowserService.types' ; import { FolderTile } from '../FolderTile' ; import { DocumentTile } from '../DocumentTile' ; import { ITilesListProps } from './ITilesListProps' ; /**
 * Rows per page
 */ const ROWS_PER_PAGE = 3 ; /**
 * Maximum row height
 */ const MAX_ROW_HEIGHT = 250 ; /**
 * Maximum number of cells per page
 */ const CELLS_PER_PAGE = 48 ; /**
 * Standard tile margin
 */ const STANDARD_TILE_MARGIN = 4 ; /**
 * Standard left and right padding
 */ const TILE_HORZ_PADDING = 32 ; /**
 * Standard bottom margin
 */ const BOTTOM_MARGIN = 36 ; const LAYOUT_STORAGE_KEY = 'comparerOneDriveLayout' ; export class TilesList extends React . Component < ITilesListProps > { private _columnCount : number ; private _columnWidth : number ; private _rowHeight : number ; private _listElem : List = undefined ; private _pageWidth : number ; constructor ( props ) { super ( props ) ; } public componentDidUpdate ( prevProps ) { if ( this . props . filePickerResult != prevProps . filePickerResult ) { this . _listElem . forceUpdate ( ) ; } } public render ( ) { return ( < SelectionZone selection = { this . props . selection } onItemInvoked = { ( item ) => { this . _handleItemInvoked ( item ) ; } } > < FocusZone > < List ref = { ( e ) => { this . _listElem = e ; } } className = { styles . folderList } items = { this . props . items } getItemCountForPage = { this . _getItemCountForPage } getPageHeight = { this . _getPageHeight } onRenderPage = { ( pageProps , defaultRender ? ) => this . _onRenderPage ( pageProps , defaultRender ) } /> < /FocusZone> < /SelectionZone>); } private _handleItemInvoked = ( item ) => { if ( item . isFolder ) { this . props . onFolderOpen ( item ) ; } else { this . props . onFileSelected ( item ) ; } } ; private _getItemCountForPage = ( itemIndex , surfaceRect ) : number => { if ( itemIndex === 0 ) { this . _columnCount = Math . ceil ( surfaceRect . width / MAX_ROW_HEIGHT ) ; this . _columnWidth = Math . floor ( surfaceRect . width / this . _columnCount ) ; this . _rowHeight = this . _columnWidth ; this . _pageWidth = surfaceRect . width ; } const { items } = this . props ; const isFolder = items && items . length > itemIndex && items [ itemIndex ] ? items [ itemIndex ] . isFolder : undefined ; let pageLength = 0 ; for ( let index = itemIndex ; index < items . length ; index ++ ) { const element = items [ index ] ; if ( element && element . isFolder === isFolder ) { pageLength ++ ; } else { break ; } } return Math . min ( pageLength , CELLS_PER_PAGE ) ; } ; private _onRenderPage = ( pageProps , _defaultRender ? ) : JSX . Element => { const { page , className : pageClassName , ... divProps } = pageProps ; const { items } = page ; if ( ! items ) { return null ; } return ( < div { ... divProps } className = { css ( pageClassName , styles . listPage ) } key = { page . key } > < div className = { styles . grid } style = { { width : this . _pageWidth , marginTop : - STANDARD_TILE_MARGIN , marginBottom : BOTTOM_MARGIN , marginLeft : - STANDARD_TILE_MARGIN , marginRight : - STANDARD_TILE_MARGIN } } > { items . map ( ( item , index ) => { return this . _onRenderCell ( item , index ) ; } ) } < /div> < /div>); } ; private _getPageHeight = ( ) : number => { return this . _rowHeight * ROWS_PER_PAGE ; } ; private _onRenderCell = ( item , index ) : JSX . Element => { if ( ! item ) { this . props . onNextPageDataRequest ( ) ; return null ; } let isSelected = this . props . filePickerResult && item . absoluteUrl == this . props . filePickerResult . fileAbsoluteUrl ; return ( < div className = { styles . listCell } data - item - index = { index } style = { { flexBasis : this . _columnWidth , maxWidth : this . _columnWidth , margin : STANDARD_TILE_MARGIN , borderStyle : "none" , borderWidth : 0 } } > < div role = "presentation" className = { styles . cell } style = { { paddingTop : "97.16%" } } > < div role = "presentation" className = { styles . cellContent } > { item . isFolder ? < FolderTile item = { item } index = { index } isSelected = { isSelected } pageWidth = { this . _pageWidth } tileDimensions = { { width : this . _columnWidth - TILE_HORZ_PADDING , height : this . _rowHeight - TILE_HORZ_PADDING } } onItemInvoked = { ( itemInvoked ) => this . _handleItemInvoked ( itemInvoked ) } /> : < DocumentTile fileBroserService = { this . props . fileBrowserService } item = { item } index = { index } isSelected = { isSelected } pageWidth = { this . _pageWidth } tileDimensions = { { width : this . _columnWidth - TILE_HORZ_PADDING , height : this . _rowHeight - TILE_HORZ_PADDING } } onItemInvoked = { ( itemInvoked ) => this . _handleItemInvoked ( itemInvoked ) } />} < /div> < /div> < /div>); } ; }