office-ui-fabric-react/lib/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 './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'; }
            }
        ];
        _this._navigate = function (name) {
            return function () {
                _this.setState({
                    items: generateItems(name + '/'),
                    initialFocusedIndex: 0
                });
            };
        };
        return _this;
    }
    DetailsListNavigatingFocusExample.prototype.render = function () {
        return (React.createElement(DetailsList, { items: this.state.items, columns: this._columns, initialFocusedIndex: this.state.initialFocusedIndex }));
    };
    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