office-ui-fabric-react/lib/demo/pages/DetailsListPage/examples/DetailsList.Grouped.Example.js

Reusable React components for building experiences for Office 365.

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var index_1 = require("../../../../index");
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) {
    __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(index_1.Fabric, { className: 'foo' },
            React.createElement(index_1.Button, { onClick: function () { return _this._addItem(); } }, "Add an item"),
            React.createElement(index_1.DetailsList, { items: items, groups: groupBy(items, 'color'), columns: _columns })));
    };
    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