Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 50x 49x 49x 50x 50x 50x 49x 50x 50x 50x 49x 50x 50x 50x 50x 50x 50x 50x | import { useMemo, useLayoutEffect } from 'react';
import { getThemeAppearanceAssetPromise } from '../utils/assetPromiseHandlers/themeAppearanceAssetPromise.js';
import { getThemeColorAssetPromise } from '../utils/assetPromiseHandlers/themeColorAssetPromise.js';
import { getFontSizeAssetPromise } from '../utils/assetPromiseHandlers/fontSizeAssetPromise.js';
import { getZoomSizeAssetPromise } from '../utils/assetPromiseHandlers/zoomSizeAssetPromise.js';
export default function useDownloadAssetsAndSetAttr({
themeAppearance,
themeColor,
baseZoomUnit,
baseFontUnit,
getProviderElement,
zoomUnitVariable,
fontUnitVariable,
themeAppearanceAttr,
themeColorAttr
}) {
const themeAppearancePromise= useMemo(() => {
const themeAppearanceAssetPromise = getThemeAppearanceAssetPromise({themeAppearance});
return themeAppearanceAssetPromise;
}, [themeAppearance]);
const themeColorPromise= useMemo(() => {
const themeColorAssetPromise = getThemeColorAssetPromise({themeAppearance, themeColor});
return themeColorAssetPromise;
}, [themeAppearance, themeColor]);
const modifiedZoomUnitWithSuffix = useMemo(() => {
return !isNaN(Number(baseZoomUnit)) ? `${Number(baseZoomUnit)}px` : baseZoomUnit;
}, [baseZoomUnit]);
const zoomSizePromise = useMemo(() => {
const assetPromise = getZoomSizeAssetPromise();
return assetPromise;
}, []);
const fontSizePromise = useMemo(() => {
const assetPromise = getFontSizeAssetPromise();
return assetPromise;
}, []);
const combinedPromise= {
themeAppearancePromise,
themeColorPromise,
zoomSizePromise,
fontSizePromise
};
function setThemeAttribute(){
const themePromise= [...themeAppearancePromise, ...themeColorPromise]
Promise.all(themePromise).then(()=>{
const providerElement = getProviderElement();
if (providerElement) {
providerElement.setAttribute(themeAppearanceAttr, themeAppearance);
providerElement.setAttribute(themeColorAttr, themeColor);
}
}).catch(error => {
console.error('Error on setting theme appearance and color attributes:', error)
});
}
function setZoomSizeAttribute(){
zoomSizePromise.then(()=>{
const providerElement = getProviderElement();
if(providerElement){
providerElement.style.setProperty(zoomUnitVariable, modifiedZoomUnitWithSuffix);
}
}).catch(error => {
console.error('Error on setting zoom-size property', error)
});
}
function setFontSizeAttribute(){
fontSizePromise.then(()=>{
const providerElement = getProviderElement();
if(providerElement){
providerElement.style.setProperty(fontUnitVariable, baseFontUnit);
}
}).catch(error => {
console.error('Error on setting font-size property', error)
});
}
useLayoutEffect(()=>{
setThemeAttribute();
}, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement])
useLayoutEffect(()=>{
setZoomSizeAttribute();
}, [zoomUnitVariable, modifiedZoomUnitWithSuffix, getProviderElement])
useLayoutEffect(()=>{
setFontSizeAttribute();
}, [fontUnitVariable, baseFontUnit, getProviderElement])
return combinedPromise;
} |