office-ui-fabric-react/lib-es2015/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import './DetailsListExample.scss';
var DetailsListNavigatingFocusExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListNavigatingFocusExample, _super);
    function DetailsListNavigatingFocusExample() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            items: generateItems(''),
            initialFocusedIndex: undefined,
        };
        _this._columns = [
            {
                key: 'filepath',
                name: 'File path',
                onRender: function (item) {
                    return (React.createElement(Link, { key: item, onClick: _this._navigate(item) }, item));
                },
            },
            {
                key: 'size',
                name: 'Size',
                onRender: function (item) { return '4 KB'; },
            }
        ];
        return _this;
    }
    DetailsListNavigatingFocusExample.prototype.render = function () {
        return (React.createElement(DetailsList, { items: this.state.items, columns: this._columns, initialFocusedIndex: this.state.initialFocusedIndex }));
    };
    DetailsListNavigatingFocusExample.prototype._navigate = function (name) {
        var _this = this;
        return function () {
            _this.setState({
                items: generateItems(name + '/'),
                initialFocusedIndex: 0,
            });
        };
    };
    tslib_1.__decorate([
        autobind
    ], DetailsListNavigatingFocusExample.prototype, "_navigate", null);
    return DetailsListNavigatingFocusExample;
}(React.Component));
export { DetailsListNavigatingFocusExample };
function generateItems(parent) {
    return Array.prototype.map.call('abcdefghi', function (name) { return parent + name; });
}
//# sourceMappingURL=DetailsList.NavigatingFocus.Example.js.map