@zohodesk/dot/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

In this Library, we Provide Some Basic Components to Build Your Application

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(_ref) {
  let {
    themeAppearance,
    themeColor,
    baseZoomUnit,
    baseFontUnit,
    getProviderElement,
    zoomUnitVariable,
    fontUnitVariable,
    themeAppearanceAttr,
    themeColorAttr
  } = _ref;
  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;
}