@bigbinary/neeto-themes-frontend 2.0.5 → 2.0.7

package/dist/index.cjs.js

@@ -143,6 +143,105 @@ var useThemeStore = zustand.create(reactUtils.withImmutableActions(function (set
   };
 }));
 
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (neetoCist.isPresent(theme)) return theme;
+  return {
+    name: i18next.t("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
+    properties: themePropertiesSchema.map(function (_ref) {
+      var key = _ref.key,
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue;
+      switch (kind) {
+        case "color":
+          return {
+            value: defaultValue,
+            kind: "color",
+            key: key
+          };
+        case "font_family":
+          return {
+            value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+            kind: "font_family",
+            key: key
+          };
+        case "overlay_opacity":
+          return {
+            value: 0,
+            kind: "overlay_opacity",
+            key: key
+          };
+        case "slider":
+          return {
+            value: 0,
+            kind: "slider",
+            key: key
+          };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
+        case "boolean":
+          return {
+            value: String(defaultValue),
+            kind: "boolean",
+            key: key
+          };
+        case "position_selector":
+          return {
+            value: defaultValue,
+            kind: "position_selector",
+            key: key
+          };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
+        default:
+          return null;
+      }
+    }).filter(neetoCist.isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return neetoCist.filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[neetoCist.snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
+    acc[item.key] = signedId;
+    return acc;
+  }, {});
+};
+var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
+  var property = neetoCist.findBy({
+    key: key
+  }, themePropertiesSchema);
+  if (neetoCist.isNotPresent(property)) return false;
+  if (property !== null && property !== void 0 && property.hidden) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (neetoCist.isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = neetoCist.findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  var dependentProperty = neetoCist.findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _formikValues$snakeTo;
+    return neetoCist.isPresent((_formikValues$snakeTo = formikValues[neetoCist.snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return neetoCist.isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return i18next.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
+};
+
 var getImageFromUrl = function getImageFromUrl(source) {
   var image = new Image();
   image.crossOrigin = "anonymous";
@@ -218,6 +317,10 @@ var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
   if (neetoCist.isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
   theme.properties.forEach(function (property) {
     var attribute = neetoCist.snakeToCamelCase(property.key);
+    if (!isPropertyVisible(property.key, theme, themeConfig)) {
+      setVariable(attribute, "", variableNamesMap);
+      return;
+    }
     if (property.kind === "color") {
       setVariable(attribute, hexToRgba(property.value), variableNamesMap);
     } else if (property.kind === "overlay_opacity") {
@@ -471,105 +574,6 @@ var OVERLAY_OPACITY_SLIDER_MARKS = {
 };
 var HUNDRED = 100;
 
-var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
-  if (neetoCist.isPresent(theme)) return theme;
-  return {
-    name: i18next.t("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
-    properties: themePropertiesSchema.map(function (_ref) {
-      var key = _ref.key,
-        kind = _ref.kind,
-        defaultValue = _ref.defaultValue;
-      switch (kind) {
-        case "color":
-          return {
-            value: defaultValue,
-            kind: "color",
-            key: key
-          };
-        case "font_family":
-          return {
-            value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-            kind: "font_family",
-            key: key
-          };
-        case "overlay_opacity":
-          return {
-            value: 0,
-            kind: "overlay_opacity",
-            key: key
-          };
-        case "slider":
-          return {
-            value: 0,
-            kind: "slider",
-            key: key
-          };
-        case "radius":
-          return {
-            value: defaultValue,
-            kind: "radius",
-            key: key
-          };
-        case "boolean":
-          return {
-            value: String(defaultValue),
-            kind: "boolean",
-            key: key
-          };
-        case "position_selector":
-          return {
-            value: defaultValue,
-            kind: "position_selector",
-            key: key
-          };
-        case "alignment_block":
-          return {
-            value: defaultValue,
-            kind: "alignment_block",
-            key: key
-          };
-        default:
-          return null;
-      }
-    }).filter(neetoCist.isNot(null))
-  };
-};
-var buildImageData = function buildImageData(values, themePropertiesSchema) {
-  return neetoCist.filterBy({
-    kind: "image"
-  }, themePropertiesSchema).reduce(function (acc, item) {
-    var _values$snakeToCamelC;
-    var signedId = (_values$snakeToCamelC = values[neetoCist.snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
-    acc[item.key] = signedId;
-    return acc;
-  }, {});
-};
-var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
-  var property = neetoCist.findBy({
-    key: key
-  }, themePropertiesSchema);
-  if (neetoCist.isNotPresent(property)) return false;
-  if (property !== null && property !== void 0 && property.hidden) return false;
-  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
-  if (neetoCist.isNotPresent(conditionalKey)) return true;
-  var dependentPropertySchema = neetoCist.findBy({
-    key: conditionalKey
-  }, themePropertiesSchema);
-  var dependentProperty = neetoCist.findBy({
-    key: conditionalKey
-  }, formikValues.properties);
-  if (dependentPropertySchema.kind === "image") {
-    var _formikValues$snakeTo;
-    return neetoCist.isPresent((_formikValues$snakeTo = formikValues[neetoCist.snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
-  } else if (dependentPropertySchema.kind === "boolean") {
-    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
-  }
-  return neetoCist.isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
-};
-var buildLabel = function buildLabel(key, kind) {
-  return i18next.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
-};
-
 var Card$2 = function Card(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
@@ -1161,7 +1165,7 @@ var Customize = function Customize(_ref) {
         onSuccess: function onSuccess(_ref3) {
           var theme = _ref3.theme;
           resetForm({
-            values: values
+            values: theme
           });
           onCreateTheme(theme);
         }
@@ -1967,15 +1971,17 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   react.useEffect(function () {
     if (neetoCist.isNotPresent(currentTheme)) return;
     setThemeState({
-      currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading,
       previewingTheme: currentTheme
     });
-  }, [currentTheme, isCurrentThemeLoading]);
+    setTheme(currentTheme);
+  }, [isLoading, entityId]);
   react.useEffect(function () {
     if (neetoCist.isNotPresent(currentTheme)) return;
-    setTheme(currentTheme);
-  }, [currentTheme, entityId]);
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {