one/dist/esm/ui/TabTrigger.mjs

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 { Pressable, StyleSheet } from "react-native-web";
import { appendBaseUrl } from "../fork/getPathFromState-mods.mjs";
import { router } from "../router/imperative-api.mjs";
import { stripGroupSegmentsFromPath } from "../router/matchers.mjs";
import { useNavigatorContext } from "../views/Navigator.mjs";
import { TabTriggerMapContext } from "./TabContext.mjs";
import { jsx } from "react/jsx-runtime";
const TabTriggerSlot = Slot;
function shouldHandleMouseEvent(e) {
  if (!e) return true;
  if ("button" in e) {
    return !e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.button == null || e.button === 0) && [void 0, null, "", "self"].includes(e.currentTarget.target);
  }
  return true;
}
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
    });
  } else {
    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();
  const {
    name,
    resetOnFocus,
    onPress,
    onLongPress
  } = options;
  const triggerMap = use(TabTriggerMapContext);
  const getTrigger = useCallback(name2 => {
    const config = triggerMap[name2];
    if (!config) {
      return;
    }
    return {
      isFocused: state.index === config.index,
      route: state.routes[config.index],
      resolvedHref: stripGroupSegmentsFromPath(appendBaseUrl(config.href)),
      ...config
    };
  }, [triggerMap, state]);
  const trigger = name !== void 0 ? getTrigger(name) : void 0;
  const switchTab = useCallback((name2, options2) => {
    const config = triggerMap[name2];
    if (config) {
      if (config.type === "external") {
        return router.navigate(config.href);
      } else {
        return navigation?.dispatch({
          ...config.action,
          type: "JUMP_TO",
          payload: {
            ...config.action.payload,
            ...options2
          }
        });
      }
    } else {
      return navigation?.dispatch({
        type: "JUMP_TO",
        payload: {
          name: name2
        }
      });
    }
  }, [navigation, triggerMap]);
  const handleOnPress = useCallback(event => {
    onPress?.(event);
    if (!trigger) return;
    if (event?.isDefaultPrevented()) return;
    navigation?.emit({
      type: "tabPress",
      target: trigger.type === "internal" ? trigger.route.key : trigger?.href,
      canPreventDefault: true
    });
    if (!shouldHandleMouseEvent(event)) return;
    if (trigger.isFocused) return;
    switchTab(name, {
      resetOnFocus
    });
  }, [onPress, name, resetOnFocus, trigger, navigation, switchTab]);
  const handleOnLongPress = useCallback(event => {
    onLongPress?.(event);
    if (!trigger) return;
    if (event?.isDefaultPrevented()) return;
    navigation?.emit({
      type: "tabLongPress",
      target: trigger.type === "internal" ? trigger.route.key : trigger?.href
    });
    if (!shouldHandleMouseEvent(event)) return;
    switchTab(name, {
      resetOnFocus
    });
  }, [onLongPress, name, resetOnFocus, trigger, navigation, switchTab]);
  const triggerProps = {
    isFocused: Boolean(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.mjs.map