@fluentui/react
Version:
Reusable React components for building web experiences.
80 lines • 4.66 kB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/foundation-legacy", "../../Utilities", "./Stack.styles", "./StackItem/StackItem"], function (require, exports, tslib_1, React, foundation_legacy_1, Utilities_1, Stack_styles_1, StackItem_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stack = void 0;
var StackView = function (props) {
var _a = props.as, RootType = _a === void 0 ? 'div' : _a, _b = props.disableShrink, disableShrink = _b === void 0 ? false : _b,
// eslint-disable-next-line deprecation/deprecation
_c = props.doNotRenderFalsyValues,
// eslint-disable-next-line deprecation/deprecation
doNotRenderFalsyValues = _c === void 0 ? false : _c, _d = props.enableScopedSelectors, enableScopedSelectors = _d === void 0 ? false : _d, wrap = props.wrap, rest = tslib_1.__rest(props, ["as", "disableShrink", "doNotRenderFalsyValues", "enableScopedSelectors", "wrap"]);
(0, Utilities_1.warnDeprecations)('Stack', props, {
gap: 'tokens.childrenGap',
maxHeight: 'tokens.maxHeight',
maxWidth: 'tokens.maxWidth',
padding: 'tokens.padding',
});
var stackChildren = _processStackChildren(props.children, {
disableShrink: disableShrink,
enableScopedSelectors: enableScopedSelectors,
doNotRenderFalsyValues: doNotRenderFalsyValues,
});
var nativeProps = (0, Utilities_1.getNativeProps)(rest, Utilities_1.htmlElementProperties);
var Slots = (0, foundation_legacy_1.getSlots)(props, {
root: RootType,
inner: 'div',
});
if (wrap) {
return ((0, foundation_legacy_1.withSlots)(Slots.root, tslib_1.__assign({}, nativeProps),
(0, foundation_legacy_1.withSlots)(Slots.inner, null, stackChildren)));
}
return (0, foundation_legacy_1.withSlots)(Slots.root, tslib_1.__assign({}, nativeProps), stackChildren);
};
function _processStackChildren(children, _a) {
var disableShrink = _a.disableShrink, enableScopedSelectors = _a.enableScopedSelectors, doNotRenderFalsyValues = _a.doNotRenderFalsyValues;
var childrenArray = React.Children.toArray(children);
childrenArray = React.Children.map(childrenArray, function (child) {
if (!child) {
return doNotRenderFalsyValues ? null : child;
}
// We need to allow children that aren't falsy values, but not valid elements since they could be
// a string like <Stack>{'sample string'}</Stack>
if (!React.isValidElement(child)) {
return child;
}
if (child.type === React.Fragment) {
return child.props.children
? _processStackChildren(child.props.children, { disableShrink: disableShrink, enableScopedSelectors: enableScopedSelectors, doNotRenderFalsyValues: doNotRenderFalsyValues })
: null;
}
var childAsReactElement = child;
var defaultItemProps = {};
if (_isStackItem(child)) {
defaultItemProps = { shrink: !disableShrink };
}
var childClassName = childAsReactElement.props.className;
return React.cloneElement(childAsReactElement, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, defaultItemProps), childAsReactElement.props), (childClassName && { className: childClassName })), (enableScopedSelectors && { className: (0, Utilities_1.css)(Stack_styles_1.GlobalClassNames.child, childClassName) })));
});
return childrenArray;
}
function _isStackItem(item) {
// In theory, we should be able to just check item.type === StackItem.
// However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
// the object identity is different despite the function implementation being the same.
return (!!item &&
typeof item === 'object' &&
!!item.type &&
// StackItem is generated by createComponent, so we need to check its displayName instead of name
item.type.displayName === StackItem_1.StackItem.displayName);
}
var StackStatics = {
Item: StackItem_1.StackItem,
};
exports.Stack = (0, foundation_legacy_1.createComponent)(StackView, {
displayName: 'Stack',
styles: Stack_styles_1.styles,
statics: StackStatics,
});
exports.default = exports.Stack;
});
//# sourceMappingURL=Stack.js.map