office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
46 lines • 2.03 kB
JavaScript
import * as React from 'react';
import { KeyCodes, createArray, getRTLSafeKeyCode } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { DetailsRow, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
var ITEMS = createArray(10, function (index) { return ({
key: index.toString(),
name: 'Item-' + index,
url: 'http://placehold.it/100x' + (200 + index)
}); });
var COLUMNS = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100
},
{
key: 'link',
name: 'Link',
fieldName: 'url',
minWidth: 100,
onRender: function (item) { return React.createElement(Link, { href: item.url }, item.url); }
},
{
key: 'defaultButton',
name: 'Link',
fieldName: 'url',
minWidth: 100,
onRender: function (item) { return React.createElement(DefaultButton, null, item.url); }
}
];
export var FocusZoneListExample = function () {
// Initialize the selection when the component is first rendered (same instance will be reused)
var selection = React.useState(function () {
var sel = new Selection();
sel.setItems(ITEMS);
return sel;
})[0];
return (React.createElement(FocusZone, { direction: FocusZoneDirection.vertical, isCircularNavigation: true, isInnerZoneKeystroke: _isInnerZoneKeystroke, role: "grid" }, ITEMS.map(function (item, index) { return (React.createElement(DetailsRow, { key: item.name, item: item, itemIndex: index, columns: COLUMNS, selectionMode: SelectionMode.none, selection: selection, styles: { root: { display: 'block', width: '100%' } } })); })));
};
function _isInnerZoneKeystroke(ev) {
return ev.which === getRTLSafeKeyCode(KeyCodes.right);
}
//# sourceMappingURL=FocusZone.List.Example.js.map