office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
51 lines • 2.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var GroupedList_1 = require("office-ui-fabric-react/lib/GroupedList");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var FocusZone_1 = require("office-ui-fabric-react/lib/FocusZone");
var Selection_1 = require("office-ui-fabric-react/lib/Selection");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
var example_data_1 = require("@uifabric/example-data");
var groupCount = 3;
var groupDepth = 3;
var GroupedListBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(GroupedListBasicExample, _super);
function GroupedListBasicExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderCell = function (nestingDepth, item, itemIndex) {
return (React.createElement(DetailsList_1.DetailsRow, { columns: _this._columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: _this._selection, selectionMode: Selection_1.SelectionMode.multiple, compact: _this.state.isCompactMode }));
};
_this._onChangeCompactMode = function (ev, checked) {
_this.setState({ isCompactMode: checked });
};
_this._items = example_data_1.createListItems(Math.pow(groupCount, groupDepth + 1));
_this._columns = Object.keys(_this._items[0])
.slice(0, 3)
.map(function (key) { return ({
key: key,
name: key,
fieldName: key,
minWidth: 300
}); });
_this._groups = example_data_1.createGroups(groupCount, groupDepth, 0, groupCount);
_this._selection = new Selection_1.Selection();
_this._selection.setItems(_this._items);
_this.state = {
isCompactMode: false
};
return _this;
}
GroupedListBasicExample.prototype.render = function () {
var isCompactMode = this.state.isCompactMode;
return (React.createElement("div", null,
React.createElement(Toggle_1.Toggle, { label: "Enable compact mode", checked: isCompactMode, onChange: this._onChangeCompactMode, onText: "Compact", offText: "Normal", styles: { root: { marginBottom: '20px' } } }),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement(Selection_1.SelectionZone, { selection: this._selection, selectionMode: Selection_1.SelectionMode.multiple },
React.createElement(GroupedList_1.GroupedList, { items: this._items, onRenderCell: this._onRenderCell, selection: this._selection, selectionMode: Selection_1.SelectionMode.multiple, groups: this._groups, compact: isCompactMode })))));
};
return GroupedListBasicExample;
}(React.Component));
exports.GroupedListBasicExample = GroupedListBasicExample;
//# sourceMappingURL=GroupedList.Basic.Example.js.map