@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
181 lines (174 loc) • 7.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.setupFonts = exports.FontLoader = void 0;
var _react = _interopRequireWildcard(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) {
console.warn('Failed to load Phudu fonts:', error);
return null;
}
};
/**
* FontLoader component that loads custom fonts before rendering children
* This works in both the package development and when consumed as an npm package
*/
const FontLoader = ({
children,
fallbackContent
}) => {
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) {
console.error('Error loading fonts:', error);
// Fallback to render without custom fonts
setFontState('error');
}
};
loadFonts();
}, []);
if (fontState === 'loading') {
// Render a loading placeholder while fonts are loading
if (fallbackContent) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: fallbackContent
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.loaderContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#d169e5"
})
});
}
if (fontState === 'error') {
console.warn('Fonts failed to load. Using system fonts instead.');
}
// Return children even on error - the app will use system fonts as fallback
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;
// Append to the document head
document.head.appendChild(style);
console.info('All Phudu web fonts have been dynamically loaded');
}
} else {
// For native platforms, guidance for the package users
console.info('Fonts should be linked in native projects to use Phudu fonts');
// Attempt to load the fonts anyway (this works if the consumer has linked the assets)
await Font.loadAsync(phuduFonts);
}
return true;
} catch (error) {
console.warn('Error setting up fonts:', error?.message || error);
return false;
}
};
exports.setupFonts = setupFonts;
const styles = _reactNative.StyleSheet.create({
loaderContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
}
});
//# sourceMappingURL=FontLoader.js.map