office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
111 lines (109 loc) • 3.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Fabric_1 = require("office-ui-fabric-react/lib/Fabric");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var _columns = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
},
{
key: 'color',
name: 'Color',
fieldName: 'color',
minWidth: 100,
maxWidth: 200
}
];
var _items = [
{
key: 'a',
name: 'a',
color: 'red'
},
{
key: 'b',
name: 'b',
color: 'red'
},
{
key: 'c',
name: 'c',
color: 'blue'
},
{
key: 'd',
name: 'd',
color: 'blue'
},
{
key: 'e',
name: 'e',
color: 'blue'
}
];
function groupBy(items, fieldName) {
var groups = items.reduce(function (currentGroups, currentItem, index) {
var lastGroup = currentGroups[currentGroups.length - 1];
var fieldValue = currentItem[fieldName];
if (!lastGroup || lastGroup.value !== fieldValue) {
currentGroups.push({
key: 'group' + fieldValue + index,
name: "By \"" + fieldValue + "\"",
value: fieldValue,
startIndex: index,
level: 0,
count: 0
});
}
if (lastGroup) {
lastGroup.count = index - lastGroup.startIndex;
}
return currentGroups;
}, []);
// Fix last group count
var lastGroup = groups[groups.length - 1];
if (lastGroup) {
lastGroup.count = items.length - lastGroup.startIndex;
}
return groups;
}
var DetailsListGroupedExample = (function (_super) {
tslib_1.__extends(DetailsListGroupedExample, _super);
function DetailsListGroupedExample() {
var _this = _super.call(this) || this;
_this.state = {
items: _items
};
return _this;
}
DetailsListGroupedExample.prototype.render = function () {
var _this = this;
var items = this.state.items;
return (React.createElement(Fabric_1.Fabric, { className: 'foo' },
React.createElement(Button_1.DefaultButton, { onClick: function () { return _this._addItem(); }, text: 'Add an item' }),
React.createElement(DetailsList_1.DetailsList, { items: items, groups: groupBy(items, 'color'), columns: _columns, ariaLabelForSelectAllCheckbox: 'Toggle selection for all items', ariaLabelForSelectionColumn: 'Toggle selection' })));
};
DetailsListGroupedExample.prototype._addItem = function () {
var items = this.state.items;
this.setState({
items: items.concat([{
key: 'item-' + items.length,
name: 'New item ' + items.length,
color: 'blue'
}])
});
};
return DetailsListGroupedExample;
}(React.Component));
exports.DetailsListGroupedExample = DetailsListGroupedExample;
//# sourceMappingURL=DetailsList.Grouped.Example.js.map