@sigmela/router 0.2.8 → 0.3.1

package/lib/module/TabBar/TabBar.js

@@ -10,6 +10,7 @@ export class TabBar {
   stacks = {};
   nodes = {};
   listeners = new Set();
+  _cachedRenderer = null;
   constructor(options = {}) {
     this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
     this.state = {
@@ -146,14 +147,20 @@ export class TabBar {
     return children;
   }
   getRenderer() {
+    if (this._cachedRenderer) {
+      return this._cachedRenderer;
+    }
+
     // eslint-disable-next-line consistent-this
     const tabBarInstance = this;
-    return function TabBarScreen(props) {
+    const renderer = function TabBarScreen(props) {
       return /*#__PURE__*/React.createElement(RenderTabBar, {
         tabBar: tabBarInstance,
         appearance: props?.appearance
       });
     };
+    this._cachedRenderer = renderer;
+    return renderer;
   }
   seed() {
     const activeTab = this.state.tabs[this.state.index];

package/lib/module/TabBar/TabIcon.web.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Image } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 const resolveImageUri = source => {
@@ -20,18 +20,23 @@ export const TabIcon = /*#__PURE__*/memo(({
 }) => {
   const iconUri = resolveImageUri(source);
   const useMask = Boolean(tintColor && iconUri);
-  if (useMask && iconUri) {
-    const maskStyle = {
+  const maskStyle = useMemo(() => {
+    if (!useMask || !iconUri) return undefined;
+    return {
       backgroundColor: tintColor,
       WebkitMaskImage: `url(${iconUri})`,
-      maskImage: `url(${iconUri})`,
       WebkitMaskSize: 'contain',
-      maskSize: 'contain',
       WebkitMaskRepeat: 'no-repeat',
-      maskRepeat: 'no-repeat',
       WebkitMaskPosition: 'center',
-      maskPosition: 'center'
+      maskImage: `url(${iconUri})`,
+      maskSize: 'contain',
+      maskRepeat: 'no-repeat',
+      maskPosition: 'center',
+      width: '100%',
+      height: '100%'
     };
+  }, [tintColor, iconUri, useMask]);
+  if (maskStyle) {
     return /*#__PURE__*/_jsx("div", {
       style: maskStyle
     });

package/lib/module/index.js

@@ -3,6 +3,8 @@
 export { useTabBar } from "./TabBar/useTabBar.js";
 export { useTabBarHeight, TAB_BAR_HEIGHT } from "./TabBar/useTabBarHeight.js";
 export { TabBar } from "./TabBar/TabBar.js";
+export { Drawer } from "./Drawer/Drawer.js";
+export { useDrawer } from "./Drawer/useDrawer.js";
 export { SplitView } from "./SplitView/SplitView.js";
 export { useSplitView } from "./SplitView/useSplitView.js";
 export { Router } from "./Router.js";