office-ui-fabric-react/lib/components/DetailsList/examples/DetailsList.Grouped.Example.js

Reusable React components for building experiences for Office 365.

"use strict";
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 Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
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");
require("./DetailsList.Grouped.Example.scss");
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'
    }
];
var DetailsListGroupedExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListGroupedExample, _super);
    function DetailsListGroupedExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            items: _items
        };
        return _this;
    }
    DetailsListGroupedExample.prototype.render = function () {
        var items = this.state.items;
        return (React.createElement(Fabric_1.Fabric, { className: 'DetailsList-grouped-example' },
            React.createElement(Button_1.DefaultButton, { onClick: this._addItem, text: 'Add an item' }),
            React.createElement(DetailsList_1.DetailsList, { componentRef: this._resolveRef('_root'), items: items, groups: [
                    {
                        key: 'groupred0',
                        name: 'By "red"',
                        startIndex: 0,
                        count: 2
                    },
                    {
                        key: 'groupgreen2',
                        name: 'By "green"',
                        startIndex: 2,
                        count: 0
                    },
                    {
                        key: 'groupblue2',
                        name: 'By "blue"',
                        startIndex: 2,
                        count: items.length - 2
                    }
                ], columns: _columns, ariaLabelForSelectAllCheckbox: 'Toggle selection for all items', ariaLabelForSelectionColumn: 'Toggle selection', groupProps: {
                    showEmptyGroups: true
                }, onRenderItemColumn: this._onRenderColumn })));
    };
    DetailsListGroupedExample.prototype._addItem = function () {
        var _this = this;
        var items = this.state.items;
        this.setState({
            items: items.concat([{
                    key: 'item-' + items.length,
                    name: 'New item ' + items.length,
                    color: 'blue'
                }])
        }, function () {
            _this._root.focusIndex(items.length, true);
        });
    };
    DetailsListGroupedExample.prototype._onRenderColumn = function (item, index, column) {
        var value = (item && column && column.fieldName) ? item[column.fieldName] : '';
        if (value === null || value === undefined) {
            value = '';
        }
        return (React.createElement("div", { className: 'grouped-example-column', "data-is-focusable": true }, value));
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DetailsListGroupedExample.prototype, "_addItem", null);
    return DetailsListGroupedExample;
}(Utilities_1.BaseComponent));
exports.DetailsListGroupedExample = DetailsListGroupedExample;
//# sourceMappingURL=DetailsList.Grouped.Example.js.map