@fluentui/react
Version:
Reusable React components for building web experiences.
161 lines • 8.87 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "./StackItem/StackItem.styles", "./StackUtils"], function (require, exports, tslib_1, Styling_1, StackItem_styles_1, StackUtils_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styles = exports.GlobalClassNames = void 0;
var nameMap = {
start: 'flex-start',
end: 'flex-end',
};
exports.GlobalClassNames = {
root: 'ms-Stack',
inner: 'ms-Stack-inner',
child: 'ms-Stack-child',
};
var styles = function (props, theme, tokens) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var className = props.className, disableShrink = props.disableShrink, enableScopedSelectors = props.enableScopedSelectors, grow = props.grow, horizontal = props.horizontal, horizontalAlign = props.horizontalAlign, reversed = props.reversed, verticalAlign = props.verticalAlign, verticalFill = props.verticalFill, wrap = props.wrap;
var classNames = (0, Styling_1.getGlobalClassNames)(exports.GlobalClassNames, theme);
/* eslint-disable @typescript-eslint/no-deprecated */
var childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;
var maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;
var maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;
var padding = tokens && tokens.padding ? tokens.padding : props.padding;
/* eslint-enable @typescript-eslint/no-deprecated */
var _p = (0, StackUtils_1.parseGap)(childrenGap, theme), rowGap = _p.rowGap, columnGap = _p.columnGap;
var horizontalMargin = "".concat(-0.5 * columnGap.value).concat(columnGap.unit);
var verticalMargin = "".concat(-0.5 * rowGap.value).concat(rowGap.unit);
// styles to be applied to all direct children regardless of wrap or direction
var childStyles = {
textOverflow: 'ellipsis',
};
var childSelector = '> ' + (enableScopedSelectors ? '.' + exports.GlobalClassNames.child : '*');
var disableShrinkStyles = (_a = {},
// flexShrink styles are applied by the StackItem
_a["".concat(childSelector, ":not(.").concat(StackItem_styles_1.GlobalClassNames.root, ")")] = {
flexShrink: 0,
},
_a);
if (wrap) {
return {
root: [
classNames.root,
{
flexWrap: 'wrap',
maxWidth: maxWidth,
maxHeight: maxHeight,
width: 'auto',
overflow: 'visible',
height: '100%',
},
horizontalAlign && (_b = {},
_b[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
_b),
verticalAlign && (_c = {},
_c[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
_c),
className,
{
// not allowed to be overridden by className
// since this is necessary in order to prevent collapsing margins
display: 'flex',
},
horizontal && {
height: verticalFill ? '100%' : 'auto',
},
],
inner: [
classNames.inner,
(_d = {
display: 'flex',
flexWrap: 'wrap',
marginLeft: horizontalMargin,
marginRight: horizontalMargin,
marginTop: verticalMargin,
marginBottom: verticalMargin,
overflow: 'visible',
boxSizing: 'border-box',
padding: (0, StackUtils_1.parsePadding)(padding, theme),
// avoid unnecessary calc() calls if horizontal gap is 0
width: columnGap.value === 0 ? '100%' : "calc(100% + ".concat(columnGap.value).concat(columnGap.unit, ")"),
maxWidth: '100vw'
},
_d[childSelector] = tslib_1.__assign({ margin: "".concat(0.5 * rowGap.value).concat(rowGap.unit, " ").concat(0.5 * columnGap.value).concat(columnGap.unit) }, childStyles),
_d),
disableShrink && disableShrinkStyles,
horizontalAlign && (_e = {},
_e[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
_e),
verticalAlign && (_f = {},
_f[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
_f),
horizontal && (_g = {
flexDirection: reversed ? 'row-reverse' : 'row',
// avoid unnecessary calc() calls if vertical gap is 0
height: rowGap.value === 0 ? '100%' : "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
},
_g[childSelector] = {
maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - ".concat(columnGap.value).concat(columnGap.unit, ")"),
},
_g),
!horizontal && (_h = {
flexDirection: reversed ? 'column-reverse' : 'column',
height: "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
},
_h[childSelector] = {
maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - ".concat(rowGap.value).concat(rowGap.unit, ")"),
},
_h),
],
};
}
return {
root: [
classNames.root,
(_j = {
display: 'flex',
flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',
flexWrap: 'nowrap',
width: 'auto',
height: verticalFill ? '100%' : 'auto',
maxWidth: maxWidth,
maxHeight: maxHeight,
padding: (0, StackUtils_1.parsePadding)(padding, theme),
boxSizing: 'border-box'
},
_j[childSelector] = childStyles,
_j),
disableShrink && disableShrinkStyles,
grow && {
flexGrow: grow === true ? 1 : grow,
},
horizontalAlign && (_k = {},
_k[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
_k),
verticalAlign && (_l = {},
_l[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
_l),
horizontal &&
columnGap.value > 0 && (_m = {},
// apply gap margin to every direct child except the first direct child if the direction is not reversed,
// and the last direct one if it is
_m[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
marginLeft: "".concat(columnGap.value).concat(columnGap.unit),
},
_m),
!horizontal &&
rowGap.value > 0 && (_o = {},
// apply gap margin to every direct child except the first direct child if the direction is not reversed,
// and the last direct one if it is
_o[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
marginTop: "".concat(rowGap.value).concat(rowGap.unit),
},
_o),
className,
],
// TODO: this cast may be hiding some potential issues with styling and name
// lookups and should be removed
};
};
exports.styles = styles;
});
//# sourceMappingURL=Stack.styles.js.map