office-ui-fabric-react/lib/components/FocusZone/examples/FocusZone.List.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { 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';
import './FocusZone.List.Example.scss';
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: 'link',
        name: 'Link',
        fieldName: 'url',
        minWidth: 100,
        onRender: function (item) { return React.createElement(DefaultButton, null, item.url); }
    }
];
var FocusZoneListExample = /** @class */ (function (_super) {
    tslib_1.__extends(FocusZoneListExample, _super);
    function FocusZoneListExample(props) {
        var _this = _super.call(this, props) || this;
        _this._selection = new Selection();
        _this._selection.setItems(ITEMS);
        return _this;
    }
    FocusZoneListExample.prototype.render = function () {
        var _this = this;
        return (React.createElement(FocusZone, { className: "ms-FocusZoneListExample", direction: FocusZoneDirection.vertical, isCircularNavigation: true, isInnerZoneKeystroke: this._isInnerZoneKeystroke }, ITEMS.map(function (item, index) { return (React.createElement(DetailsRow, { key: index, item: item, itemIndex: index, columns: COLUMNS, selectionMode: SelectionMode.single, selection: _this._selection })); })));
    };
    FocusZoneListExample.prototype._isInnerZoneKeystroke = function (ev) {
        return ev.which === getRTLSafeKeyCode(39 /* right */);
    };
    return FocusZoneListExample;
}(React.Component));
export { FocusZoneListExample };
//# sourceMappingURL=FocusZone.List.Example.js.map