one
Version:
One is a new React Framework that makes Vite serve both native and web.
151 lines • 5.11 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: !0
});
},
__copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
return to;
};
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
value: !0
}), mod);
var TabTrigger_exports = {};
__export(TabTrigger_exports, {
TabTrigger: () => TabTrigger,
isTabTrigger: () => isTabTrigger,
useTabTrigger: () => useTabTrigger
});
module.exports = __toCommonJS(TabTrigger_exports);
var import_react_slot = require("@radix-ui/react-slot"),
import_react = require("react"),
import_react_native = require("react-native-web"),
import_TabContext = require("./TabContext.cjs"),
import_getPathFromState_mods = require("../fork/getPathFromState-mods.cjs"),
import_imperative_api = require("../router/imperative-api.cjs"),
import_matchers = require("../router/matchers.cjs"),
import_Navigator = require("../views/Navigator.cjs"),
import_jsx_runtime = require("react/jsx-runtime");
const TabTriggerSlot = import_react_slot.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__ */(0, import_jsx_runtime.jsx)(TabTriggerSlot, {
style: styles.tabTrigger,
...props,
...triggerProps,
href: trigger?.resolvedHref,
children: props.children
});
{
const reactNativeWebProps = {
href: trigger?.resolvedHref
};
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
style: styles.tabTrigger,
...reactNativeWebProps,
...props,
...triggerProps,
children: props.children
});
}
}
function isTabTrigger(child) {
return child.type === TabTrigger;
}
function useTabTrigger(options) {
const {
state,
navigation
} = (0, import_Navigator.useNavigatorContext)(),
{
name,
resetOnFocus,
onPress,
onLongPress
} = options,
triggerMap = (0, import_react.use)(import_TabContext.TabTriggerMapContext),
getTrigger = (0, import_react.useCallback)(name2 => {
const config = triggerMap[name2];
if (config) return {
isFocused: state.index === config.index,
route: state.routes[config.index],
resolvedHref: (0, import_matchers.stripGroupSegmentsFromPath)((0, import_getPathFromState_mods.appendBaseUrl)(config.href)),
...config
};
}, [triggerMap, state]),
trigger = name !== void 0 ? getTrigger(name) : void 0,
switchTab = (0, import_react.useCallback)((name2, options2) => {
const config = triggerMap[name2];
return config ? config.type === "external" ? import_imperative_api.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 = (0, import_react.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 = (0, import_react.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 = import_react_native.StyleSheet.create({
tabTrigger: {
flexDirection: "row",
justifyContent: "space-between"
}
});