office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
126 lines • 5.37 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", "office-ui-fabric-react/lib/Checkbox", "./DetailsList.Grouped.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Fabric_1, DetailsList_1, Checkbox_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._root = Utilities_1.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_1.Fabric, { className: "DetailsList-grouped-example" },
React.createElement("div", null,
React.createElement(Checkbox_1.Checkbox, { label: "Show index of the first item in view when unmounting", checked: this.state.showItemIndexInView, onChange: this._onShowItemIndexInViewChanged })),
React.createElement(Button_1.DefaultButton, { onClick: this._addItem, text: "Add an item" }),
React.createElement(DetailsList_1.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;
}(Utilities_1.BaseComponent));
exports.DetailsListGroupedExample = DetailsListGroupedExample;
});
//# sourceMappingURL=DetailsList.Grouped.Example.js.map