@colisweb/rescript-toolkit 4.11.2 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.11.2",
+  "version": "4.12.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/router/Toolkit__Router.res

@@ -206,15 +206,17 @@ module Make = (Config: RouterConfig) => {
   and link =
     | Legacy(legacyLink)
     | App(appLink)
+    | Custom(React.element)
   and groupInfo = {
     label: React.element,
     icon: React.element,
-    activeForCurrentRoute?: Config.t => bool,
+    hideContentWhenClosed?: bool,
   }
   and appLink = {
     route: Config.t,
     icon?: React.element,
     label: React.element,
+    disabledActiveLink?: bool,
   }
   and legacyLink = {
     url: string,
@@ -239,6 +241,7 @@ module Make = (Config: RouterConfig) => {
       ~onLinkClick=() => (),
     ) =>
       switch link {
+      | Custom(element) => element
       | Legacy(config) =>
         let {label, url} = config
         <a
@@ -267,6 +270,9 @@ module Make = (Config: RouterConfig) => {
         </a>
       | App(config) =>
         let {label, route} = config
+
+        let disabledActiveLink = config.disabledActiveLink->Option.getWithDefault(false)
+
         <Link
           route
           className={cx([
@@ -274,7 +280,7 @@ module Make = (Config: RouterConfig) => {
             isSubLink ? "ml-3" : "",
             config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
-            isActive ? "bg-primary-100/75 text-neutral-700" : "",
+            isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
           ])}
           activeClassName="bg-primary-100/75 text-neutral-700"
           onClick={_ => onLinkClick()}>
@@ -302,6 +308,28 @@ module Make = (Config: RouterConfig) => {
   }
 
   module GroupedLinks = {
+    module LinksList = {
+      @react.component
+      let make = (~links, ~relativeRoute, ~isNavOpen, ~onLinkClick) => {
+        links
+        ->Array.mapWithIndex((i, link) => {
+          let isActive = switch (relativeRoute, link) {
+          | (Some(App({route: relativeRoute})), App({route})) => relativeRoute->isRouteEqual(route)
+          | _ => false
+          }
+          <SingleLink
+            key={"sidenav-grouped-" ++ i->Int.toString}
+            link
+            isNavOpen
+            isSubLink=true
+            onLinkClick
+            isActive
+          />
+        })
+        ->React.array
+      }
+    }
+
     @react.component
     let make = (
       ~groupInfo: groupInfo,
@@ -316,6 +344,7 @@ module Make = (Config: RouterConfig) => {
       let hasActiveSubRoute = links->Array.some(link => {
         switch link {
         | Legacy(_) => false
+        | Custom(_) => false
         | App({route}) => isRouteEqual(currentRoute, route)
         }
       })
@@ -325,6 +354,7 @@ module Make = (Config: RouterConfig) => {
         links->Array.getBy(link => {
           switch link {
           | Legacy(_) => false
+          | Custom(_) => false
           | App({route}) =>
             breadcrumbLinks->Array.some(breadcrumbLink => breadcrumbLink.route->isRouteEqual(route))
           }
@@ -380,23 +410,11 @@ module Make = (Config: RouterConfig) => {
             "transition ease-linear duration-300",
             isOpen ? "h-auto" : "h-0 overflow-hidden",
           ])}>
-          {links
-          ->Array.mapWithIndex((i, link) => {
-            let isActive = switch (relativeRoute, link) {
-            | (Some(App({route: relativeRoute})), App({route})) =>
-              relativeRoute->isRouteEqual(route)
-            | _ => false
-            }
-            <SingleLink
-              key={"sidenav-grouped-" ++ i->Int.toString}
-              link
-              isNavOpen
-              isSubLink=true
-              onLinkClick
-              isActive
-            />
-          })
-          ->React.array}
+          {switch groupInfo.hideContentWhenClosed {
+          | Some(true) =>
+            isOpen ? <LinksList links relativeRoute onLinkClick isNavOpen /> : React.null
+          | _ => <LinksList links relativeRoute onLinkClick isNavOpen />
+          }}
         </div>
       </>
     }