@fluentui/react
Version:
Reusable React components for building web experiences.
69 lines • 2.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stack = void 0;
var tslib_1 = require("tslib");
/** @jsxRuntime classic */
/** @jsx withSlots */
var React = require("react");
var foundation_legacy_1 = require("@fluentui/foundation-legacy");
var Utilities_1 = require("../../Utilities");
var Stack_styles_1 = require("./Stack.styles");
var StackItem_1 = require("./StackItem/StackItem");
var StackView = function (props) {
var _a = props.as, RootType = _a === void 0 ? 'div' : _a, disableShrink = props.disableShrink, wrap = props.wrap, rest = tslib_1.__rest(props, ["as", "disableShrink", "wrap"]);
Utilities_1.warnDeprecations('Stack', props, {
gap: 'tokens.childrenGap',
maxHeight: 'tokens.maxHeight',
maxWidth: 'tokens.maxWidth',
padding: 'tokens.padding',
});
// React.Fragment needs to be ignored before checking for Stack's children
var stackChildren = React.Children.toArray(props.children);
if (stackChildren.length === 1 &&
React.isValidElement(stackChildren[0]) &&
stackChildren[0].type === React.Fragment) {
stackChildren = stackChildren[0].props.children;
}
stackChildren = React.Children.map(stackChildren, function (child, index) {
if (!child) {
return null;
}
if (_isStackItem(child)) {
var defaultItemProps = {
shrink: !disableShrink,
};
return React.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, defaultItemProps), child.props));
}
return child;
});
var nativeProps = Utilities_1.getNativeProps(rest, Utilities_1.htmlElementProperties);
var Slots = foundation_legacy_1.getSlots(props, {
root: RootType,
inner: 'div',
});
if (wrap) {
return (foundation_legacy_1.withSlots(Slots.root, tslib_1.__assign({}, nativeProps),
foundation_legacy_1.withSlots(Slots.inner, null, stackChildren)));
}
return foundation_legacy_1.withSlots(Slots.root, tslib_1.__assign({}, nativeProps), stackChildren);
};
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 = foundation_legacy_1.createComponent(StackView, {
displayName: 'Stack',
styles: Stack_styles_1.styles,
statics: StackStatics,
});
exports.default = exports.Stack;
//# sourceMappingURL=Stack.js.map