import * as React from 'react' ; import styles from './GridLayout.module.scss' ; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone' ; import { List } from 'office-ui-fabric-react/lib/List' ; import { IRectangle , ISize } from 'office-ui-fabric-react/lib/Utilities' ; import { IGridLayoutProps , IGridLayoutState } from './GridLayout.types' ; import * as telemetry from '../../common/telemetry' ; const ROWS_PER_PAGE = + styles . rowsPerPage ; const MAX_ROW_HEIGHT = + styles . maxWidth ; const PADDING = + styles . padding ; const MIN_WIDTH = + styles . minWidth ; const COMPACT_THRESHOLD = + styles . compactThreshold ; /**
 * Grid layout component
 */ export class GridLayout extends React . Component < IGridLayoutProps , IGridLayoutState > { /**
    * Constructor method
    */ constructor ( props ) { super ( props ) ; telemetry . track ( 'ReactGridLayout' ) ; } private _columnCount : number ; private _columnWidth : number ; private _rowHeight : number ; private _isCompact : boolean ; /**
     * Renders the grid control
     */ public render ( ) { return ( < div className = { styles . gridLayout } role = "group" aria - label = { this . props . ariaLabel } > < FocusZone > < List role = "presentation" className = { styles . gridLayoutList } items = { this . props . items } getItemCountForPage = { this . _getItemCountForPage } getPageHeight = { this . _getPageHeight } onRenderCell = { this . _onRenderCell } { ... this . props . listProps } /> < /FocusZone> < /div>); } /**
     * Calculates how many items in the page
     */ private _getItemCountForPage = ( itemIndex , surfaceRect ) : number => { if ( itemIndex === 0 ) { this . _isCompact = surfaceRect . width < COMPACT_THRESHOLD ; if ( this . _isCompact ) { this . _columnCount = 1 ; this . _columnWidth = surfaceRect . width ; } else { this . _columnCount = Math . ceil ( surfaceRect . width / ( MAX_ROW_HEIGHT ) ) ; this . _columnWidth = Math . max ( MIN_WIDTH , Math . floor ( surfaceRect . width / this . _columnCount ) + Math . floor ( PADDING / this . _columnCount ) ) ; this . _rowHeight = this . _columnWidth ; } } return this . _columnCount * ROWS_PER_PAGE ; } ; /**
     * Calculates the page height for the grid
     */ private _getPageHeight = ( ) : number => { return this . _rowHeight * ROWS_PER_PAGE ; } ; /**
     * Calls the passed onRenderCell
     */ private _onRenderCell = ( item , index ) : JSX . Element => { const isCompact = this . _isCompact ; const cellPadding = index % this . _columnCount !== this . _columnCount - 1 && ! isCompact ? PADDING : 0 ; const finalSize = { width : this . _columnWidth , height : this . _rowHeight } ; const cellWidth = isCompact ? this . _columnWidth + PADDING : this . _columnWidth - PADDING ; return ( < div style = { { width : `${ cellWidth }px` , marginRight : `${ cellPadding }px` } } > { this . props . onRenderGridItem ( item , finalSize , isCompact ) } < /div>); } ; }