office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
111 lines • 4.43 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Fabric", "office-ui-fabric-react/lib/DetailsList", "./DetailsList.Grouped.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Fabric_1, DetailsList_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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