office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
84 lines • 5 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/DetailsList", "@uifabric/example-data", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, Link_1, DetailsList_1, example_data_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ROW_HEIGHT = 42; // from DEFAULT_ROW_HEIGHTS in DetailsRow.styles.ts
var GROUP_HEADER_AND_FOOTER_SPACING = 8;
var GROUP_HEADER_AND_FOOTER_BORDER_WIDTH = 1;
var GROUP_HEADER_HEIGHT = 95;
var GROUP_FOOTER_HEIGHT = GROUP_HEADER_AND_FOOTER_SPACING * 4 + GROUP_HEADER_AND_FOOTER_BORDER_WIDTH * 2;
var theme = Styling_1.getTheme();
var classNames = Styling_1.mergeStyleSets({
headerAndFooter: {
borderTop: GROUP_HEADER_AND_FOOTER_BORDER_WIDTH + "px solid " + theme.palette.neutralQuaternary,
borderBottom: GROUP_HEADER_AND_FOOTER_BORDER_WIDTH + "px solid " + theme.palette.neutralQuaternary,
padding: GROUP_HEADER_AND_FOOTER_SPACING,
margin: GROUP_HEADER_AND_FOOTER_SPACING + "px 0",
background: theme.palette.neutralLighterAlt,
// Overlay the sizer bars
position: 'relative',
zIndex: 100
},
headerTitle: [
theme.fonts.xLarge,
{
padding: '4px 0'
}
],
headerLinkSet: {
margin: '4px -8px'
},
headerLink: {
margin: '0 8px'
}
});
var ITEMS_PER_GROUP = 20;
var GROUP_COUNT = 20;
var DetailsListCustomGroupHeadersExample = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListCustomGroupHeadersExample, _super);
function DetailsListCustomGroupHeadersExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderGroupHeader = function (props) {
return (React.createElement("div", { className: classNames.headerAndFooter },
React.createElement("div", { className: classNames.headerTitle }, "Custom header for " + props.group.name),
React.createElement("div", { className: classNames.headerLinkSet },
React.createElement(Link_1.Link, { className: classNames.headerLink, onClick: _this._onToggleSelectGroup(props) }, props.isSelected ? 'Remove selection' : 'Select group'),
React.createElement(Link_1.Link, { className: classNames.headerLink, onClick: _this._onToggleCollapse(props) }, props.group.isCollapsed ? 'Expand group' : 'Collapse group'))));
};
_this._onRenderGroupFooter = function (props) {
return (React.createElement("div", { className: classNames.headerAndFooter },
React.createElement("em", null, "Custom footer for " + props.group.name)));
};
_this._getGroupTotalRowHeight = function (group) {
return group.isCollapsed ? 0 : ROW_HEIGHT * group.count;
};
_this._getGroupHeight = function (group, _groupIndex) {
return GROUP_HEADER_HEIGHT + GROUP_FOOTER_HEIGHT + _this._getGroupTotalRowHeight(group);
};
_this._items = example_data_1.createListItems(500);
_this._groups = example_data_1.createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);
return _this;
}
DetailsListCustomGroupHeadersExample.prototype.render = function () {
return (React.createElement(DetailsList_1.DetailsList, { items: this._items, groups: this._groups, groupProps: {
onRenderHeader: this._onRenderGroupHeader,
onRenderFooter: this._onRenderGroupFooter
}, getGroupHeight: this._getGroupHeight, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "Row checkbox", onRenderDetailsHeader: this._onRenderDetailsHeader }));
};
DetailsListCustomGroupHeadersExample.prototype._onRenderDetailsHeader = function (props) {
return React.createElement(DetailsList_1.DetailsHeader, tslib_1.__assign({}, props, { ariaLabelForToggleAllGroupsButton: 'Toggle selection' }));
};
DetailsListCustomGroupHeadersExample.prototype._onToggleSelectGroup = function (props) {
return function () {
props.onToggleSelectGroup(props.group);
};
};
DetailsListCustomGroupHeadersExample.prototype._onToggleCollapse = function (props) {
return function () {
props.onToggleCollapse(props.group);
};
};
return DetailsListCustomGroupHeadersExample;
}(React.Component));
exports.DetailsListCustomGroupHeadersExample = DetailsListCustomGroupHeadersExample;
});
//# sourceMappingURL=DetailsList.CustomGroupHeaders.Example.js.map