@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({
  themeAppearance,
  themeColor,
  baseZoomUnit,
  baseFontUnit,
  getProviderElement,
  zoomUnitVariable,
  fontUnitVariable,
  excludeFeatures,
  themeAppearanceAttr,
  themeColorAttr
}) {
  const excluded = useMemo(() => new Set(excludeFeatures), [excludeFeatures]);
  const needTheme = !excluded.has('theme');
  const needZoom = !excluded.has('zoom');
  const needFont = !excluded.has('font');
  const themeAppearancePromise = useMemo(() => {
    if (!needTheme) {
      return [Promise.resolve()];
    }

    return getThemeAppearanceAssetPromise({
      themeAppearance
    });
  }, [themeAppearance, needTheme]);
  const themeColorPromise = useMemo(() => {
    if (!needTheme) {
      return [Promise.resolve()];
    }

    return getThemeColorAssetPromise({
      themeAppearance,
      themeColor
    });
  }, [themeAppearance, themeColor, needTheme]);
  const modifiedZoomUnitWithSuffix = useMemo(() => {
    return !isNaN(Number(baseZoomUnit)) ? `${Number(baseZoomUnit)}px` : baseZoomUnit;
  }, [baseZoomUnit]);
  const zoomSizePromise = useMemo(() => {
    if (!needZoom) {
      return Promise.resolve();
    }

    return getZoomSizeAssetPromise();
  }, [needZoom]);
  const fontSizePromise = useMemo(() => {
    if (!needFont) {
      return Promise.resolve();
    }

    return getFontSizeAssetPromise();
  }, [needFont]);
  const combinedPromise = {
    themeAppearancePromise,
    themeColorPromise,
    zoomSizePromise,
    fontSizePromise
  };

  function setThemeAttribute() {
    if (!needTheme) {
      return;
    }

    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() {
    if (!needZoom) {
      return;
    }

    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() {
    if (!needFont) {
      return;
    }

    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, needTheme]);
  useLayoutEffect(() => {
    setZoomSizeAttribute();
  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom]);
  useLayoutEffect(() => {
    setFontSizeAttribute();
  }, [fontUnitVariable, baseFontUnit, fontSizePromise, getProviderElement, needFont]);
  return combinedPromise;
}