one
Version:
One is a new React Framework that makes Vite serve both native and web.
81 lines (80 loc) • 2.38 kB
JavaScript
import { useState } from "react";
import { Platform, StyleSheet } from "react-native-web";
import { ScreenContainer, Screen } from "react-native-screens";
import { TabContext } from "./TabContext";
import { useNavigatorContext } from "../views/Navigator";
import { jsx } from "react/jsx-runtime";
function useTabSlot({
detachInactiveScreens = ["android", "ios", "web"].includes(Platform.OS),
style,
renderFn = defaultTabsSlotRender
} = {}) {
const { state, descriptors } = useNavigatorContext(), focusedRouteKey = state.routes[state.index].key, [loaded, setLoaded] = useState({ [focusedRouteKey]: !0 });
return loaded[focusedRouteKey] || setLoaded({ ...loaded, [focusedRouteKey]: !0 }), /* @__PURE__ */ jsx(
ScreenContainer,
{
enabled: detachInactiveScreens,
hasTwoStates: !0,
style: [styles.screenContainer, style],
children: state.routes.map((route, index) => {
const descriptor = descriptors[route.key];
return /* @__PURE__ */ jsx(TabContext.Provider, { value: descriptor.options, children: renderFn(descriptor, {
index,
isFocused: state.index === index,
loaded: loaded[route.key],
detachInactiveScreens
}) }, descriptor.route.key);
})
}
);
}
function TabSlot(props) {
return useTabSlot(props);
}
function defaultTabsSlotRender(descriptor, { isFocused, loaded, detachInactiveScreens }) {
const { lazy = !0, unmountOnBlur, freezeOnBlur } = descriptor.options;
return unmountOnBlur && !isFocused || lazy && !loaded && !isFocused ? null : /* @__PURE__ */ jsx(
Screen,
{
enabled: detachInactiveScreens,
activityState: isFocused ? 2 : 0,
freezeOnBlur,
style: [styles.screen, isFocused ? styles.focused : styles.unfocused],
children: descriptor.render()
},
descriptor.route.key
);
}
function isTabSlot(child) {
return child.type === TabSlot;
}
const styles = StyleSheet.create({
screen: {
flex: 1,
position: "relative",
height: "100%"
},
screenContainer: {
flexShrink: 0,
flexGrow: 1
},
focused: {
zIndex: 1,
display: "flex",
flexShrink: 0,
flexGrow: 1
},
unfocused: {
zIndex: -1,
display: "none",
flexShrink: 1,
flexGrow: 0
}
});
export {
TabSlot,
defaultTabsSlotRender,
isTabSlot,
useTabSlot
};
//# sourceMappingURL=TabSlot.js.map