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

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, createRef } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import './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._root = createRef();
        _this._addItem = function () {
            var items = _this.state.items;
            _this.setState({
                items: items.concat([
                    {
                        key: 'item-' + items.length,
                        name: 'New item ' + items.length,
                        color: 'blue'
                    }
                ])
            }, function () {
                if (_this._root.current) {
                    _this._root.current.focusIndex(items.length, true);
                }
            });
        };
        _this._onShowItemIndexInViewChanged = function (event, checked) {
            _this.setState({
                showItemIndexInView: checked
            });
        };
        _this.state = {
            items: _items,
            showItemIndexInView: false
        };
        return _this;
    }
    DetailsListGroupedExample.prototype.componentWillUnmount = function () {
        if (this.state.showItemIndexInView) {
            var itemIndexInView = this._root.current.getStartItemIndexInView();
            alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
        }
    };
    DetailsListGroupedExample.prototype.render = function () {
        var items = this.state.items;
        return (React.createElement(Fabric, { className: "DetailsList-grouped-example" },
            React.createElement("div", null,
                React.createElement(Checkbox, { label: "Show index of the first item in view when unmounting", checked: this.state.showItemIndexInView, onChange: this._onShowItemIndexInViewChanged })),
            React.createElement(DefaultButton, { onClick: this._addItem, text: "Add an item" }),
            React.createElement(DetailsList, { componentRef: this._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._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));
    };
    return DetailsListGroupedExample;
}(BaseComponent));
export { DetailsListGroupedExample };
//# sourceMappingURL=DetailsList.Grouped.Example.js.map