@bigbinary/neeto-themes-frontend 1.1.12 → 1.1.13

package/dist/index.cjs.js

@@ -68,6 +68,7 @@ var useThemeStore = zustand.create(reactUtils.withImmutableActions(function (set
   return {
     currentTheme: {},
     isCurrentThemeLoading: true,
+    previewingTheme: {},
     setThemeState: set
   };
 }));
@@ -606,6 +607,14 @@ var useListConfigs = function useListConfigs(_ref) {
 
 var useThemeUtils = function useThemeUtils() {
   var setConfigState = useConfigStore(ramda.prop("setConfigState"));
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"],
+        currentTheme: store["currentTheme"]
+      };
+    }, shallow.shallow),
+    previewingTheme = _useThemeStore.previewingTheme,
+    currentTheme = _useThemeStore.currentTheme;
   var _useListConfigs = useListConfigs({
       onSuccess: function onSuccess(_ref) {
         var _ref$config = _ref.config,
@@ -646,7 +655,9 @@ var useThemeUtils = function useThemeUtils() {
   };
   return {
     setTheme: setTheme,
-    setVariable: setVariable
+    setVariable: setVariable,
+    previewingTheme: previewingTheme,
+    currentTheme: currentTheme
   };
 };
 
@@ -7010,6 +7021,12 @@ var Properties = function Properties() {
       };
     }, shallow.shallow),
     variableNamesMap = _useConfigStore.variableNamesMap;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState;
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     values = _useFormikContext.values;
@@ -7032,6 +7049,9 @@ var Properties = function Properties() {
   };
   React.useEffect(function () {
     setTheme(values);
+    setThemeState({
+      previewingTheme: values
+    });
   }, [values]);
   return /*#__PURE__*/React__default["default"].createElement(Card$2, {
     title: t("neetoThemes.common.style")
@@ -7399,8 +7419,6 @@ var Themes = function Themes(_ref) {
     _ref$defaultThemes = _ref.defaultThemes,
     defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
     onDeleteTheme = _ref.onDeleteTheme,
-    previewingTheme = _ref.previewingTheme,
-    setPreviewingTheme = _ref.setPreviewingTheme,
     themeToHighlight = _ref.themeToHighlight,
     highlightTheme = _ref.highlightTheme,
     didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
@@ -7411,6 +7429,14 @@ var Themes = function Themes(_ref) {
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
     setTheme = _useThemeUtils.setTheme;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        setThemeState: store["setThemeState"],
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow.shallow),
+    setThemeState = _useThemeStore.setThemeState,
+    previewingTheme = _useThemeStore.previewingTheme;
   var _useState = React.useState(""),
     _useState2 = _slicedToArray$3(_useState, 2),
     searchQuery = _useState2[0],
@@ -7425,6 +7451,9 @@ var Themes = function Themes(_ref) {
       onSuccess: function onSuccess(_ref2) {
         var theme = _ref2.theme;
         setTheme(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
         setThemeBeingApplied({});
       }
     }),
@@ -7438,8 +7467,9 @@ var Themes = function Themes(_ref) {
     }, 100);
   }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
   var setPreviewTheme = function setPreviewTheme(theme) {
-    var id = theme.id;
-    setPreviewingTheme(id);
+    setThemeState({
+      previewingTheme: theme
+    });
     setTheme(theme);
   };
   var filteredDefaultThemes = defaultThemes.filter(function (theme) {
@@ -7488,7 +7518,7 @@ var Themes = function Themes(_ref) {
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
       active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
-      isPreviewing: previewingTheme === theme.id,
+      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
       isApplyingTheme: isApplyingTheme && (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
       onCloneTheme: handleCloneTheme,
@@ -7505,7 +7535,7 @@ var Themes = function Themes(_ref) {
     className: "flex flex-col gap-4 px-6"
   }, filteredThemes.map(function (theme) {
     var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
-    var isPreviewing = previewingTheme === theme.id;
+    var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
     return /*#__PURE__*/React__default["default"].createElement(Card$1, {
       isPreviewing: isPreviewing,
       onApplyTheme: onApplyTheme,
@@ -7589,12 +7619,8 @@ var Sidebar = function Sidebar() {
     setIsDeleteAlertOpen = _useState4[1];
   var _useState5 = React.useState(null),
     _useState6 = _slicedToArray$3(_useState5, 2),
-    previewingTheme = _useState6[0],
-    setPreviewingTheme = _useState6[1];
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray$3(_useState7, 2),
-    themeToHighlight = _useState8[0],
-    setThemeToHighlight = _useState8[1];
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
   var _useConfigStore = useConfigStore(function (store) {
       return {
         entityType: store["entityType"],
@@ -7641,6 +7667,9 @@ var Sidebar = function Sidebar() {
   };
   var handleBackPress = function handleBackPress() {
     setTheme(currentTheme);
+    setThemeState({
+      previewingTheme: currentTheme
+    });
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     themeToEdit.current = null;
   };
@@ -7656,7 +7685,9 @@ var Sidebar = function Sidebar() {
   var onCreateTheme = function onCreateTheme(createdTheme) {
     setCurrentScreen(DESIGN_SCREENS.THEMES);
     setTheme(createdTheme);
-    setPreviewingTheme(createdTheme.id);
+    setThemeState({
+      previewingTheme: createdTheme
+    });
     highlightTheme(createdTheme);
     themeToEdit.current = null;
   };
@@ -7686,9 +7717,11 @@ var Sidebar = function Sidebar() {
     setTheme(currentTheme);
   }, [currentTheme, entityId]);
   React.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme)) return;
     setThemeState({
       currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      previewingTheme: currentTheme
     });
   }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7706,8 +7739,6 @@ var Sidebar = function Sidebar() {
     didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
     highlightTheme: highlightTheme,
     isCurrentThemeLoading: isCurrentThemeLoading,
-    previewingTheme: previewingTheme,
-    setPreviewingTheme: setPreviewingTheme,
     themeToHighlight: themeToHighlight,
     themes: themes,
     isLoading: isLoading || isFetchingConfig,