office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
40 lines (38 loc) • 2.63 kB
JavaScript
;
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 Link_1 = require("office-ui-fabric-react/lib/Link");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var example_app_base_1 = require("@uifabric/example-app-base");
require("./DetailsListExample.scss");
var ITEMS_PER_GROUP = 20;
var GROUP_COUNT = 20;
var _items;
var _groups;
var DetailsListCustomGroupHeadersExample = (function (_super) {
tslib_1.__extends(DetailsListCustomGroupHeadersExample, _super);
function DetailsListCustomGroupHeadersExample() {
var _this = _super.call(this) || this;
_items = _items || example_app_base_1.createListItems(500);
_groups = _groups || example_app_base_1.createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);
return _this;
}
DetailsListCustomGroupHeadersExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(DetailsList_1.DetailsList, { items: _items, groups: _groups, groupProps: {
onRenderHeader: function (props) { return (React.createElement("div", { className: 'DetailsListExample-customHeader' },
React.createElement("div", { className: 'DetailsListExample-customHeaderTitle' }, "I am a custom header for: " + props.group.name),
React.createElement("div", { className: 'DetailsListExample-customHeaderLinkSet' },
React.createElement(Link_1.Link, { className: 'DetailsListExample-customHeaderLink', onClick: function () { return props.onToggleSelectGroup(props.group); } }, props.isSelected ? 'Remove selection' : 'Select group'),
React.createElement(Link_1.Link, { className: 'DetailsListExample-customHeaderLink', onClick: function () { return props.onToggleCollapse(props.group); } }, props.group.isCollapsed ? 'Expand group' : 'Collapse group')))); },
onRenderFooter: function (props) { return (React.createElement("div", { className: 'DetailsListExample-customHeader' },
React.createElement("div", { className: 'DetailsListExample-customHeaderTitle' }, "I'm a custom footer for: " + props.group.name))); }
} })));
};
return DetailsListCustomGroupHeadersExample;
}(React.Component));
exports.DetailsListCustomGroupHeadersExample = DetailsListCustomGroupHeadersExample;
//# sourceMappingURL=DetailsList.CustomGroupHeaders.Example.js.map