{"size": 1809, "ext": "js", "max_stars_repo_path": "website/src/containers/Nav/utils/linkComponents.js", "max_stars_repo_name": "varijkapil13/atlaskit", "max_stars_repo_stars_event_min_datetime": "2020-05-12T11:46:06.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-12T02:10:34.000Z", "max_issues_repo_path": "website/src/containers/Nav/utils/linkComponents.js", "max_issues_repo_name": "varijkapil13/atlaskit", "max_issues_repo_issues_event_min_datetime": "2019-05-08T06:48:30.000Z", "max_issues_repo_issues_event_max_datetime": "2019-05-08T06:48:30.000Z", "max_forks_repo_path": "website/src/containers/Nav/utils/linkComponents.js", "max_forks_repo_name": "varijkapil13/atlaskit", "max_forks_repo_forks_event_min_datetime": "2020-04-30T09:40:37.000Z", "max_forks_repo_forks_event_max_datetime": "2020-04-30T09:40:37.000Z"}
{"max_stars_count": 7, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 21.7951807229, "max_line_length": 74, "alphanum_fraction": 0.5909342178}
// @flow

import React, { type Node } from 'react';
import { toClass } from 'recompose';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { gridSize } from '@atlaskit/theme';
import { AkNavigationItem } from '@atlaskit/navigation';
import renderNav from './renderNav';

type RouterLinkProps = {
  children: Node,
  className?: string,
  href: string,
  isSelected: boolean,
  onClick: () => mixed,
  pathname: string,
  replace?: boolean,
  subNav?: any,
};

const SubNavWrapper = styled.div`
  padding: 0 0 0 ${() => gridSize() * 4}px;
`;

export function isSubNavExpanded(to: string, pathname: string): boolean {
  const lastSeg = to.split('/').pop();
  return (
    pathname.startsWith(to) &&
    (!!pathname.match(new RegExp(`\/${lastSeg}\/`)) ||
      !!pathname.match(new RegExp(`\/${lastSeg}$`)))
  );
}

const RouterLink = ({
  children,
  href,
  replace,
  className,
  subNav,
  onClick,
  isSelected,
  pathname,
}: RouterLinkProps) => {
  return (
    <div key={pathname}>
      <Link
        className={className}
        onClick={onClick}
        replace={replace}
        style={{ color: 'inherit' }}
        to={href}
      >
        {children}
      </Link>
      {subNav &&
        isSubNavExpanded(href, pathname) && (
          <SubNavWrapper>{renderNav(subNav, { pathname })}</SubNavWrapper>
        )}
    </div>
  );
};

export const RouterNavigationItem = (props: any) => {
  return (
    <AkNavigationItem
      linkComponent={toClass(linkProps => (
        <RouterLink
          onClick={props.onClick}
          pathname={props.pathname}
          subNav={props.subNav}
          {...linkProps}
        />
      ))}
      {...props}
    />
  );
};

export const ExternalNavigationItem = (props: any) => (
  <AkNavigationItem {...props} />
);
