office-ui-fabric-react/lib/components/GroupedList/examples/GroupedList.Basic.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { GroupedList } from 'office-ui-fabric-react/lib/components/GroupedList/index';
import { DetailsRow } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsRow';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/utilities/selection/index';
import { createListItems, createGroups } from 'office-ui-fabric-react/lib/utilities/exampleData';
var groupCount = 3;
var groupDepth = 3;
var _items;
var _groups;
var GroupedListBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(GroupedListBasicExample, _super);
    function GroupedListBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _items = _items || createListItems(Math.pow(groupCount, groupDepth + 1));
        _groups = _groups || createGroups(groupCount, groupDepth, 0, groupCount);
        _this._onRenderCell = _this._onRenderCell.bind(_this);
        _this._selection = new Selection();
        _this._selection.setItems(_items);
        return _this;
    }
    GroupedListBasicExample.prototype.render = function () {
        return (React.createElement(FocusZone, null,
            React.createElement(SelectionZone, { selection: this._selection, selectionMode: SelectionMode.multiple },
                React.createElement(GroupedList, { items: _items, onRenderCell: this._onRenderCell, selection: this._selection, selectionMode: SelectionMode.multiple, groups: _groups }))));
    };
    GroupedListBasicExample.prototype._onRenderCell = function (nestingDepth, item, itemIndex) {
        var selection = this._selection;
        return (React.createElement(DetailsRow, { columns: Object.keys(item)
                .slice(0, 3)
                .map(function (value) {
                return {
                    key: value,
                    name: value,
                    fieldName: value,
                    minWidth: 300
                };
            }), groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: SelectionMode.multiple }));
    };
    return GroupedListBasicExample;
}(React.Component));
export { GroupedListBasicExample };
//# sourceMappingURL=GroupedList.Basic.Example.js.map