@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Tabs/Tabs.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tabs = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+
+const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    tabs,
+    activeKey,
+    onChange,
+    variant = 'underline',
+    scrollable = false,
+    align = 'left',
+    style,
+    tabStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+
+  // Per-tab measured layouts (key → {x, width}).
+  const [layouts, setLayouts] = (0, _react.useState)({});
+  const indicatorTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const indicatorWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const activeLayout = layouts[activeKey];
+
+  // Animate indicator whenever activeKey or its layout changes.
+  (0, _react.useEffect)(() => {
+    if (!activeLayout) return;
+    const spring = theme.motion.spring.snappy;
+    _reactNative.Animated.parallel([_reactNative.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).
+    _reactNative.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 = (0, _react.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 = (0, _react.useCallback)(tab => {
+    if (tab.disabled) return;
+    if (tab.key === activeKey) return;
+    (0, _index2.triggerHaptic)('selection');
+    onChange(tab.key);
+  }, [activeKey, onChange]);
+  const indicatorIsPill = variant === 'pills';
+
+  // Indicator visual.
+  const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.tabIcon,
+        children: tab.icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: [styles.container, {
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: variant === 'underline' ? _reactNative.StyleSheet.hairlineWidth : 0
+    }, style],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    children: scrollable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [baseRowStyle],
+      keyboardShouldPersistTaps: "handled",
+      children: [renderTabs(), indicator]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: baseRowStyle,
+      children: [renderTabs(), indicator]
+    })
+  });
+});
+Tabs.displayName = 'Tabs';
+const buildStyles = _theme => _reactNative.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
+  }
+});
+var _default = exports.default = Tabs;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+var _Tabs = _interopRequireWildcard(require("./Tabs.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map