@bigbinary/neeto-themes-frontend 2.0.6 → 2.0.8

package/dist/index.js

@@ -1,7 +1,7 @@
 import { shallow } from 'zustand/shallow';
 import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
-import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { isNotPresent, snakeToCamelCase, filterBy, findBy, isPresent, isNot, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { withImmutableActions, useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { useQuery } from '@tanstack/react-query';
@@ -162,10 +162,35 @@ var setVariable = function setVariable(name, value, variableNamesMap) {
   if (!variableName) return;
   root.style.setProperty(variableName, value);
 };
+var isPropertyIndependent = function isPropertyIndependent(key, theme, schema) {
+  var property = findBy({
+    key: key
+  }, schema);
+  if (isNotPresent(property)) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, schema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, theme.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _theme$snakeToCamelCa;
+    return isPresent((_theme$snakeToCamelCa = theme[snakeToCamelCase(conditionalKey)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
 var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
   if (isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
   theme.properties.forEach(function (property) {
     var attribute = snakeToCamelCase(property.key);
+    if (!isPropertyIndependent(property.key, theme, themeConfig)) {
+      setVariable(attribute, "", variableNamesMap);
+      return;
+    }
     if (property.kind === "color") {
       setVariable(attribute, hexToRgba(property.value), variableNamesMap);
     } else if (property.kind === "overlay_opacity") {
@@ -1915,15 +1940,17 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   useEffect(function () {
     if (isNotPresent(currentTheme)) return;
     setThemeState({
-      currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading,
       previewingTheme: currentTheme
     });
-  }, [currentTheme, isCurrentThemeLoading]);
+    setTheme(currentTheme);
+  }, [isLoading, entityId]);
   useEffect(function () {
     if (isNotPresent(currentTheme)) return;
-    setTheme(currentTheme);
-  }, [currentTheme, entityId]);
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsx(Sidebar, {