@sigmela/router 0.2.7 → 0.3.0

package/lib/module/Drawer/RenderDrawer.web.js

@@ -0,0 +1,197 @@
+"use strict";
+
+import { StackRenderer } from "../StackRenderer.js";
+import { DrawerContext } from "./DrawerContext.js";
+import { useRouter } from "../RouterContext.js";
+import { DrawerIcon } from './DrawerIcon';
+import { useCallback, useSyncExternalStore, memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isImageSource = value => {
+  if (value == null) return false;
+  const valueType = typeof value;
+  if (valueType === 'number') return true;
+  if (Array.isArray(value)) return value.length > 0;
+  if (valueType === 'object') {
+    const v = value;
+    if ('uri' in v || 'width' in v || 'height' in v) return true;
+  }
+  return false;
+};
+const toColorString = c => typeof c === 'string' ? c : undefined;
+const DrawerStackRenderer = /*#__PURE__*/memo(({
+  stack,
+  appearance
+}) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
+  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
+  const history = useSyncExternalStore(subscribe, get, get);
+  return /*#__PURE__*/_jsx(StackRenderer, {
+    appearance: appearance,
+    stackId: stackId,
+    history: history
+  });
+});
+DrawerStackRenderer.displayName = 'DrawerStackRenderer';
+const DrawerNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+DrawerNodeRenderer.displayName = 'DrawerNodeRenderer';
+const joinPrefixAndPath = (prefix, path) => {
+  const base = (prefix ?? '').trim();
+  const child = (path || '/').trim();
+  if (!base) return child || '/';
+  const baseNorm = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
+  if (!child || child === '/') {
+    return baseNorm || '/';
+  }
+  if (child.startsWith('/')) {
+    return `${baseNorm}${child}`;
+  }
+  return `${baseNorm}/${child}`;
+};
+export const RenderDrawer = /*#__PURE__*/memo(({
+  drawer,
+  appearance
+}) => {
+  const router = useRouter();
+  const subscribe = useCallback(cb => drawer.subscribe(cb), [drawer]);
+  const snapshot = useSyncExternalStore(subscribe, drawer.getState, drawer.getState);
+  const {
+    tabs,
+    index,
+    config,
+    isOpen
+  } = snapshot;
+  const focusedTab = tabs[index];
+  const stack = focusedTab ? drawer.stacks[focusedTab.tabKey] : undefined;
+  const node = focusedTab ? drawer.nodes[focusedTab.tabKey] : undefined;
+  const Screen = focusedTab ? drawer.screens[focusedTab.tabKey] : undefined;
+  const onItemClick = useCallback(nextIndex => {
+    const targetTab = tabs[nextIndex];
+    if (!targetTab) return;
+    const targetStack = drawer.stacks[targetTab.tabKey];
+    const targetNode = drawer.nodes[targetTab.tabKey];
+    if (targetStack) {
+      if (nextIndex !== index) {
+        drawer.onIndexChange(nextIndex);
+      }
+      const firstRoutePath = targetStack.getFirstRoute()?.path;
+      if (firstRoutePath) {
+        router.reset(firstRoutePath);
+      }
+    } else if (targetNode) {
+      if (nextIndex !== index) {
+        drawer.onIndexChange(nextIndex);
+      }
+      const seedPath = targetNode.seed?.()?.path;
+      const fallbackFirstPath = targetNode.getNodeRoutes()?.[0]?.path;
+      const path = seedPath ?? fallbackFirstPath ?? '/';
+      const fullPath = joinPrefixAndPath(targetTab.tabPrefix, path);
+      router.reset(fullPath);
+    } else {
+      if (nextIndex !== index) {
+        drawer.onIndexChange(nextIndex);
+      }
+    }
+
+    // Close drawer on mobile after navigation
+    drawer.close();
+  }, [router, drawer, tabs, index]);
+  const handleItemClick = useCallback(e => {
+    const idx = Number(e.currentTarget.dataset.index);
+    onItemClick(idx);
+  }, [onItemClick]);
+  const handleOverlayClick = useCallback(() => {
+    drawer.close();
+  }, [drawer]);
+  const drawerStyle = useMemo(() => {
+    const bg = toColorString(appearance?.tabBar?.backgroundColor);
+    const style = {};
+    if (bg) {
+      style['--drawer-bg'] = bg;
+    }
+    if (drawer.width !== 280) {
+      style['--drawer-width'] = `${drawer.width}px`;
+    }
+    return Object.keys(style).length ? style : undefined;
+  }, [appearance?.tabBar?.backgroundColor, drawer.width]);
+  const titleBaseStyle = useMemo(() => ({
+    fontFamily: appearance?.tabBar?.title?.fontFamily,
+    fontSize: appearance?.tabBar?.title?.fontSize,
+    fontWeight: appearance?.tabBar?.title?.fontWeight,
+    fontStyle: appearance?.tabBar?.title?.fontStyle
+  }), [appearance?.tabBar?.title?.fontFamily, appearance?.tabBar?.title?.fontSize, appearance?.tabBar?.title?.fontWeight, appearance?.tabBar?.title?.fontStyle]);
+  const CustomDrawer = config.component;
+  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: drawer,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "drawer-container",
+      "data-drawer-open": isOpen ? 'true' : 'false',
+      style: drawerStyle,
+      children: [CustomDrawer ? /*#__PURE__*/_jsx(CustomDrawer, {
+        onItemPress: onItemClick,
+        activeIndex: index,
+        items: tabs,
+        isOpen: isOpen,
+        onClose: handleOverlayClick
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "drawer-sidebar",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "drawer-sidebar-content",
+          children: tabs.map((tab, i) => {
+            const isActive = i === index;
+            const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
+            const title = appearance?.tabBar?.title;
+            const labelColor = isActive ? toColorString(title?.activeColor) ?? toColorString(title?.color) : toColorString(title?.color);
+            const labelStyle = {
+              ...titleBaseStyle,
+              color: labelColor
+            };
+            return /*#__PURE__*/_jsxs("button", {
+              type: "button",
+              "data-index": i,
+              "data-active": isActive ? 'true' : 'false',
+              "aria-current": isActive ? 'page' : undefined,
+              className: `drawer-item${isActive ? ' active' : ''}`,
+              onClick: handleItemClick,
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "drawer-item-icon",
+                children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(DrawerIcon, {
+                  source: tab.icon,
+                  tintColor: iconTint
+                }) : null
+              }), /*#__PURE__*/_jsx("div", {
+                className: "drawer-item-label",
+                style: labelStyle,
+                children: tab.title
+              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
+                className: "drawer-item-badge",
+                children: tab.badgeValue
+              }) : null]
+            }, tab.tabKey);
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "drawer-overlay",
+        onClick: handleOverlayClick
+      }), /*#__PURE__*/_jsx("div", {
+        className: "drawer-main",
+        children: stack ? /*#__PURE__*/_jsx(DrawerStackRenderer, {
+          appearance: appearance,
+          stack: stack
+        }) : node ? /*#__PURE__*/_jsx(DrawerNodeRenderer, {
+          appearance: appearance,
+          node: node
+        }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
+      })]
+    })
+  });
+});

package/lib/module/Drawer/useDrawer.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { useContext } from 'react';
+import { DrawerContext } from "./DrawerContext.js";
+export const useDrawer = () => {
+  const drawer = useContext(DrawerContext);
+  if (!drawer) {
+    throw new Error('useDrawer must be used within a DrawerProvider');
+  }
+  return drawer;
+};

package/lib/module/Navigation.js

@@ -4,7 +4,7 @@ import { ScreenStackItem } from "./ScreenStackItem/index.js";
 import { RouterContext } from "./RouterContext.js";
 import { ScreenStack } from "./ScreenStack/index.js";
 import { StyleSheet } from 'react-native';
-import { useSyncExternalStore, memo, useCallback, useEffect, useState } from 'react';
+import { useSyncExternalStore, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
@@ -38,7 +38,9 @@ export const Navigation = /*#__PURE__*/memo(({
   const {
     rootId
   } = root;
-  const rootTransition = router.getRootTransition();
+  const rootTransitionRef = useRef(undefined);
+  rootTransitionRef.current = router.getRootTransition();
+  const rootTransition = rootTransitionRef.current;
   const rootItems = useStackHistory(router, rootId);
   return /*#__PURE__*/_jsx(RouterContext.Provider, {
     value: router,

package/lib/module/NavigationStack.js

@@ -9,15 +9,20 @@ export class NavigationStack {
   routes = [];
   children = [];
   debugEnabled = false;
+  _cachedRenderer = null;
   constructor(idOrOptions, maybeOptions, maybeDebug) {
     if (typeof idOrOptions === 'string') {
-      this.stackId = idOrOptions ?? `stack-${nanoid()}`;
+      this.stackId = idOrOptions;
       this.defaultOptions = maybeOptions;
       this.debugEnabled = maybeDebug ?? false;
-    } else {
+      this.provider = maybeOptions?.provider;
+    } else if (typeof idOrOptions === 'object') {
       this.stackId = `stack-${nanoid()}`;
       this.defaultOptions = idOrOptions;
-      this.debugEnabled = false;
+      this.debugEnabled = idOrOptions.debug ?? false;
+      this.provider = idOrOptions?.provider;
+    } else {
+      this.stackId = `stack-${nanoid()}`;
     }
   }
   log(message, data) {
@@ -84,6 +89,7 @@ export class NavigationStack {
   }
   addModal(path, mixedComponent, options) {
     return this.addScreen(path, mixedComponent, {
+      syncWithUrl: false,
       ...options,
       stackPresentation: 'modal'
     });
@@ -132,15 +138,26 @@ export class NavigationStack {
     return this.children.slice();
   }
   getRenderer() {
+    if (this._cachedRenderer) {
+      return this._cachedRenderer;
+    }
+
     // eslint-disable-next-line consistent-this
     const stackInstance = this;
     const stackId = stackInstance.getId();
-    return function NavigationStackRenderer(props) {
-      return /*#__PURE__*/React.createElement(StackRenderer, {
+    const provider = this.provider;
+    const renderer = function NavigationStackRenderer(props) {
+      const stackElement = /*#__PURE__*/React.createElement(StackRenderer, {
         stackId: stackId,
         appearance: props.appearance
       });
+      if (provider) {
+        return /*#__PURE__*/React.createElement(provider, null, stackElement);
+      }
+      return stackElement;
     };
+    this._cachedRenderer = renderer;
+    return renderer;
   }
   seed() {
     const first = this.getFirstRoute();