@fluentui/react
Version:
Reusable React components for building web experiences.
155 lines • 9.97 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { composeRenderFunction, classNamesFunction, getId, getRTL, getRTLSafeKeyCode, KeyCodes } from '../../Utilities';
import { SelectionMode } from '../../Selection';
import { Check } from '../../Check';
import { Icon } from '../../Icon';
import { GroupSpacer } from './GroupSpacer';
import { Spinner } from '../../Spinner';
import { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';
var getClassNames = classNamesFunction();
export var GroupHeaderBase = /** @class */ (function (_super) {
__extends(GroupHeaderBase, _super);
function GroupHeaderBase(props) {
var _this = _super.call(this, props) || this;
_this._toggleCollapse = function () {
var _a;
var group = (_a = _this.props, _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);
}
};
_this._onKeyUp = function (ev) {
var _a;
var group = (_a = _this.props, _a.group), onGroupHeaderKeyUp = _a.onGroupHeaderKeyUp;
if (onGroupHeaderKeyUp) {
onGroupHeaderKeyUp(ev, group);
}
if (!ev.defaultPrevented) {
// eslint-disable-next-line deprecation/deprecation
var shouldOpen = _this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, _this.props.theme);
// eslint-disable-next-line deprecation/deprecation
var shouldClose = !_this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, _this.props.theme);
if (shouldClose || shouldOpen) {
_this._toggleCollapse();
ev.stopPropagation();
ev.preventDefault();
}
}
};
_this._onToggleClick = function (ev) {
_this._toggleCollapse();
ev.stopPropagation();
ev.preventDefault();
};
_this._onHeaderClick = function () {
var _a;
var group = (_a = _this.props, _a.group), onGroupHeaderClick = _a.onGroupHeaderClick;
if (onGroupHeaderClick) {
onGroupHeaderClick(group);
}
};
_this._onRenderTitle = function (props) {
var group = props.group;
if (!group) {
return null;
}
var onRenderName = props.onRenderName
? composeRenderFunction(props.onRenderName, _this._onRenderName)
: _this._onRenderName;
return (React.createElement("div", { className: _this._classNames.title, id: _this._id, onClick: _this._onHeaderClick, role: "gridcell", "aria-colspan": _this.props.ariaColSpan, "data-selection-invoke": true }, onRenderName(props)));
};
_this._onRenderName = function (props) {
var group = props.group;
if (!group) {
return null;
}
return (React.createElement(React.Fragment, null,
React.createElement("span", null, group.name),
React.createElement("span", { className: _this._classNames.headerCount },
"(",
group.count,
group.hasMoreData && '+',
")")));
};
_this._id = getId('GroupHeader');
_this.state = {
isCollapsed: (_this.props.group && _this.props.group.isCollapsed),
isLoadingVisible: false,
};
return _this;
}
GroupHeaderBase.getDerivedStateFromProps = function (nextProps, previousState) {
if (nextProps.group) {
var newCollapsed = nextProps.group.isCollapsed;
var isGroupLoading = nextProps.isGroupLoading;
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(nextProps.group);
return __assign(__assign({}, previousState), { isCollapsed: newCollapsed || false, isLoadingVisible: newLoadingVisible || false });
}
return previousState;
};
GroupHeaderBase.prototype.render = function () {
var _a, _b, _c, _d, _e, _f;
var group = (_a = this.props, _a.group), groupLevel = (_b = _a.groupLevel, _b === void 0 ? 0 : _b), viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText,
// eslint-disable-next-line deprecation/deprecation
isSelected = (_c = _a.isSelected, _c === void 0 ? false : _c), selected = (_d = _a.selected, _d === void 0 ? false : _d), indentWidth = _a.indentWidth, onRenderGroupHeaderCheckbox = _a.onRenderGroupHeaderCheckbox, isCollapsedGroupSelectVisible = (_e = _a.isCollapsedGroupSelectVisible, _e === void 0 ? true : _e), expandButtonProps = _a.expandButtonProps, expandButtonIcon = _a.expandButtonIcon, selectAllButtonProps = _a.selectAllButtonProps, theme = _a.theme, styles = _a.styles, className = _a.className, compact = _a.compact, ariaLevel = _a.ariaLevel, ariaPosInSet = _a.ariaPosInSet, ariaSetSize = _a.ariaSetSize, ariaRowIndex = _a.ariaRowIndex, useFastIcons = _a.useFastIcons;
var onRenderTitle = this.props.onRenderTitle
? composeRenderFunction(this.props.onRenderTitle, this._onRenderTitle)
: this._onRenderTitle;
var defaultCheckboxRender = useFastIcons ? this._fastDefaultCheckboxRender : this._defaultCheckboxRender;
var onRenderCheckbox = onRenderGroupHeaderCheckbox
? composeRenderFunction(onRenderGroupHeaderCheckbox, defaultCheckboxRender)
: defaultCheckboxRender;
var isCollapsed = (_f = this.state, _f.isCollapsed), isLoadingVisible = _f.isLoadingVisible;
var canSelectGroup = selectionMode === SelectionMode.multiple;
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
var currentlySelected = selected || isSelected;
var isRTL = getRTL(theme);
this._classNames = getClassNames(styles, {
theme: theme,
className: className,
selected: currentlySelected,
isCollapsed: isCollapsed,
compact: compact,
});
if (!group) {
return null;
}
return (React.createElement("div", { className: this._classNames.root, style: viewport ? { minWidth: viewport.width } : {}, role: "row", "aria-level": ariaLevel, "aria-setsize": ariaSetSize, "aria-posinset": ariaPosInSet, "aria-rowindex": ariaRowIndex, "data-is-focusable": true, onKeyUp: this._onKeyUp, "aria-label": group.ariaLabel, "aria-labelledby": group.ariaLabel ? undefined : this._id, "aria-expanded": !this.state.isCollapsed, "aria-selected": canSelectGroup ? currentlySelected : undefined, "data-selection-index": group.startIndex, "data-selection-span": group.count },
React.createElement("div", { className: this._classNames.groupHeaderContainer, role: "presentation" },
isSelectionCheckVisible ? (React.createElement("div", { role: "gridcell" },
React.createElement("button", __assign({ "data-is-focusable": false, type: "button", className: this._classNames.check, role: "checkbox", id: "".concat(this._id, "-check"), "aria-checked": currentlySelected, "aria-labelledby": "".concat(this._id, "-check ").concat(this._id), "data-selection-toggle": true }, selectAllButtonProps), onRenderCheckbox({ checked: currentlySelected, theme: theme }, onRenderCheckbox)))) : (
// To make the group header align properly with the column headers, this spacer
// needs to be the same width as the check cell in the column header.
selectionMode !== SelectionMode.none && React.createElement(GroupSpacer, { indentWidth: CHECK_CELL_WIDTH, count: 1 })),
React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),
React.createElement("div", { className: this._classNames.dropIcon, role: "presentation" },
React.createElement(Icon, { iconName: "Tag" })),
React.createElement("div", { role: "gridcell" },
React.createElement("button", __assign({ "data-is-focusable": false, "data-selection-disabled": true, type: "button", className: this._classNames.expand, onClick: this._onToggleClick, "aria-expanded": !this.state.isCollapsed }, expandButtonProps),
React.createElement(Icon, { className: this._classNames.expandIsCollapsed, iconName: expandButtonIcon || (isRTL ? 'ChevronLeftMed' : 'ChevronRightMed') }))),
onRenderTitle(this.props),
isLoadingVisible && React.createElement(Spinner, { label: loadingText }))));
};
GroupHeaderBase.prototype._defaultCheckboxRender = function (checkboxProps) {
return React.createElement(Check, { checked: checkboxProps.checked });
};
GroupHeaderBase.prototype._fastDefaultCheckboxRender = function (checkboxProps) {
return React.createElement(FastCheck, { theme: checkboxProps.theme, checked: checkboxProps.checked });
};
GroupHeaderBase.defaultProps = {
expandButtonProps: { 'aria-label': 'expand collapse group' },
};
return GroupHeaderBase;
}(React.Component));
var FastCheck = React.memo(function (props) {
return React.createElement(Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });
});
//# sourceMappingURL=GroupHeader.base.js.map