office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.07 kB
JavaScript
define([], function() { return "/* tslint:disable:no-unused-variable */\r\nimport * as React from 'react';\r\n/* tslint:enable:no-unused-variable */\r\n\r\nimport { FocusZone, Image } from '../../../../index';\r\nimport { createArray } from '../../../../utilities/array';\r\nimport './FocusZone.Photos.Example.scss';\r\n\r\nconst PHOTOS = createArray(25, () => {\r\n const randomWidth = 50 + Math.floor(Math.random() * 150);\r\n\r\n return {\r\n url: `http://placehold.it/${ randomWidth }x100`,\r\n width: randomWidth,\r\n height: 100\r\n };\r\n});\r\n\r\nexport const FocusZonePhotosExample = () => (\r\n <FocusZone>\r\n <ul className='ms-FocusZoneExamples-photoList'>\r\n { PHOTOS.map((photo, index) => (\r\n <div\r\n key={ index }\r\n className='ms-FocusZoneExamples-photoCell'\r\n data-is-focusable={true}\r\n onClick={ () => console.log('clicked') }>\r\n <Image src={ photo.url } width={ photo.width } height={ photo.height } />\r\n </div>\r\n )) }\r\n </ul>\r\n </FocusZone>\r\n);\r\n"; });