one/dist/esm/ui/TabTrigger.native.js

One is a new React Framework that makes Vite serve both native and web.

import { jsx as _jsx } from "react/jsx-runtime";
import { Slot } from "@radix-ui/react-slot";
import { use, useCallback } from "react";
import { StyleSheet, Pressable } from "react-native";
import { TabTriggerMapContext } from "./TabContext.native.js";
import { appendBaseUrl } from "../fork/getPathFromState-mods.native.js";
import { router } from "../router/imperative-api.native.js";
import { stripGroupSegmentsFromPath } from "../router/matchers.native.js";
import { useNavigatorContext } from "../views/Navigator.native.js";
var TabTriggerSlot = Slot;
function shouldHandleMouseEvent(e) {
  return e && "button" in e ? !e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.button == null || e.button === 0) && [void 0, null, "", "self"].includes(e.currentTarget.target) : !0;
}
function TabTrigger(param) {
  var {
      asChild,
      name,
      href,
      resetOnFocus,
      ...props
    } = param,
    {
      trigger,
      triggerProps
    } = useTabTrigger({
      name,
      resetOnFocus,
      ...props
    });
  if (asChild) return /* @__PURE__ */_jsx(TabTriggerSlot, {
    style: styles.tabTrigger,
    ...props,
    ...triggerProps,
    href: trigger?.resolvedHref,
    children: props.children
  });
  var reactNativeWebProps = {
    href: trigger?.resolvedHref
  };
  return /* @__PURE__ */_jsx(Pressable, {
    style: styles.tabTrigger,
    ...reactNativeWebProps,
    ...props,
    ...triggerProps,
    children: props.children
  });
}
function isTabTrigger(child) {
  return child.type === TabTrigger;
}
function useTabTrigger(options) {
  var {
      state,
      navigation
    } = useNavigatorContext(),
    {
      name,
      resetOnFocus,
      onPress,
      onLongPress
    } = options,
    triggerMap = use(TabTriggerMapContext),
    getTrigger = useCallback(function (name2) {
      var config = triggerMap[name2];
      if (config) return {
        isFocused: state.index === config.index,
        route: state.routes[config.index],
        resolvedHref: stripGroupSegmentsFromPath(appendBaseUrl(config.href)),
        ...config
      };
    }, [triggerMap, state]),
    trigger = name !== void 0 ? getTrigger(name) : void 0,
    switchTab = useCallback(function (name2, options2) {
      var config = triggerMap[name2];
      return config ? config.type === "external" ? router.navigate(config.href) : navigation?.dispatch({
        ...config.action,
        type: "JUMP_TO",
        payload: {
          ...config.action.payload,
          ...options2
        }
      }) : navigation?.dispatch({
        type: "JUMP_TO",
        payload: {
          name: name2
        }
      });
    }, [navigation, triggerMap]),
    handleOnPress = useCallback(function (event) {
      onPress?.(event), trigger && (event?.isDefaultPrevented() || (navigation?.emit({
        type: "tabPress",
        target: trigger.type === "internal" ? trigger.route.key : trigger?.href,
        canPreventDefault: !0
      }), shouldHandleMouseEvent(event) && switchTab(name, {
        resetOnFocus
      })));
    }, [onPress, name, resetOnFocus, trigger, navigation, switchTab]),
    handleOnLongPress = useCallback(function (event) {
      onLongPress?.(event), trigger && (event?.isDefaultPrevented() || (navigation?.emit({
        type: "tabLongPress",
        target: trigger.type === "internal" ? trigger.route.key : trigger?.href
      }), shouldHandleMouseEvent(event) && switchTab(name, {
        resetOnFocus
      })));
    }, [onLongPress, name, resetOnFocus, trigger, navigation, switchTab]),
    triggerProps = {
      isFocused: !!trigger?.isFocused,
      onPress: handleOnPress,
      onLongPress: handleOnLongPress
    };
  return {
    switchTab,
    getTrigger,
    trigger,
    triggerProps
  };
}
var styles = StyleSheet.create({
  tabTrigger: {
    flexDirection: "row",
    justifyContent: "space-between"
  }
});
export { TabTrigger, isTabTrigger, useTabTrigger };
//# sourceMappingURL=TabTrigger.native.js.map