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

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport { createArray } from '../../../../utilities/array';\r\nimport {\r\n  Button,\r\n  FocusZone,\r\n  FocusZoneDirection,\r\n  IColumn,\r\n  Link\r\n} from '../../../../index';\r\nimport { DetailsRow } from '../../../../components/DetailsList/DetailsRow';\r\nimport { KeyCodes } from '../../../../utilities/KeyCodes';\r\nimport { getRTLSafeKeyCode } from '../../../../utilities/rtl';\r\nimport { Selection, SelectionMode } from '../../../../utilities/selection/index';\r\nimport './FocusZone.List.Example.scss';\r\n\r\nconst ITEMS = createArray(10, (index) => ({\r\n  key: index,\r\n  name: 'Item-' + index,\r\n  url: 'http://placehold.it/100x' + (200 + index)\r\n}));\r\n\r\nconst COLUMNS: IColumn[] = [\r\n  {\r\n    key: 'name',\r\n    name: 'Name',\r\n    fieldName: 'name',\r\n    minWidth: 100\r\n  },\r\n  {\r\n    key: 'link',\r\n    name: 'Link',\r\n    fieldName: 'url',\r\n    minWidth: 100,\r\n    onRender: item => <Link href={ item.url }>{ item.url }</Link>\r\n  },\r\n  {\r\n    key: 'link',\r\n    name: 'Link',\r\n    fieldName: 'url',\r\n    minWidth: 100,\r\n    onRender: item => <Button>{ item.url }</Button>\r\n  }\r\n];\r\n\r\nexport class FocusZoneListExample extends React.Component<any, any> {\r\n  private _selection: Selection;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    this._selection = new Selection();\r\n    this._selection.setItems(ITEMS);\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <FocusZone\r\n        className='ms-FocusZoneListExample'\r\n        direction={ FocusZoneDirection.vertical }\r\n        isCircularNavigation={ true }\r\n        isInnerZoneKeystroke={ (ev) => (ev.which === getRTLSafeKeyCode(KeyCodes.right)) }>\r\n        { ITEMS.map((item, index) => (\r\n          <DetailsRow\r\n            key={ index }\r\n            item={ item }\r\n            itemIndex={ index }\r\n            columns={ COLUMNS }\r\n            selectionMode={ SelectionMode.single }\r\n            selection={ this._selection } />\r\n        )) }\r\n      </FocusZone>\r\n    );\r\n  }\r\n\r\n}\r\n"; });