office-ui-fabric-react/lib/components/Stack/Stack.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/** @jsx withSlots */
import * as React from 'react';
import { withSlots, createComponent, getSlots } from '../../Foundation';
import { getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
import { styles } from './Stack.styles';
import { StackItem } from './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"]);
    warnDeprecations('Stack', props, {
        gap: 'tokens.childrenGap',
        maxHeight: 'tokens.maxHeight',
        maxWidth: 'tokens.maxWidth',
        padding: 'tokens.padding'
    });
    var stackChildren = React.Children.map(props.children, function (child, index) {
        if (!child) {
            return null;
        }
        if (_isStackItem(child)) {
            var defaultItemProps = {
                shrink: !disableShrink
            };
            return React.cloneElement(child, tslib_1.__assign({}, defaultItemProps, child.props));
        }
        return child;
    });
    var nativeProps = getNativeProps(rest, htmlElementProperties);
    var Slots = getSlots(props, {
        root: RootType,
        inner: 'div'
    });
    if (wrap) {
        return (withSlots(Slots.root, tslib_1.__assign({}, nativeProps),
            withSlots(Slots.inner, null, stackChildren)));
    }
    return 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/OfficeDev/office-ui-fabric-react/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