office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
102 lines • 5.78 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css } from '../../Utilities';
import { SelectionMode } from '../../utilities/selection/index';
import { Check } from '../../Check';
import { Icon } from '../../Icon';
import { GroupSpacer } from './GroupSpacer';
import { Spinner } from '../../Spinner';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import * as stylesImport from './GroupHeader.scss';
var styles = stylesImport;
var GroupHeader = /** @class */ (function (_super) {
tslib_1.__extends(GroupHeader, _super);
function GroupHeader(props) {
var _this = _super.call(this, props) || this;
_this._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();
};
_this._onToggleSelectGroupClick = function (ev) {
var _a = _this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
ev.preventDefault();
ev.stopPropagation();
};
_this._onHeaderClick = function () {
var _a = _this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
if (onGroupHeaderClick) {
onGroupHeaderClick(group);
}
else if (onToggleSelectGroup) {
onToggleSelectGroup(group);
}
};
_this.state = {
isCollapsed: (_this.props.group && _this.props.group.isCollapsed),
isLoadingVisible: false
};
return _this;
}
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 isCollapsedGroupSelectVisible = this.props.isCollapsedGroupSelectVisible;
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected;
var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
if (isCollapsedGroupSelectVisible === undefined) {
isCollapsedGroupSelectVisible = true;
}
var canSelectGroup = selectionMode === SelectionMode.multiple;
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
var currentlySelected = isSelected || selected;
if (!group) {
return null;
}
return (React.createElement("div", { className: css('ms-GroupHeader', styles.root, (_c = {},
_c['is-selected ' + styles.rootIsSelected] = currentlySelected,
_c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true },
React.createElement(FocusZone, { className: styles.groupHeaderContainer, direction: FocusZoneDirection.horizontal },
isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick },
React.createElement(Check, { checked: currentlySelected }))) : (selectionMode !== SelectionMode.none ? GroupSpacer({ count: 1 }) : null),
GroupSpacer({ count: groupLevel }),
React.createElement("div", { className: css('ms-GroupHeader-dropIcon', styles.dropIcon) },
React.createElement(Icon, { iconName: 'Tag' })),
React.createElement("button", { type: 'button', className: css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse },
React.createElement(Icon, { className: css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })),
React.createElement("div", { className: css('ms-GroupHeader-title', styles.title) },
React.createElement("span", null, group.name),
React.createElement("span", { className: styles.headerCount },
"(",
group.count,
group.hasMoreData && '+',
")")),
isLoadingVisible && (React.createElement(Spinner, { label: loadingText })))));
var _c;
};
return GroupHeader;
}(BaseComponent));
export { GroupHeader };
//# sourceMappingURL=GroupHeader.js.map