@ozen-ui/kit
Version:
React component library
37 lines (36 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = exports.cnBreadcrumbs = void 0;
var tslib_1 = require("tslib");
require("./Breadcrumbs.css");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var react_is_1 = require("react-is");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var BreadcrumbsContext_1 = require("./BreadcrumbsContext");
var constants_1 = require("./constants");
exports.cnBreadcrumbs = (0, classname_1.cn)('Breadcrumbs');
exports.Breadcrumbs = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Breadcrumbs' });
var _a = props.size, size = _a === void 0 ? constants_1.BREADCRUMBS_DEFAULT_SIZE : _a, _b = props.separator, Separator = _b === void 0 ? icons_1.ChevronRightSmallIcon : _b, children = props.children, className = props.className, other = tslib_1.__rest(props, ["size", "separator", "children", "className"]);
var resolvedChildren = (0, react_is_1.isFragment)(children)
? children.props.children
: children;
return (
// TODO: Подумать о возможности выбора рутового компонента
react_1.default.createElement(BreadcrumbsContext_1.BreadcrumbsContext.Provider, { value: { size: size } },
react_1.default.createElement("nav", tslib_1.__assign({ className: (0, exports.cnBreadcrumbs)({
size: size,
}, [className]) }, other, { ref: ref }),
react_1.default.createElement("ol", { className: (0, exports.cnBreadcrumbs)('List') }, react_1.Children.toArray(resolvedChildren).map(function (child, index, arr) {
if (!(0, react_1.isValidElement)(child))
return null;
var isLast = index === arr.length - 1;
return (react_1.default.createElement(react_1.Fragment, { key: child.key || index },
react_1.default.createElement("li", { className: (0, exports.cnBreadcrumbs)('Item') }, child),
!!Separator && !isLast && (react_1.default.createElement("li", { className: (0, exports.cnBreadcrumbs)('Separator'), "aria-hidden": true },
react_1.default.createElement(Separator, { color: "var(--color-content-disabled)", size: "s" })))));
})))));
});
exports.Breadcrumbs.displayName = 'Breadcrumbs';