office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
39 lines • 2.59 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/components/GroupedList/index", "office-ui-fabric-react/lib/components/DetailsList/DetailsRow", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/utilities/selection/index", "@uifabric/example-app-base"], function (require, exports, tslib_1, React, index_1, DetailsRow_1, FocusZone_1, index_2, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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 || example_app_base_1.createListItems(Math.pow(groupCount, groupDepth + 1));
_groups = _groups || example_app_base_1.createGroups(groupCount, groupDepth, 0, groupCount);
_this._onRenderCell = _this._onRenderCell.bind(_this);
_this._selection = new index_2.Selection;
_this._selection.setItems(_items);
return _this;
}
GroupedListBasicExample.prototype.render = function () {
return (React.createElement(FocusZone_1.FocusZone, null,
React.createElement(index_2.SelectionZone, { selection: this._selection, selectionMode: index_2.SelectionMode.multiple },
React.createElement(index_1.GroupedList, { items: _items, onRenderCell: this._onRenderCell, selection: this._selection, selectionMode: index_2.SelectionMode.multiple, groups: _groups }))));
};
GroupedListBasicExample.prototype._onRenderCell = function (nestingDepth, item, itemIndex) {
var selection = this._selection;
return (React.createElement(DetailsRow_1.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: index_2.SelectionMode.multiple }));
};
return GroupedListBasicExample;
}(React.Component));
exports.GroupedListBasicExample = GroupedListBasicExample;
});
//# sourceMappingURL=GroupedList.Basic.Example.js.map