@ozen-ui/kit

Version:
React component library
34 lines (33 loc) • 2.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = exports.cnHeader = void 0;
var tslib_1 = require("tslib");
require("./Header.css");
require("./modules/HeaderAccount/HeaderAccount.css");
require("./modules/HeaderLogo/HeaderLogo.css");
require("./modules/HeaderContent/HeaderContent.css");
require("./modules/HeaderContentAdditional/HeaderContentAdditional.css");
require("./modules/HeaderContentMain/HeaderContentMain.css");
require("./modules/HeaderInput/HeaderInput.css");
require("./modules/HeaderMenuButton/HeaderMenuButton.css");
var react_1 = tslib_1.__importDefault(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var utils_1 = require("../../utils");
var Paper_1 = require("../Paper");
var constants_1 = require("./constants");
exports.cnHeader = (0, utils_1.cn)('Header');
exports.Header = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var _a;
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'Header',
    });
    var _b = props.as, as = _b === void 0 ? constants_1.HEADER_DEFAULT_TAG : _b, logo = props.logo, children = props.children, className = props.className, _c = props.contentLogoRatio, contentLogoRatio = _c === void 0 ? constants_1.HEADER_DEFAULT_CONTENT_LOGO_RATIO : _c, _d = props.withBackground, withBackground = _d === void 0 ? constants_1.HEADER_DEFAULT_BACKGROUND : _d, style = props.style, other = tslib_1.__rest(props, ["as", "logo", "children", "className", "contentLogoRatio", "withBackground", "style"]);
    var contentFlex = contentLogoRatio * 100;
    var logoFlex = 100 - contentFlex;
    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({}, other, { style: tslib_1.__assign(tslib_1.__assign({}, style), (0, utils_1.generateCSSVariables)((_a = {},
            _a[constants_1.HEADER_CSS_VARIABLE.CONTENT_FLEX] = contentFlex,
            _a[constants_1.HEADER_CSS_VARIABLE.LOGO_FLEX] = logoFlex,
            _a))), as: as, ref: ref, className: (0, exports.cnHeader)({ withBackground: withBackground }, [className]), background: withBackground ? 'main' : undefined, radius: "xl" }), logo !== null && logo !== void 0 ? logo : (react_1.default.createElement("div", { className: (0, exports.cnHeader)('LogoPlaceholder'), style: { flex: logoFlex } })),
        children));
});