office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
49 lines • 2.74 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { GroupedList } from 'office-ui-fabric-react/lib/GroupedList';
import { DetailsRow } from 'office-ui-fabric-react/lib/DetailsList';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { Selection, SelectionMode, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { createListItems, createGroups } from '@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(DetailsRow, { columns: _this._columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: _this._selection, selectionMode: SelectionMode.multiple, compact: _this.state.isCompactMode }));
};
_this._onChangeCompactMode = function (ev, checked) {
_this.setState({ isCompactMode: checked });
};
_this._items = 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 = createGroups(groupCount, groupDepth, 0, groupCount);
_this._selection = new 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, { label: "Enable compact mode", checked: isCompactMode, onChange: this._onChangeCompactMode, onText: "Compact", offText: "Normal", styles: { root: { marginBottom: '20px' } } }),
React.createElement(FocusZone, null,
React.createElement(SelectionZone, { selection: this._selection, selectionMode: SelectionMode.multiple },
React.createElement(GroupedList, { items: this._items, onRenderCell: this._onRenderCell, selection: this._selection, selectionMode: SelectionMode.multiple, groups: this._groups, compact: isCompactMode })))));
};
return GroupedListBasicExample;
}(React.Component));
export { GroupedListBasicExample };
//# sourceMappingURL=GroupedList.Basic.Example.js.map