@ozen-ui/kit
Version:
React component library
44 lines (43 loc) • 2.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stack = exports.cnStack = void 0;
var tslib_1 = require("tslib");
require("./Stack.css");
var react_1 = tslib_1.__importStar(require("react"));
var classnames_1 = require("@bem-react/classnames");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var constants_1 = require("./constants");
var utils_1 = require("./utils");
exports.cnStack = (0, classname_1.cn)('Stack');
exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'Stack',
});
var _a = props.as, Tag = _a === void 0 ? constants_1.STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
var childNodes = react_1.Children.toArray(children);
if (!childNodes.length) {
return null;
}
var resolveChildren = function () {
if (!shouldWrapChildren && !divider) {
return children;
}
return childNodes.map(function (child, i) {
if (!(0, react_1.isValidElement)(child))
return null;
return (react_1.default.createElement(react_1.Fragment, { key: child.key },
shouldWrapChildren ? (react_1.default.createElement("div", { className: (0, exports.cnStack)('Item') }, child)) : (child),
divider && childNodes.length - 1 !== i && divider));
});
};
return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { className: (0, classnames_1.classnames)((0, exports.cnStack)('', {
align: align,
justify: justify,
fullWidth: fullWidth,
wrap: wrap,
}), (0, utils_1.generateDirectionCn)(exports.cnStack, direction), (0, utils_1.generateGapCn)(exports.cnStack, gap), className), ref: ref }), resolveChildren()));
});
exports.Stack.displayName = 'Stack';