@bigbinary/neeto-themes-frontend 2.0.5 → 2.0.7

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 { findBy, isNotPresent, isPresent, snakeToCamelCase, isNot, filterBy, 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';
@@ -91,6 +91,105 @@ var useThemeStore = create$1(withImmutableActions(function (set) {
   };
 }));
 
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (isPresent(theme)) return theme;
+  return {
+    name: t$1("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(isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[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 = findBy({
+    key: key
+  }, themePropertiesSchema);
+  if (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 (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _formikValues$snakeTo;
+    return isPresent((_formikValues$snakeTo = formikValues[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 isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
+};
+
 var getImageFromUrl = function getImageFromUrl(source) {
   var image = new Image();
   image.crossOrigin = "anonymous";
@@ -166,6 +265,10 @@ 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 (!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") {
@@ -419,105 +522,6 @@ var OVERLAY_OPACITY_SLIDER_MARKS = {
 };
 var HUNDRED = 100;
 
-var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
-  if (isPresent(theme)) return theme;
-  return {
-    name: t$1("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(isNot(null))
-  };
-};
-var buildImageData = function buildImageData(values, themePropertiesSchema) {
-  return filterBy({
-    kind: "image"
-  }, themePropertiesSchema).reduce(function (acc, item) {
-    var _values$snakeToCamelC;
-    var signedId = (_values$snakeToCamelC = values[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 = findBy({
-    key: key
-  }, themePropertiesSchema);
-  if (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 (isNotPresent(conditionalKey)) return true;
-  var dependentPropertySchema = findBy({
-    key: conditionalKey
-  }, themePropertiesSchema);
-  var dependentProperty = findBy({
-    key: conditionalKey
-  }, formikValues.properties);
-  if (dependentPropertySchema.kind === "image") {
-    var _formikValues$snakeTo;
-    return isPresent((_formikValues$snakeTo = formikValues[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 isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
-};
-var buildLabel = function buildLabel(key, kind) {
-  return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
-};
-
 var Card$2 = function Card(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
@@ -1109,7 +1113,7 @@ var Customize = function Customize(_ref) {
         onSuccess: function onSuccess(_ref3) {
           var theme = _ref3.theme;
           resetForm({
-            values: values
+            values: theme
           });
           onCreateTheme(theme);
         }
@@ -1915,15 +1919,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, {