@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,332 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_ICON_SIZE = 24;
+const DEFAULT_PILL_HEIGHT = 36;
+const DEFAULT_PILL_MAX_WIDTH = 120;
+const DEFAULT_PILL_INSET = 16;
+const DEFAULT_UNDERLINE_HEIGHT = 3;
+const formatBadge = value => {
+  if (value === null || value === undefined || value === false) {
+    return null;
+  }
+  if (value === true || value === '·') {
+    return {
+      text: '',
+      isDot: true
+    };
+  }
+  if (typeof value === 'number') {
+    if (value <= 0) {
+      return null;
+    }
+    return {
+      text: value > 99 ? '99+' : String(value),
+      isDot: false
+    };
+  }
+  if (typeof value === 'string') {
+    if (value.length === 0) {
+      return null;
+    }
+    return {
+      text: value,
+      isDot: false
+    };
+  }
+  return null;
+};
+const badgeAccessibilitySuffix = value => {
+  if (value === null || value === undefined || value === false) {
+    return '';
+  }
+  if (typeof value === 'number') {
+    return value > 0 ? `, ${value} unread` : '';
+  }
+  if (value === true || value === '·') {
+    return ', new updates';
+  }
+  if (typeof value === 'string' && value.length > 0) {
+    return `, ${value}`;
+  }
+  return '';
+};
+const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tabs,
+    activeTab,
+    onChange,
+    haptic = 'selection',
+    showLabels = true,
+    variant = 'pill',
+    indicatorPosition = 'bottom',
+    style,
+    indicatorStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tokens = theme.components.bottomNavigation;
+  const iconSize = tokens?.iconSize ?? DEFAULT_ICON_SIZE;
+  const pillHeight = tokens?.pillHeight ?? DEFAULT_PILL_HEIGHT;
+  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
+  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
+  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
+  const [tabWidth, setTabWidth] = React.useState(0);
+
+  // Single Animated.Value holds the pill's absolute pixel offset (active index
+  // × tab width + half the gap between tab edge and pill edge). Folding the
+  // offset into the same value avoids creating a fresh Animated.Value +
+  // Animated.add node on every render — earlier code did that and slowly
+  // leaked addition nodes as the user pressed tabs.
+  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
+  const iconScales = useRef({});
+
+  // Ensure each tab has a persistent scale value
+  tabs.forEach(tab => {
+    if (!iconScales.current[tab.key]) {
+      iconScales.current[tab.key] = new Animated.Value(1);
+    }
+  });
+
+  // Pill width is intrinsic; we compute its rendered offset to keep it
+  // centered within each tab cell. The offset is applied to the pill itself
+  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
+  // — which spans the full tab cell — stays aligned with the tab boundary
+  // instead of being shifted by the pill-centering math.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+
+  // Animate indicator to the active tab's cell edge. Pill mode applies the
+  // centering offset via a static `left` style below; underline mode uses
+  // this value directly.
+  useEffect(() => {
+    if (tabWidth <= 0) {
+      return;
+    }
+    const anim = Animated.spring(indicatorTranslateX, {
+      toValue: activeIndex * tabWidth,
+      tension: 120,
+      friction: 14,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [activeIndex, tabWidth, indicatorTranslateX]);
+  const handleLayout = e => {
+    const total = e.nativeEvent.layout.width;
+    if (tabs.length > 0) {
+      setTabWidth(total / tabs.length);
+    }
+  };
+  const handlePress = tab => {
+    if (tab.key !== activeTab && haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    const scale = iconScales.current[tab.key];
+    if (scale) {
+      Animated.sequence([Animated.timing(scale, {
+        toValue: 1.15,
+        duration: 120,
+        useNativeDriver: true
+      }), Animated.spring(scale, {
+        toValue: 1,
+        tension: 200,
+        friction: 8,
+        useNativeDriver: true
+      })]).start();
+    }
+    onChange(tab.key);
+  };
+  const paddingBottom = Math.max(8, insets.bottom);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    testID: testID,
+    accessibilityRole: "tablist",
+    style: [styles.container, theme.shadows.lg, {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingBottom
+    }, style],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.tabRow,
+      onLayout: handleLayout,
+      children: [variant === 'pill' && pillWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.pill, {
+          width: pillWidth,
+          height: pillHeight,
+          left: pillOffset,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null, tabs.map(tab => {
+        const isActive = tab.key === activeTab;
+        const color = isActive ? theme.colors.primary : theme.colors.text.tertiary;
+        const renderIcon = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;
+        const scale = iconScales.current[tab.key];
+        const badge = formatBadge(tab.badge ?? null);
+        const a11ySuffix = badgeAccessibilitySuffix(tab.badge ?? null);
+        return /*#__PURE__*/_jsxs(Pressable, {
+          onPress: () => handlePress(tab),
+          accessibilityRole: "tab",
+          accessibilityState: {
+            selected: isActive
+          },
+          accessibilityLabel: `${tab.label}${a11ySuffix}`,
+          accessibilityHint: `Switches to ${tab.label}`,
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          style: ({
+            pressed
+          }) => [styles.tab, pressed ? {
+            opacity: 0.85
+          } : null],
+          testID: testID ? `${testID}-tab-${tab.key}` : undefined,
+          children: [/*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.iconWrap, {
+              width: iconSize + 8,
+              height: iconSize + 8,
+              transform: [{
+                scale
+              }]
+            }],
+            children: [renderIcon({
+              color,
+              size: iconSize,
+              focused: isActive
+            }), badge ? /*#__PURE__*/_jsx(View, {
+              style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
+                backgroundColor: theme.colors.error,
+                borderColor: theme.colors.background.elevated
+              }],
+              children: badge.isDot ? null : /*#__PURE__*/_jsx(Text, {
+                style: [styles.badgeText, {
+                  color: theme.colors.text.inverse
+                }],
+                numberOfLines: 1,
+                children: badge.text
+              })
+            }) : null]
+          }), showLabels ? /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [styles.label, {
+              color,
+              fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.normal
+            }, labelStyle],
+            children: tab.label
+          }) : null]
+        }, tab.key);
+      }), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom, {
+          width: tabWidth,
+          height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
+          backgroundColor: theme.colors.primary,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null]
+    })
+  });
+});
+BottomNavigation.displayName = 'BottomNavigation';
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingTop: 6,
+    paddingHorizontal: 4
+  },
+  tabRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  tab: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    gap: 2
+  },
+  iconWrap: {
+    width: DEFAULT_ICON_SIZE + 8,
+    height: DEFAULT_ICON_SIZE + 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  label: {
+    fontSize: theme.typography.fontSize.xs,
+    lineHeight: theme.typography.fontSize.xs * theme.typography.lineHeight.tight,
+    textAlign: 'center'
+  },
+  pill: {
+    position: 'absolute',
+    top: 4,
+    left: 0
+  },
+  underline: {
+    position: 'absolute',
+    left: 0,
+    height: DEFAULT_UNDERLINE_HEIGHT
+  },
+  underlineBottom: {
+    bottom: -6,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  underlineTop: {
+    top: -6,
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 2
+  },
+  badgePill: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 1.5
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    lineHeight: 12,
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+export { BottomNavigation };
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

package/lib/module/components/BottomNavigation/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { BottomNavigation, default } from "./BottomNavigation.js";
+//# sourceMappingURL=index.js.map