UNPKG

@react-md/app-bar

Version:

This small package implments the AppBar spec in material design.

68 lines 3.6 kB
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import { jsx as _jsx } from "react/jsx-runtime"; import { forwardRef } from "react"; import cn from "classnames"; import { bem } from "@react-md/utils"; import { InheritContext, ParentContext, useInheritContext, useParentContext, } from "./useInheritContext"; var block = bem("rmd-app-bar"); /** * This component is used to create a top-level app bar in your application that * can be used to contain a navigation menu toggle button, the app's logo and/or * title, as well as any top-level actions that will be reused throughout your * app. When using this component with the `fixed` prop, it is recommended to * also use one of the "offset class names" so that your content will not be * converted by the app bar. You can also use any of the exposed mixins to add * these offsets as well. */ export var AppBar = forwardRef(function AppBar(_a, ref) { var _b; var className = _a.className, children = _a.children, _c = _a.theme, propTheme = _c === void 0 ? "primary" : _c, _d = _a.component, propComponent = _d === void 0 ? "header" : _d, _e = _a.height, height = _e === void 0 ? "normal" : _e, _f = _a.fixed, fixed = _f === void 0 ? false : _f, _g = _a.fixedPosition, fixedPosition = _g === void 0 ? "top" : _g, _h = _a.fixedElevation, fixedElevation = _h === void 0 ? true : _h, inheritColor = _a.inheritColor, _j = _a.flexWrap, flexWrap = _j === void 0 ? height === "none" || height === "prominent" || height === "prominent-dense" : _j, remaining = __rest(_a, ["className", "children", "theme", "component", "height", "fixed", "fixedPosition", "fixedElevation", "inheritColor", "flexWrap"]); var parentContext = useParentContext(); var inheritContext = useInheritContext(undefined); var inherit; var theme = propTheme; var Component = propComponent; if (typeof inheritColor === "boolean") { inherit = inheritColor; } else if (parentContext) { inherit = inheritContext; theme = "clear"; Component = "div"; } else { inherit = theme !== "clear" && theme !== "default"; } return (_jsx(ParentContext.Provider, __assign({ value: true }, { children: _jsx(InheritContext.Provider, __assign({ value: inherit }, { children: _jsx(Component, __assign({}, remaining, { className: cn(block((_b = {}, _b[theme] = theme !== "clear", _b[height] = height !== "none", _b.wrap = flexWrap, _b.fixed = fixed, _b[fixedPosition] = fixed, _b["fixed-elevation"] = fixed && fixedElevation, _b)), className), ref: ref }, { children: children })) })) }))); }); //# sourceMappingURL=AppBar.js.map