office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
56 lines (54 loc) • 3.04 kB
JavaScript
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 __());
};
define(["require", "exports", "react", "../../../../index", "../../../utilities/data"], function (require, exports, React, index_1, data_1) {
"use strict";
var _items;
var DetailsListBasicExample = (function (_super) {
__extends(DetailsListBasicExample, _super);
function DetailsListBasicExample() {
var _this = _super.call(this) || this;
_items = _items || data_1.createListItems(500);
_this._onRenderItemColumn = _this._onRenderItemColumn.bind(_this);
_this._selection = new index_1.Selection({
onSelectionChanged: function () { return _this.setState({ selectionDetails: _this._getSelectionDetails() }); }
});
_this.state = {
items: _items,
selectionDetails: _this._getSelectionDetails()
};
return _this;
}
DetailsListBasicExample.prototype.render = function () {
var _this = this;
var _a = this.state, items = _a.items, selectionDetails = _a.selectionDetails;
return (React.createElement("div", null,
React.createElement("div", null, selectionDetails),
React.createElement(index_1.TextField, { label: 'Filter by name:', onChanged: function (text) { return _this.setState({ items: text ? _items.filter(function (i) { return i.name.toLowerCase().indexOf(text) > -1; }) : _items }); } }),
React.createElement(index_1.MarqueeSelection, { selection: this._selection },
React.createElement(index_1.DetailsList, { items: items, setKey: 'set', selection: this._selection, onItemInvoked: function (item) { return alert("Item invoked: " + item.name); }, onRenderItemColumn: this._onRenderItemColumn }))));
};
DetailsListBasicExample.prototype._onRenderItemColumn = function (item, index, column) {
if (column.key === 'name') {
return React.createElement(index_1.Link, { "data-selection-invoke": true }, item[column.key]);
}
return item[column.key];
};
DetailsListBasicExample.prototype._getSelectionDetails = function () {
var selectionCount = this._selection.getSelectedCount();
switch (selectionCount) {
case 0:
return 'No items selected';
case 1:
return '1 item selected: ' + this._selection.getSelection()[0].name;
default:
return selectionCount + " items selected";
}
};
return DetailsListBasicExample;
}(React.Component));
exports.DetailsListBasicExample = DetailsListBasicExample;
});
//# sourceMappingURL=DetailsList.Basic.Example.js.map