@webority-technologies/mobile 0.0.1

package/lib/module/components/Tabs/Tabs.js

@@ -0,0 +1,200 @@
+"use strict";
+
+/**
+ * Tabs — top tabs with animated underline (or pills) indicator.
+ *
+ * Layout: equal-width row by default, or horizontal-scrollable when
+ * `scrollable` is true. The active indicator (underline or pill) is an
+ * Animated.View positioned absolutely; its translateX + width spring to the
+ * measured layout of the active tab. Driven by native driver where possible
+ * (transform); width animates separately on the JS thread because RN's
+ * native driver does not support layout props.
+ */
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tabs,
+    activeKey,
+    onChange,
+    variant = 'underline',
+    scrollable = false,
+    align = 'left',
+    style,
+    tabStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+
+  // Per-tab measured layouts (key → {x, width}).
+  const [layouts, setLayouts] = useState({});
+  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const activeLayout = layouts[activeKey];
+
+  // Animate indicator whenever activeKey or its layout changes.
+  useEffect(() => {
+    if (!activeLayout) return;
+    const spring = theme.motion.spring.snappy;
+    Animated.parallel([Animated.spring(indicatorTranslateX, {
+      toValue: activeLayout.x,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: true
+    }),
+    // width is a layout prop — must run on JS thread (useNativeDriver: false).
+    Animated.spring(indicatorWidth, {
+      toValue: activeLayout.width,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: false
+    })]).start();
+  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy]);
+  const handleLayout = useCallback(key => e => {
+    const {
+      x,
+      width
+    } = e.nativeEvent.layout;
+    setLayouts(prev => {
+      const existing = prev[key];
+      if (existing && existing.x === x && existing.width === width) return prev;
+      return {
+        ...prev,
+        [key]: {
+          x,
+          width
+        }
+      };
+    });
+  }, []);
+  const handlePress = useCallback(tab => {
+    if (tab.disabled) return;
+    if (tab.key === activeKey) return;
+    triggerHaptic('selection');
+    onChange(tab.key);
+  }, [activeKey, onChange]);
+  const indicatorIsPill = variant === 'pills';
+
+  // Indicator visual.
+  const indicator = /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, {
+      width: indicatorWidth,
+      transform: [{
+        translateX: indicatorTranslateX
+      }],
+      backgroundColor: indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
+      borderRadius: indicatorIsPill ? theme.radius.full : 0
+    }]
+  });
+  const renderTabs = () => tabs.map(tab => {
+    const isActive = tab.key === activeKey;
+    const isDisabled = tab.disabled === true;
+    return /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => handlePress(tab),
+      onLayout: handleLayout(tab.key),
+      disabled: isDisabled,
+      accessibilityRole: "tab",
+      accessibilityLabel: tab.label,
+      accessibilityState: {
+        selected: isActive,
+        disabled: isDisabled
+      },
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.tab, scrollable ? null : styles.tabFlex, {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        opacity: isDisabled ? 0.45 : 1,
+        backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+      }, tabStyle],
+      children: [tab.icon ? /*#__PURE__*/_jsx(View, {
+        style: styles.tabIcon,
+        children: tab.icon
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.tabLabel, {
+          color: isActive ? theme.colors.primary : theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+        }],
+        numberOfLines: 1,
+        children: tab.label
+      })]
+    }, tab.key);
+  });
+  const baseRowStyle = {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    justifyContent: scrollable ? 'flex-start' : align === 'center' ? 'center' : 'flex-start',
+    position: 'relative'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, {
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: variant === 'underline' ? StyleSheet.hairlineWidth : 0
+    }, style],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    children: scrollable ? /*#__PURE__*/_jsxs(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [baseRowStyle],
+      keyboardShouldPersistTaps: "handled",
+      children: [renderTabs(), indicator]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: baseRowStyle,
+      children: [renderTabs(), indicator]
+    })
+  });
+});
+Tabs.displayName = 'Tabs';
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative'
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tabFlex: {
+    flex: 1
+  },
+  tabIcon: {
+    marginRight: 6
+  },
+  tabLabel: {
+    includeFontPadding: false
+  },
+  indicatorUnderline: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    height: 2
+  },
+  indicatorPill: {
+    position: 'absolute',
+    left: 0,
+    top: 4,
+    bottom: 4,
+    zIndex: -1
+  }
+});
+export { Tabs };
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

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

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