@fluentui/react
Version:
Reusable React components for building web experiences.
209 lines • 9.9 kB
JavaScript
define(["require", "exports", "../../Styling", "../../Utilities", "../DetailsList/DetailsRow.styles", "../DetailsList/DetailsRowCheck.styles", "./GroupSpacer"], function (require, exports, Styling_1, Utilities_1, DetailsRow_styles_1, DetailsRowCheck_styles_1, GroupSpacer_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var GlobalClassNames = {
root: 'ms-GroupHeader',
compact: 'ms-GroupHeader--compact',
check: 'ms-GroupHeader-check',
dropIcon: 'ms-GroupHeader-dropIcon',
expand: 'ms-GroupHeader-expand',
isCollapsed: 'is-collapsed',
title: 'ms-GroupHeader-title',
isSelected: 'is-selected',
iconTag: 'ms-Icon--Tag',
group: 'ms-GroupedList-group',
isDropping: 'is-dropping',
};
var beziers = {
easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
};
var DEFAULT_GROUP_HEADER_HEIGHT = 48;
var COMPACT_GROUP_HEADER_HEIGHT = 40;
var getStyles = function (props) {
var _a, _b, _c, _d, _e;
var theme = props.theme, className = props.className, selected = props.selected, isCollapsed = props.isCollapsed, compact = props.compact;
// padding from the source to align GroupHeader title with DetailsRow's first cell.
var cellLeftPadding = DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS.cellLeftPadding;
var finalRowHeight = compact ? COMPACT_GROUP_HEADER_HEIGHT : DEFAULT_GROUP_HEADER_HEIGHT;
var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
var checkExpandResetStyles = [
(0, Styling_1.getFocusStyle)(theme),
{
cursor: 'default',
background: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: 0, // cancel default <button> padding
},
];
return {
root: [
classNames.root,
(0, Styling_1.getFocusStyle)(theme),
theme.fonts.medium,
{
// keep the border for height but color it so it's invisible.
borderBottom: "1px solid ".concat(semanticColors.listBackground),
cursor: 'default',
userSelect: 'none',
selectors: (_a = {
':hover': {
background: semanticColors.listItemBackgroundHovered,
color: semanticColors.actionLinkHovered,
}
},
_a["&:hover .".concat(classNames.check)] = {
opacity: 1,
},
// eslint-disable-next-line @fluentui/max-len
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus .").concat(classNames.check, ", :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus .").concat(classNames.check)] = {
opacity: 1,
},
_a[":global(.".concat(classNames.group, ".").concat(classNames.isDropping, ")")] = {
selectors: (_b = {},
_b["& > .".concat(classNames.root, " .").concat(classNames.dropIcon)] = {
transition: "transform ".concat(Styling_1.AnimationVariables.durationValue4, " ").concat(beziers.easeOutCirc, " ") +
"opacity ".concat(Styling_1.AnimationVariables.durationValue1, " ").concat(beziers.easeOutSine),
transitionDelay: Styling_1.AnimationVariables.durationValue3,
opacity: 1,
transform: "rotate(0.2deg) scale(1);", // rotation prevents jittery motion in IE
},
_b[".".concat(classNames.check)] = {
opacity: 0,
},
_b),
},
_a),
},
selected && [
classNames.isSelected,
{
background: semanticColors.listItemBackgroundChecked,
selectors: (_c = {
':hover': {
background: semanticColors.listItemBackgroundCheckedHovered,
}
},
_c["".concat(classNames.check)] = {
opacity: 1,
},
_c),
},
],
compact && [classNames.compact, { border: 'none' }],
className,
],
groupHeaderContainer: [
{
display: 'flex',
alignItems: 'center',
height: finalRowHeight,
},
],
headerCount: [
{
padding: '0px 4px',
},
],
check: [
classNames.check,
checkExpandResetStyles,
{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
// paddingTop and marginTop brought from the DetailsRow.styles.ts with explanation below.
// Ensure that the check cell covers the top border of the cell.
// This ensures the click target does not leave a spot which would
// cause other items to be deselected.
paddingTop: 1,
marginTop: -1,
opacity: 0,
width: DetailsRowCheck_styles_1.CHECK_CELL_WIDTH,
height: finalRowHeight,
selectors: (_d = {},
_d[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
opacity: 1,
},
_d),
},
],
expand: [
classNames.expand,
checkExpandResetStyles,
{
display: 'flex',
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
fontSize: fonts.small.fontSize,
width: GroupSpacer_1.SPACER_WIDTH,
height: finalRowHeight,
color: selected ? palette.neutralPrimary : palette.neutralSecondary,
selectors: {
':hover': {
backgroundColor: selected ? palette.neutralQuaternary : palette.neutralLight,
},
':active': {
backgroundColor: selected ? palette.neutralTertiaryAlt : palette.neutralQuaternaryAlt,
},
},
},
],
expandIsCollapsed: [
isCollapsed
? [
classNames.isCollapsed,
{
transform: 'rotate(0deg)',
transformOrigin: '50% 50%',
transition: 'transform .1s linear',
},
]
: {
transform: (0, Utilities_1.getRTL)(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',
transformOrigin: '50% 50%',
transition: 'transform .1s linear',
},
],
title: [
classNames.title,
{
paddingLeft: cellLeftPadding,
fontSize: compact ? fonts.medium.fontSize : fonts.mediumPlus.fontSize,
fontWeight: isCollapsed ? Styling_1.FontWeights.regular : Styling_1.FontWeights.semibold,
cursor: 'pointer',
outline: 0,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
},
],
dropIcon: [
classNames.dropIcon,
{
position: 'absolute',
left: -26,
fontSize: Styling_1.IconFontSizes.large,
color: palette.neutralSecondary,
transition: "transform ".concat(Styling_1.AnimationVariables.durationValue2, " ").concat(beziers.easeInBack, ", ") +
"opacity ".concat(Styling_1.AnimationVariables.durationValue4, " ").concat(beziers.easeOutSine),
opacity: 0,
transform: 'rotate(0.2deg) scale(0.65)',
transformOrigin: '10px 10px',
selectors: (_e = {},
_e[":global(.".concat(classNames.iconTag, ")")] = {
position: 'absolute',
},
_e),
},
],
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=GroupHeader.styles.js.map