@colisweb/rescript-toolkit 2.63.0 → 2.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.63.0",
+  "version": "2.64.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",

package/src/router/Toolkit__Router.res

@@ -57,8 +57,23 @@ module Make = (Config: RouterConfig) => {
 
   let useRoute = (): Config.t => RescriptReactRouter.useUrl()->Config.make
 
-  let isRouteEqual = (routeA: Config.t, routeB: Config.t): bool =>
-    routeA->Config.toString === routeB->Config.toString
+  let isRouteEqual = (routeA: Config.t, routeB: Config.t): bool => {
+    let routeA = {
+      let url = routeA->Config.toString
+      let queryParamsIndex = url->Js.String2.indexOf("?")
+
+      queryParamsIndex === -1 ? url : url->Js.String2.slice(~from=0, ~to_=queryParamsIndex)
+    }
+
+    let routeB = {
+      let url = routeB->Config.toString
+      let queryParamsIndex = url->Js.String2.indexOf("?")
+
+      queryParamsIndex === -1 ? url : url->Js.String2.slice(~from=0, ~to_=queryParamsIndex)
+    }
+
+    routeA === routeB
+  }
 
   let useIsCurrentRoute = (route: Config.t): bool => {
     let {currentRoute} = React.useContext(routerContext)
@@ -71,6 +86,40 @@ module Make = (Config: RouterConfig) => {
 
   let toString = Config.toString
 
+  module Breadcrumb = {
+    type link = {
+      route: Config.t,
+      text: React.element,
+    }
+    type state = {links: option<array<link>>}
+
+    type action =
+      | Reset
+      | Update(array<link>)
+
+    let store = Restorative.createStore({links: None}, (_state, action) =>
+      switch action {
+      | Reset => {links: None}
+      | Update(links) => {links: Some(links)}
+      }
+    )
+
+    let use = (routes: array<link>) => {
+      React.useLayoutEffect0(() => {
+        store.dispatch(Update(routes))
+
+        Some(() => store.dispatch(Reset))
+      })
+    }
+  }
+
+  let usePreviousLinkWithDefault = (defaultRoute, cb) => {
+    let {previousRoute} = React.useContext(routerContext)
+    previousRoute->Option.mapWithDefault(defaultRoute, route => {
+      cb(route) ? route : defaultRoute
+    })
+  }
+
   module Link = {
     @react.component
     let make = (
@@ -170,7 +219,13 @@ module Make = (Config: RouterConfig) => {
 
   module SingleLink = {
     @react.component
-    let make = (~link: link, ~isNavOpen: bool, ~isSubLink=false, ~onLinkClick=() => ()) =>
+    let make = (
+      ~link: link,
+      ~isNavOpen: bool,
+      ~isSubLink=false,
+      ~isActive=false,
+      ~onLinkClick=() => (),
+    ) =>
       switch link {
       | Legacy({icon, label, url}) =>
         <a
@@ -198,7 +253,12 @@ module Make = (Config: RouterConfig) => {
       | App({icon, label, route}) =>
         <Link
           route
-          className={cx([commonClassName, isSubLink ? "ml-3" : "", "sidenav-link"])}
+          className={cx([
+            commonClassName,
+            isSubLink ? "ml-3" : "",
+            "sidenav-link",
+            isActive ? "bg-primary-100/75 text-neutral-700" : "",
+          ])}
           activeClassName="bg-primary-100/75 text-neutral-700"
           onClick={_ => onLinkClick()}>
           <span className="overflow-hidden flex">
@@ -240,6 +300,17 @@ module Make = (Config: RouterConfig) => {
         | App({route}) => isRouteEqual(currentRoute, route)
         }
       })
+      let breadcrumb = Breadcrumb.store.useStore()
+
+      let relativeRoute = breadcrumb.links->Option.mapWithDefault(None, breadcrumbLinks => {
+        links->Array.getBy(link => {
+          switch link {
+          | Legacy(_) => false
+          | App({route}) =>
+            breadcrumbLinks->Array.some(breadcrumbLink => breadcrumbLink.route->isRouteEqual(route))
+          }
+        })
+      })
 
       React.useEffect1(() => {
         if !isNavOpen {
@@ -257,11 +328,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             "flex items-center w-full sidenav-link",
-            switch (hasActiveSubRoute, isNavOpen) {
-            | (true, true) => "bg-primary-100/50"
-            | (true, false) => "bg-primary-100/75"
-            | (false, _) => ""
-            },
+            hasActiveSubRoute || relativeRoute->Option.isSome ? "bg-primary-100/75" : "",
           ])}>
           <span className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}>
             groupInfo.icon
@@ -295,11 +362,21 @@ module Make = (Config: RouterConfig) => {
             isOpen ? "h-auto" : "h-0 overflow-hidden",
           ])}>
           {links
-          ->Array.mapWithIndex((i, link) =>
+          ->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
+              key={"sidenav-grouped-" ++ i->Int.toString}
+              link
+              isNavOpen
+              isSubLink=true
+              onLinkClick
+              isActive
             />
-          )
+          })
           ->React.array}
         </div>
       </>