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