one/dist/esm/ui/TabTrigger.js

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

import { Slot } from "@radix-ui/react-slot";
import { use, useCallback } from "react";
import {
  StyleSheet,
  Pressable
} from "react-native-web";
import { TabTriggerMapContext } from "./TabContext";
import { appendBaseUrl } from "../fork/getPathFromState-mods";
import { router } from "../router/imperative-api";
import { stripGroupSegmentsFromPath } from "../router/matchers";
import { useNavigatorContext } from "../views/Navigator";
import { jsx } from "react/jsx-runtime";
const 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({ asChild, name, href, resetOnFocus, ...props }) {
  const { trigger, triggerProps } = useTabTrigger({
    name,
    resetOnFocus,
    ...props
  });
  if (asChild)
    return /* @__PURE__ */ jsx(
      TabTriggerSlot,
      {
        style: styles.tabTrigger,
        ...props,
        ...triggerProps,
        href: trigger?.resolvedHref,
        children: props.children
      }
    );
  {
    const 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) {
  const { state, navigation } = useNavigatorContext(), { name, resetOnFocus, onPress, onLongPress } = options, triggerMap = use(TabTriggerMapContext), getTrigger = useCallback(
    (name2) => {
      const 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(
    (name2, options2) => {
      const 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(
    (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(
    (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
  };
}
const styles = StyleSheet.create({
  tabTrigger: {
    flexDirection: "row",
    justifyContent: "space-between"
  }
});
export {
  TabTrigger,
  isTabTrigger,
  useTabTrigger
};
//# sourceMappingURL=TabTrigger.js.map