github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/lib/components/nav.jsx (about)

     1  import React from "react";
     2  import {NavLink as RouterLink, useHref, useLinkClickHandler} from "react-router-dom";
     3  
     4  import Nav from "react-bootstrap/Nav";
     5  
     6  import {buildURL} from "../hooks/router";
     7  
     8  const wrapComponent = (component) => {
     9      const linkWrapper = React.forwardRef(({navigate, onClick, to, target, replace, state, ...rest}, ref) => {
    10          const href = useHref(to);
    11          const handleClick = useLinkClickHandler(to, {
    12              replace,
    13              state,
    14              target,
    15          });
    16  
    17          const props = {
    18              ...rest,
    19              ref,
    20              href,
    21              onClick: (event) => {
    22                  if (onClick && typeof onClick === "function") {
    23                      onClick(event);
    24                  }
    25  
    26                  if (!event.defaultPrevented) {
    27                      handleClick(event);
    28                  }
    29              },
    30              target,
    31              replace,
    32              navigate,
    33          };
    34          return React.createElement(component, props);
    35      });
    36      linkWrapper.displayName = "linkWrapper";
    37      return linkWrapper;
    38  }
    39  
    40  export const Link = (props) => {
    41      const dontPassTheseProps = ['href', 'to', 'children', 'components', 'component'];
    42      const filteredProps = Object.entries(props).filter(([key]) => {
    43          return !dontPassTheseProps.includes(key);
    44      });
    45      const linkProps = Object.fromEntries(filteredProps);
    46      linkProps.to = props.href ? buildURL(props.href) : props.href;
    47      if (props.component) {
    48          return React.createElement(wrapComponent(props.component), linkProps, props.children);
    49      }
    50  
    51      return React.createElement(RouterLink, linkProps, props.children);
    52  }
    53  
    54  export const NavItem = ({href, active, children}) => {
    55      return (
    56          <Nav.Item>
    57              <Link href={href} component={Nav.Link} active={active}>
    58                  <>{children}</>
    59              </Link>
    60          </Nav.Item>
    61      );
    62  };