@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
162 lines (155 loc) • 6.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.setupFonts = exports.FontLoader = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var Font = _interopRequireWildcard(require("expo-font"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* Get the Phudu font sources for both native and web environments
* This is specifically designed to work when distributed as an npm package
*/const getPhuduFonts = () => {
try {
// For both development and when used as a package
// Load all static font weights
return {
'Phudu-Light': require('../../assets/fonts/Phudu/Phudu-Light.ttf'),
'Phudu-Regular': require('../../assets/fonts/Phudu/Phudu-Regular.ttf'),
'Phudu-Medium': require('../../assets/fonts/Phudu/Phudu-Medium.ttf'),
'Phudu-SemiBold': require('../../assets/fonts/Phudu/Phudu-SemiBold.ttf'),
'Phudu-Bold': require('../../assets/fonts/Phudu/Phudu-Bold.ttf'),
'Phudu-ExtraBold': require('../../assets/fonts/Phudu/Phudu-ExtraBold.ttf'),
'Phudu-Black': require('../../assets/fonts/Phudu/Phudu-Black.ttf')
};
} catch (error) {
if (__DEV__) {
console.warn('Failed to load Phudu fonts:', error);
}
return null;
}
};
/**
* FontLoader component that loads custom fonts in the background while rendering children immediately
* This works in both the package development and when consumed as an npm package
* Children render immediately with system fonts as fallback until custom fonts are loaded
*/
const FontLoader = ({
children
}) => {
const [fontState, setFontState] = (0, _react.useState)('loading');
(0, _react.useEffect)(() => {
const loadFonts = async () => {
try {
// Get all the font weights
const phuduFonts = getPhuduFonts();
if (!phuduFonts) {
throw new Error('Phudu font files not found');
}
// Load all the static Phudu fonts with their respective weights
await Font.loadAsync(phuduFonts);
setFontState('loaded');
} catch (error) {
if (__DEV__) {
console.error('Error loading fonts:', error);
}
setFontState('error');
}
};
loadFonts();
}, []);
// Always render children immediately - fonts will load in background
// If fonts aren't loaded yet, the app will use system fonts as fallback
if (fontState === 'error' && __DEV__) {
console.warn('Fonts failed to load. Using system fonts instead.');
}
// Render children immediately, even while fonts are loading
// Fonts will apply when they're ready, otherwise system fonts are used
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: children
});
};
/**
* Setup fonts for applications consuming this package
* This should be called by applications using your package
*/
exports.FontLoader = FontLoader;
const setupFonts = async () => {
try {
const phuduFonts = getPhuduFonts();
if (!phuduFonts) {
throw new Error('Phudu font files not found');
}
if (_reactNative.Platform.OS === 'web') {
// For web platform, dynamically inject CSS to load the fonts
if (typeof document !== 'undefined') {
// Create a style element
const style = document.createElement('style');
// Define @font-face rules for each font weight
const fontFaceRules = `
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-Light']}) format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-Regular']}) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-Medium']}) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-SemiBold']}) format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-Bold']}) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-ExtraBold']}) format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Phudu';
src: url(${phuduFonts['Phudu-Black']}) format('truetype');
font-weight: 900;
font-style: normal;
}
`;
style.textContent = fontFaceRules;
document.head.appendChild(style);
if (__DEV__) {
console.info('All Phudu web fonts have been dynamically loaded');
}
}
} else {
// Attempt to load the fonts anyway (this works if the consumer has linked the assets)
await Font.loadAsync(phuduFonts);
}
return true;
} catch (error) {
if (__DEV__) {
const errorMessage = error instanceof Error ? error.message : String(error);
console.warn('Error setting up fonts:', errorMessage);
}
return false;
}
};
exports.setupFonts = setupFonts;
//# sourceMappingURL=FontLoader.js.map