module.exports = "import * as React from 'react';\nimport {\n  FocusZone,\n  List,\n  Image,\n  ImageFit\n} from '../../../../index';\nimport './List.Grid.Example.scss';\n\nexport interface IListGridExampleProps {\n  items: any[];\n}\n\nconst ROWS_PER_PAGE = 3;\n\nexport class ListGridExample extends React.Component<IListGridExampleProps, any> {\n  private _positions;\n  private _columnCount: number;\n  private _columnWidth: number;\n  private _rowHeight: number;\n\n  constructor() {\n    super();\n\n    this._positions = {};\n    this._getItemCountForPage = this._getItemCountForPage.bind(this);\n    this._getPageHeight = this._getPageHeight.bind(this);\n  }\n\n  public render() {\n    return (\n      <FocusZone>\n        <List\n          className='ms-ListGridExample'\n          items={ this.props.items }\n          getItemCountForPage={ this._getItemCountForPage }\n          getPageHeight={ this._getPageHeight }\n          onRenderCell={ (item, index) => (\n            <div\n              className='ms-ListGridExample-tile'\n              data-is-focusable={ true }\n              style={ {\n                width: this._columnWidth,\n                height: this._rowHeight,\n                backgroundColor: `rgba(${ 4 * (index % 32) + 127 }, ${ 4 * (index % 32) + 127 }, ${ 4 * (index % 32) + 127 }, 1)`\n              } }>\n              <Image\n                className='ms-ListGridExample-image'\n                src={ this._getThumbnail(item, this._rowHeight) }\n                imageFit={ ImageFit.cover }\n                width={ this._rowHeight }\n                height={ this._rowHeight } />\n              <span className='ms-ListGridExample-label'>\n              { `item ${ index }` }\n              </span>\n            </div>\n          ) }\n        />\n      </FocusZone>\n    );\n  }\n\n  private _getThumbnail(item, rowHeight) {\n    const aspectRatio = item.width / item.height;\n\n    if (item.width >= item.height) {\n      return `//placekitten.com/${ Math.round( aspectRatio * rowHeight) }/${ rowHeight }`;\n    } else {\n      return `//placekitten.com/${ rowHeight }/${ Math.round(rowHeight / aspectRatio) }`;\n    }\n  }\n\n  private _getItemCountForPage(itemIndex: number, surfaceRect) {\n    if (itemIndex === 0) {\n      this._columnCount = Math.ceil(surfaceRect.width / 200);\n      this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);\n      this._rowHeight = this._columnWidth;\n    }\n\n    return this._columnCount * ROWS_PER_PAGE;\n  }\n\n  private _getPageHeight(itemIndex: number, surfaceRect) {\n    return this._rowHeight * ROWS_PER_PAGE;\n  }\n}";