Stefan Hacker
90 lines
4.3 KiB
JavaScript
90 lines
4.3 KiB
JavaScript
import { __assign, __rest } from "tslib";
|
|
/** @jsxRuntime classic */
|
|
/** @jsx withSlots */
|
|
import * as React from 'react';
|
|
import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';
|
|
import { useId } from '@fluentui/react-hooks';
|
|
import { css, getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
|
|
import { styles, GlobalClassNames as StackGlobalClassNames } from './Stack.styles';
|
|
import { StackItem } from './StackItem/StackItem';
|
|
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 @typescript-eslint/no-deprecated
|
|
_c = props.doNotRenderFalsyValues,
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
doNotRenderFalsyValues = _c === void 0 ? false : _c, _d = props.enableScopedSelectors, enableScopedSelectors = _d === void 0 ? false : _d, wrap = props.wrap, rest = __rest(props, ["as", "disableShrink", "doNotRenderFalsyValues", "enableScopedSelectors", "wrap"]);
|
|
warnDeprecations('Stack', props, {
|
|
gap: 'tokens.childrenGap',
|
|
maxHeight: 'tokens.maxHeight',
|
|
maxWidth: 'tokens.maxWidth',
|
|
padding: 'tokens.padding',
|
|
});
|
|
var stackInnerId = useId('stack-inner');
|
|
var stackChildren = _processStackChildren(props.children, {
|
|
disableShrink: disableShrink,
|
|
enableScopedSelectors: enableScopedSelectors,
|
|
doNotRenderFalsyValues: doNotRenderFalsyValues,
|
|
});
|
|
var nativeProps = getNativeProps(rest, htmlElementProperties);
|
|
var Slots = getSlots(props, {
|
|
root: RootType,
|
|
inner: 'div',
|
|
});
|
|
if (wrap) {
|
|
return (withSlots(Slots.root, __assign({}, nativeProps),
|
|
withSlots(Slots.inner, { key: stackInnerId }, stackChildren)));
|
|
}
|
|
return withSlots(Slots.root, __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) {
|
|
var fragmentChild = child;
|
|
return fragmentChild.props.children
|
|
? _processStackChildren(fragmentChild.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, __assign(__assign(__assign(__assign({}, defaultItemProps), childAsReactElement.props), (childClassName && { className: childClassName })), (enableScopedSelectors && { className: css(StackGlobalClassNames.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.displayName);
|
|
}
|
|
var StackStatics = {
|
|
Item: StackItem,
|
|
};
|
|
export var Stack = createComponent(StackView, {
|
|
displayName: 'Stack',
|
|
styles: styles,
|
|
statics: StackStatics,
|
|
});
|
|
export default Stack;
|
|
//# sourceMappingURL=Stack.js.map
|