office-ui-fabric-react/lib/demo/pages/FocusZonePage/examples/FocusZone.Photos.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\n\nimport { FocusZone, Image } from '../../../../index';\nimport { createArray } from '../../../../utilities/array';\nimport './FocusZone.Photos.Example.scss';\n\nconst PHOTOS = createArray(25, () => {\n  const randomWidth = 50 + Math.floor(Math.random() * 150);\n\n  return {\n    url: `http://placehold.it/${ randomWidth }x100`,\n    width: randomWidth,\n    height: 100\n  };\n});\n\nexport const FocusZonePhotosExample = () => (\n  <FocusZone>\n    <ul className='ms-FocusZoneExamples-photoList'>\n      { PHOTOS.map((photo, index) => (\n      <div\n        key={ index }\n        className='ms-FocusZoneExamples-photoCell'\n        data-is-focusable={true}\n        onClick={ () => console.log('clicked') }>\n        <Image src={ photo.url } width={ photo.width } height={ photo.height } />\n      </div>\n      )) }\n    </ul>\n  </FocusZone>\n);\n";