12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import classNames from 'classnames';
- import React, { useMemo, useCallback } from 'react';
- import { useUncontrolled } from 'uncontrollable';
- import createWithBsPrefix from './utils/createWithBsPrefix';
- import NavbarBrand from './NavbarBrand';
- import NavbarCollapse from './NavbarCollapse';
- import NavbarToggle from './NavbarToggle';
- import { useBootstrapPrefix } from './ThemeProvider';
- import NavbarContext from './NavbarContext';
- import SelectableContext from './SelectableContext';
- var defaultProps = {
- expand: true,
- variant: 'light',
- collapseOnSelect: false
- };
- var Navbar = React.forwardRef(function (props, ref) {
- var _useUncontrolled = useUncontrolled(props, {
- expanded: 'onToggle'
- }),
- bsPrefix = _useUncontrolled.bsPrefix,
- expand = _useUncontrolled.expand,
- variant = _useUncontrolled.variant,
- bg = _useUncontrolled.bg,
- fixed = _useUncontrolled.fixed,
- sticky = _useUncontrolled.sticky,
- className = _useUncontrolled.className,
- children = _useUncontrolled.children,
- _useUncontrolled$as = _useUncontrolled.as,
- Component = _useUncontrolled$as === void 0 ? 'nav' : _useUncontrolled$as,
- expanded = _useUncontrolled.expanded,
- _onToggle = _useUncontrolled.onToggle,
- onSelect = _useUncontrolled.onSelect,
- collapseOnSelect = _useUncontrolled.collapseOnSelect,
- controlledProps = _objectWithoutPropertiesLoose(_useUncontrolled, ["bsPrefix", "expand", "variant", "bg", "fixed", "sticky", "className", "children", "as", "expanded", "onToggle", "onSelect", "collapseOnSelect"]);
-
- bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar');
- var handleCollapse = useCallback(function () {
- if (onSelect) onSelect.apply(void 0, arguments);
-
- if (collapseOnSelect && expanded) {
- _onToggle(false);
- }
- }, [onSelect, collapseOnSelect, expanded, _onToggle]); // will result in some false positives but that seems better
- // than false negatives. strict `undefined` check allows explicit
- // "nulling" of the role if the user really doesn't want one
-
- if (controlledProps.role === undefined && Component !== 'nav') {
- controlledProps.role = 'navigation';
- }
-
- var expandClass = bsPrefix + "-expand";
- if (typeof expand === 'string') expandClass = expandClass + "-" + expand;
- var navbarContext = useMemo(function () {
- return {
- onToggle: function onToggle() {
- return _onToggle(!expanded);
- },
- bsPrefix: bsPrefix,
- expanded: expanded
- };
- }, [bsPrefix, expanded, _onToggle]);
- return React.createElement(NavbarContext.Provider, {
- value: navbarContext
- }, React.createElement(SelectableContext.Provider, {
- value: handleCollapse
- }, React.createElement(Component, _extends({
- ref: ref
- }, controlledProps, {
- className: classNames(className, bsPrefix, expand && expandClass, variant && bsPrefix + "-" + variant, bg && "bg-" + bg, sticky && "sticky-" + sticky, fixed && "fixed-" + fixed)
- }), children)));
- });
- Navbar.defaultProps = defaultProps;
- Navbar.displayName = 'Navbar';
- Navbar.Brand = NavbarBrand;
- Navbar.Toggle = NavbarToggle;
- Navbar.Collapse = NavbarCollapse;
- Navbar.Text = createWithBsPrefix('navbar-text', {
- Component: 'span'
- });
- export default Navbar;
|