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

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport {\r\n  FocusZone,\r\n  List\r\n} from '../../../../index';\r\nimport './List.Grid.Example.scss';\r\n\r\nexport interface IListGridExampleProps {\r\n  items: any[];\r\n}\r\n\r\nconst ROWS_PER_PAGE = 3;\r\nconst MAX_ROW_HEIGHT = 250;\r\n\r\nexport class ListGridExample extends React.Component<IListGridExampleProps, any> {\r\n  private _positions;\r\n  private _columnCount: number;\r\n  private _columnWidth: number;\r\n  private _rowHeight: number;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    this._positions = {};\r\n    this._getItemCountForPage = this._getItemCountForPage.bind(this);\r\n    this._getPageHeight = this._getPageHeight.bind(this);\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <FocusZone>\r\n        <List\r\n          className='ms-ListGridExample'\r\n          items={ this.props.items }\r\n          getItemCountForPage={ this._getItemCountForPage }\r\n          getPageHeight={ this._getPageHeight }\r\n          renderedWindowsAhead={ 4 }\r\n          onRenderCell={ (item, index) => (\r\n            <div\r\n              className='ms-ListGridExample-tile'\r\n              data-is-focusable={ true }\r\n              style={ {\r\n                width: (100 / this._columnCount) + '%'\r\n              } }>\r\n                <div className='ms-ListGridExample-sizer'>\r\n                  <div className='msListGridExample-padder'>\r\n                    <img src={ item.thumbnail } className='ms-ListGridExample-image' />\r\n                    <span className='ms-ListGridExample-label'>\r\n                    { `item ${ index }` }\r\n                    </span>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n          ) }\r\n        />\r\n      </FocusZone>\r\n    );\r\n  }\r\n\r\n  private _getItemCountForPage(itemIndex: number, surfaceRect) {\r\n    if (itemIndex === 0) {\r\n      this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);\r\n      this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);\r\n      this._rowHeight = this._columnWidth;\r\n    }\r\n\r\n    return this._columnCount * ROWS_PER_PAGE;\r\n  }\r\n\r\n  private _getPageHeight(itemIndex: number, surfaceRect) {\r\n    return this._rowHeight * ROWS_PER_PAGE;\r\n  }\r\n}"; });