office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
46 lines • 2.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var index_1 = require("office-ui-fabric-react/lib/components/GroupedList/index");
var DetailsRow_1 = require("office-ui-fabric-react/lib/components/DetailsList/DetailsRow");
var FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var index_2 = require("office-ui-fabric-react/lib/utilities/selection/index");
var exampleData_1 = require("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 || exampleData_1.createListItems(Math.pow(groupCount, groupDepth + 1));
_groups = _groups || exampleData_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