office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
50 lines (49 loc) • 2.5 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../../../utilities/array', '../../../../index', '../../../../components/DetailsList/DetailsRow', '../../../../utilities/KeyCodes', '../../../../utilities/rtl', '../../../../utilities/selection/index', './FocusZone.List.Example.scss'], function (require, exports, React, array_1, index_1, DetailsRow_1, KeyCodes_1, rtl_1, index_2) {
"use strict";
var ITEMS = array_1.createArray(10, function (index) { return ({
key: index,
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(index_1.Link, {href: item.url}, item.url); }
},
{
key: 'link',
name: 'Link',
fieldName: 'url',
minWidth: 100,
onRender: function (item) { return React.createElement(index_1.Button, null, item.url); }
}
];
var FocusZoneListExample = (function (_super) {
__extends(FocusZoneListExample, _super);
function FocusZoneListExample() {
_super.call(this);
this._selection = new index_2.Selection();
this._selection.setItems(ITEMS);
}
FocusZoneListExample.prototype.render = function () {
var _this = this;
return (React.createElement(index_1.FocusZone, {className: 'ms-FocusZoneListExample', direction: index_1.FocusZoneDirection.vertical, isCircularNavigation: true, isInnerZoneKeystroke: function (ev) { return (ev.which === rtl_1.getRTLSafeKeyCode(KeyCodes_1.KeyCodes.right)); }}, ITEMS.map(function (item, index) { return (React.createElement(DetailsRow_1.DetailsRow, {key: index, item: item, itemIndex: index, columns: COLUMNS, selectionMode: index_2.SelectionMode.single, selection: _this._selection})); })));
};
return FocusZoneListExample;
}(React.Component));
exports.FocusZoneListExample = FocusZoneListExample;
});