office-ui-fabric-react/lib/demo/pages/ListPage/examples/List.Grid.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport {\n  FocusZone,\n  List\n} from '../../../../index';\nimport './List.Grid.Example.scss';\n\nexport interface IListGridExampleProps {\n  items: any[];\n}\n\nconst ROWS_PER_PAGE = 3;\nconst MAX_ROW_HEIGHT = 250;\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          renderedWindowsAhead={ 4 }\n          onRenderCell={ (item, index) => (\n            <div\n              className='ms-ListGridExample-tile'\n              data-is-focusable={ true }\n              style={ {\n                width: (100 / this._columnCount) + '%'\n              } }>\n                <div className='ms-ListGridExample-sizer'>\n                  <div className='msListGridExample-padder'>\n                    <img src={ item.thumbnail } className='ms-ListGridExample-image' />\n                    <span className='ms-ListGridExample-label'>\n                    { `item ${ index }` }\n                    </span>\n                  </div>\n                </div>\n            </div>\n          ) }\n        />\n      </FocusZone>\n    );\n  }\n\n  private _getItemCountForPage(itemIndex: number, surfaceRect) {\n    if (itemIndex === 0) {\n      this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);\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}";