one
Version:
One is a new React Framework that makes Vite serve both native and web.
92 lines (91 loc) • 3.54 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 TabSlot_exports = {};
__export(TabSlot_exports, {
TabSlot: () => TabSlot,
defaultTabsSlotRender: () => defaultTabsSlotRender,
isTabSlot: () => isTabSlot,
useTabSlot: () => useTabSlot
});
module.exports = __toCommonJS(TabSlot_exports);
var import_react = require("react"), import_react_native = require("react-native-web"), import_react_native_screens = require("react-native-screens"), import_TabContext = require("./TabContext"), import_Navigator = require("../views/Navigator"), import_jsx_runtime = require("react/jsx-runtime");
function useTabSlot({
detachInactiveScreens = ["android", "ios", "web"].includes(import_react_native.Platform.OS),
style,
renderFn = defaultTabsSlotRender
} = {}) {
const { state, descriptors } = (0, import_Navigator.useNavigatorContext)(), focusedRouteKey = state.routes[state.index].key, [loaded, setLoaded] = (0, import_react.useState)({ [focusedRouteKey]: !0 });
return loaded[focusedRouteKey] || setLoaded({ ...loaded, [focusedRouteKey]: !0 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native_screens.ScreenContainer,
{
enabled: detachInactiveScreens,
hasTwoStates: !0,
style: [styles.screenContainer, style],
children: state.routes.map((route, index) => {
const descriptor = descriptors[route.key];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabContext.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__ */ (0, import_jsx_runtime.jsx)(
import_react_native_screens.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 = import_react_native.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
}
});
//# sourceMappingURL=TabSlot.js.map