{"version":3,"file":"TopLevelNavItems-b2jOHoqr.js","sources":["../../../app/javascript/components/MainSidebar/TopLevelNavItems.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { NavItem, useCollapsible } from \"playbook-ui\";\nimport { KitsNavItem, kitsType } from \"./NavComponents/KitsNavComponent\";\nimport { SideBarNavItems } from \"./MenuData/SidebarNavItems\";\nimport { OtherNavItems } from \"./NavComponents/OtherNavComponent\";\n\nconst currentURL = window.location.pathname + window.location.search;\n\nexport const TopLevelNavItem = ({\n  dark,\n  type,\n  isActive,\n  setIsActive,\n  kits,\n  kit,\n  category,\n  collapsibles,\n  samples,\n  getting_started,\n  design_guidelines,\n  whats_new,\n}) => {\n  //hook into collapsible logic for top level item\n  const topLevelCollapsibles = SideBarNavItems.map(() => useCollapsible());\n\n  //logic to make it so no navigation if already on that page(prevent unneeded rerenders)\n  const TopLevelLink = (link) => {\n    if (link === \"/kits\") {\n      return currentURL ===\n        `/kits${kitsType(type) ? `?type=${kitsType(type)}` : \"\"}`\n        ? \"\"\n        : `/kits${kitsType(type) ? `?type=${kitsType(type)}` : \"\"}`;\n    } else {\n      return currentURL === link ? \"\" : link;\n    }\n  };\n\n  //set up toggling for top level item\n  const handleComponentsClick = (item, index) => {\n    topLevelCollapsibles.forEach(([, , setCollapsed], idx) => {\n      setIsActive(() => {\n        const newIsActive = {};\n        newIsActive[item] = true;\n        return newIsActive;\n      });\n      if (idx === index) {\n        setCollapsed(false);\n      } else {\n        setCollapsed(true);\n      }\n    });\n    //return true at end to disable default collapsible behavior\n    return true;\n  };\n\n  //NOTE: All toggle and active state logic should be replaced with state once website moves to react router\n  const activeTopLevel = (key, link) => {\n    const kitsLink =\n      link === \"/kits\"\n        ? `/kits${kitsType(type) ? `?type=${kitsType(type)}` : \"\"}`\n        : link;\n    return isActive[key]\n      ? true\n      : Object.keys(isActive).length === 0\n      ? currentURL === kitsLink || currentURL === link\n      : false;\n  };\n\n  // if url starts with /visual_guidelines or /kits, then relevant collapsible nav to be toggled open on first render\n  const currentPage = currentURL.match(/^(\\/[^/]+)\\/[^/]+/);\n  const kitsPage = currentURL.match(/^\\/([^/?#]+)/);\n  // if url starts with /kit, then relevant collapsible nav to be toggled open on first render\n  const kitCategoryPage = currentURL.match(/^\\/([^/]{3})/);\n  // if url matches /guides, than relevant collapsible nav to be toggled open on first render\n  const guidesPage = currentURL.split(\"/\").slice(0, 3).join(\"/\");\n  // if changelog_ is in the current url\n  const changelogPage = currentURL.includes(\"changelog_\");\n  //extract render logic out of return for better performance\n  const renderTopItems = (name, key, children, leftIcon, link, i) => {\n    const [collapsed] = topLevelCollapsibles[i];\n\n    //is link for navitem equal to current url? Logic will be redundant once website moves to react\n    const onCurrentPage = () => {\n      const categoryMatch =\n        (currentPage &&\n          (currentPage[1] === link ||\n            (kitCategoryPage &&\n              `/${kitCategoryPage[1]}` ===\n                link.substring(0, link.length - 1)))) ||\n        (kitsPage && kitsPage[0] === link);\n\n      const guidesMatch = guidesPage === link;\n\n      return categoryMatch || guidesMatch ? true : false;\n    };\n\n    //use state to handle toggle logic to make sure both main click and right icon click works as expected\n    const [toggleTopNav, setToggleTopNav] = useState(\n      onCurrentPage() ? false : true\n    );\n\n    //on first render, active item should be toggled open, after that custom toggling logic to run\n    useEffect(() => {\n      //isActive will always be empty on first render due to rails navigation. Once we move to React router, this code will not be needed\n      if (Object.keys(isActive).length === 0) {\n        setToggleTopNav(onCurrentPage() ? false : true);\n      } else {\n        setToggleTopNav(collapsed);\n      }\n    }, [collapsed, isActive]);\n\n    //right icon click for top level item\n    const handleComponentsIconClick = (i) => {\n      topLevelCollapsibles.forEach(([, toggle], idx) => {\n        if (idx === i) {\n          toggleTopNav === true\n            ? setToggleTopNav(false)\n            : setToggleTopNav(true);\n        }\n      });\n    };\n\n    //callback function so top level nav item stays toggled opwn if child is clicked\n    const updateTopLevelNav = (index) => {\n      topLevelCollapsibles.forEach((collapsible, i) => {\n        const [, , setCollapsed] = collapsible;\n\n        if (i !== index) {\n          setCollapsed(true);\n        } else {\n          setCollapsed(false);\n        }\n      });\n    };\n\n    return (\n      <NavItem\n        active={activeTopLevel(key, link)}\n        collapsed={children && toggleTopNav}\n        collapsible={children}\n        collapsibleTrail={children}\n        cursor=\"pointer\"\n        dark={dark}\n        fontSize=\"small\"\n        fontWeight=\"bolder\"\n        iconLeft={leftIcon}\n        iconRight={children && [\"plus\", \"minus\"]}\n        key={key}\n        link={TopLevelLink(link)}\n        marginY=\"none\"\n        onClick={() => handleComponentsClick(key, i)}\n        onIconRightClick={children && (() => handleComponentsIconClick(i))}\n        paddingY=\"xxs\"\n        target={name === \"Playground\" ? \"_blank\" : \"_self\"}\n        text={name}\n      >\n        {children && (\n          <>\n            {name === \"Components\" ? (\n              <>\n                {kits.map((link, index) => (\n                  <KitsNavItem\n                    link={link}\n                    key={`kits-nav-item-${index}`}\n                    kitIndex={index}\n                    collapsibles={collapsibles}\n                    category={category}\n                    type={type}\n                    dark={dark}\n                    kit={kit}\n                    isActive={isActive}\n                    setIsActive={setIsActive}\n                    updateTopLevelNav={updateTopLevelNav}\n                    parentIndex={i}\n                  />\n                ))}\n              </>\n            ) : (\n              <OtherNavItems\n                name={name}\n                currentURL={currentURL}\n                dark={dark}\n                samples={samples}\n                setIsActive={setIsActive}\n                isActive={isActive}\n                updateTopLevelNav={updateTopLevelNav}\n                parentIndex={i}\n                getting_started={getting_started}\n                design_guidelines={design_guidelines}\n                whats_new={whats_new}\n              />\n            )}\n          </>\n        )}\n      </NavItem>\n    );\n  };\n\n  return (\n    <>\n      {SideBarNavItems.map(({ name, key, children, leftIcon, link }, i) => {\n        return renderTopItems(name, key, children, leftIcon, link, i);\n      })}\n    </>\n  );\n};\n"],"names":["currentURL","TopLevelNavItem","dark","type","isActive","setIsActive","kits","kit","category","collapsibles","samples","getting_started","design_guidelines","whats_new","topLevelCollapsibles","SideBarNavItems","useCollapsible","TopLevelLink","link","kitsType","handleComponentsClick","item","index","setCollapsed","idx","newIsActive","activeTopLevel","key","kitsLink","currentPage","kitsPage","kitCategoryPage","guidesPage","renderTopItems","name","children","leftIcon","i","collapsed","onCurrentPage","toggleTopNav","setToggleTopNav","useState","useEffect","handleComponentsIconClick","toggle","updateTopLevelNav","collapsible","jsx","NavItem","KitsNavItem","OtherNavItems","Fragment"],"mappings":"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"}