office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
125 lines (123 loc) • 6.51 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 __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var React = require('react');
var index_1 = require('../../utilities/selection/index');
var Check_1 = require('../Check/Check');
var GroupSpacer_1 = require('./GroupSpacer');
var Spinner_1 = require('../../Spinner');
var FocusZone_1 = require('../../FocusZone');
var css_1 = require('../../utilities/css');
var autobind_1 = require('../../utilities/autobind');
require('./GroupHeader.scss');
var GroupHeader = (function (_super) {
__extends(GroupHeader, _super);
function GroupHeader(props) {
_super.call(this, props);
this.state = {
isCollapsed: this.props.group && this.props.group.isCollapsed,
isLoadingVisible: false
};
}
GroupHeader.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.group) {
var newCollapsed = newProps.group.isCollapsed;
var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
}
};
GroupHeader.prototype.render = function () {
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible;
var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var canSelectGroup = selectionMode === index_1.SelectionMode.multiple;
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
return group && (React.createElement("div", {className: css_1.css('ms-GroupHeader', {
'is-selected': isSelected
}), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true},
React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal},
isSelectionCheckVisible ? (React.createElement("button", {className: 'ms-GroupHeader-check', "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick},
React.createElement(Check_1.Check, {isChecked: isSelected})
)) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null),
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
React.createElement("div", {className: 'ms-GroupHeader-dropIcon'},
React.createElement("i", {className: 'ms-Icon ms-Icon--Tag'})
),
React.createElement("button", {className: 'ms-GroupHeader-expand', onClick: this._onToggleCollapse},
React.createElement("i", {className: css_1.css('ms-Icon ms-Icon--ChevronDown', {
'is-collapsed': isCollapsed
})})
),
React.createElement("div", {className: 'ms-GroupHeader-title ms-font-xl'},
React.createElement("span", null,
group.name,
" "),
React.createElement("span", null,
"(",
group.count,
") ")),
React.createElement("div", {className: css_1.css('ms-GroupHeader-loading', { 'is-loading': isLoadingVisible })},
React.createElement(Spinner_1.Spinner, {label: loadingText})
))
));
};
GroupHeader.prototype._onToggleCollapse = function (ev) {
var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;
var isCollapsed = this.state.isCollapsed;
var newCollapsed = !isCollapsed;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);
this.setState({
isCollapsed: newCollapsed,
isLoadingVisible: newLoadingVisible
});
if (onToggleCollapse) {
onToggleCollapse(group);
}
ev.stopPropagation();
ev.preventDefault();
};
GroupHeader.prototype._onToggleSelectGroupClick = function (ev) {
var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
ev.preventDefault();
ev.stopPropagation();
};
GroupHeader.prototype._onHeaderClick = function () {
var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
if (onGroupHeaderClick) {
onGroupHeaderClick(group);
}
else if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
};
__decorate([
autobind_1.autobind
], GroupHeader.prototype, "_onToggleCollapse", null);
__decorate([
autobind_1.autobind
], GroupHeader.prototype, "_onToggleSelectGroupClick", null);
__decorate([
autobind_1.autobind
], GroupHeader.prototype, "_onHeaderClick", null);
return GroupHeader;
}(React.Component));
exports.GroupHeader = GroupHeader;
//# sourceMappingURL=GroupHeader.js.map