@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
102 lines • 4.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSvgIconPath = exports.useReferencedSvgIcon = exports.getIconDownLoadManager = exports.useGetIconBaseUrl = void 0;
const react_1 = require("react");
const BlokIconContext_1 = require("./BlokIconContext");
const IconDownloadManager_1 = require("./IconDownloadManager");
const svgReferenceCache = new Map();
const iconDownloadManager = new IconDownloadManager_1.IconDownloadManager();
const useGetIconBaseUrl = (ignoreOverride) => {
const iconContext = (0, BlokIconContext_1.useIconContext)();
const { iconsUrl, iconOverrides } = iconContext;
return (0, react_1.useCallback)((iconName) => {
if (!iconName) {
return undefined;
}
if (ignoreOverride || !iconOverrides?.[`${iconName}.svg`]) {
return iconsUrl;
}
return `${document.location.origin}/icon`;
}, [iconOverrides, iconsUrl, ignoreOverride]);
};
exports.useGetIconBaseUrl = useGetIconBaseUrl;
const getIconDownLoadManager = () => {
return iconDownloadManager;
};
exports.getIconDownLoadManager = getIconDownLoadManager;
/**
* Returns the content of an svg element that is referencing the actual svg path that has already been defined somewhere else on the DOM.
* @param iconName - Name of the icon
* @param ignoreOverride - Indicates whether the icon overrides should be ignored
* @param isInView - Indicates whether the icon should be loaded or not
*/
const useReferencedSvgIcon = (iconName, ignoreOverride = false, isInView = true) => {
const getBaseUrl = (0, exports.useGetIconBaseUrl)(ignoreOverride);
const [icon, setIcon] = (0, react_1.useState)(svgReferenceCache.get(`${iconName}-${getBaseUrl}`));
(0, react_1.useEffect)(() => {
let isMounted = true;
const baseUrl = getBaseUrl(iconName);
if (isInView && iconName && baseUrl) {
iconDownloadManager
.getReferencedSvgIconAsync(iconName, baseUrl)
.then((svg) => {
if (isMounted) {
setIcon(svg);
svgReferenceCache.set(`${iconName}-${getBaseUrl}`, svg);
}
})
.catch(console.error);
}
return () => {
isMounted = false;
};
}, [getBaseUrl, iconName, isInView]);
return icon;
};
exports.useReferencedSvgIcon = useReferencedSvgIcon;
/**
* Returns the content of an svg element with its path inlined.
* @param iconName - Name of the icon
* @param ignoreOverride - Indicates whether the icon overrides should be ignored
* @param isInView - Indicates whether the icon should be loaded or not
*/
const useSvgIconPath = (iconName, ignoreOverride = false, isInView = true) => {
const [icon, setIcon] = (0, react_1.useState)();
const iconContext = (0, BlokIconContext_1.useIconContext)();
const { iconsUrl, iconOverrides } = iconContext;
const baseUrl = (() => {
if (!iconOverrides || !iconName) {
return undefined;
}
if (ignoreOverride || !iconOverrides[`${iconName}.svg`]) {
return iconsUrl;
}
return `${document.location.origin}/icon`;
})();
(0, react_1.useEffect)(() => {
let isMounted = true;
const controller = new AbortController();
if (isInView && iconName && baseUrl && !icon) {
iconDownloadManager
.getSvgPathCachedAsync(iconName, baseUrl, (url) => fetch(url, { signal: controller.signal }))
.then((svg) => {
if (isMounted) {
setIcon(`<svg viewBox="0 0 24 24">${svg}</svg>`);
}
})
.catch((error) => {
if (error.message !== "canceled" &&
!(error instanceof DOMException)) {
console.error(error);
}
});
}
return () => {
isMounted = false;
controller.abort();
};
}, [baseUrl, icon, iconName, isInView]);
return icon;
};
exports.useSvgIconPath = useSvgIconPath;
//# sourceMappingURL=useSvgIcon.js.map