@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
95 lines • 3.68 kB
JavaScript
import { useCallback, useEffect, useState } from "react";
import { useIconContext } from "./BlokIconContext";
import { IconDownloadManager } from "./IconDownloadManager";
const svgReferenceCache = new Map();
const iconDownloadManager = new IconDownloadManager();
export const useGetIconBaseUrl = (ignoreOverride) => {
const iconContext = useIconContext();
const { iconsUrl, iconOverrides } = iconContext;
return useCallback((iconName) => {
if (!iconName) {
return undefined;
}
if (ignoreOverride || !iconOverrides?.[`${iconName}.svg`]) {
return iconsUrl;
}
return `${document.location.origin}/icon`;
}, [iconOverrides, iconsUrl, ignoreOverride]);
};
export const getIconDownLoadManager = () => {
return iconDownloadManager;
};
/**
* 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
*/
export const useReferencedSvgIcon = (iconName, ignoreOverride = false, isInView = true) => {
const getBaseUrl = useGetIconBaseUrl(ignoreOverride);
const [icon, setIcon] = useState(svgReferenceCache.get(`${iconName}-${getBaseUrl}`));
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;
};
/**
* 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
*/
export const useSvgIconPath = (iconName, ignoreOverride = false, isInView = true) => {
const [icon, setIcon] = useState();
const iconContext = useIconContext();
const { iconsUrl, iconOverrides } = iconContext;
const baseUrl = (() => {
if (!iconOverrides || !iconName) {
return undefined;
}
if (ignoreOverride || !iconOverrides[`${iconName}.svg`]) {
return iconsUrl;
}
return `${document.location.origin}/icon`;
})();
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;
};
//# sourceMappingURL=useSvgIcon.js.map