@bigbinary/neeto-themes-frontend 4.0.29 → 4.0.30

package/dist/cjs/NeetoThemesBuilder.js

@@ -6,9 +6,11 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var reactI18next = require('react-i18next');
-var utils = require('../index-BUeeI0XI.js');
-var useGlobalThemesApi = require('../useGlobalThemesApi-DOH4EK5Q.js');
-var useExpandedSection = require('../useExpandedSection-GpzbAxmE.js');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var useGlobalThemesApi = require('../useGlobalThemesApi-BUsKyTn_.js');
+var useExpandedSection = require('../useExpandedSection-BTBI4UqP.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
 var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
@@ -26,6 +28,7 @@ var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
 var formik = require('formik');
+var utils = require('../index-CZdpMMBb.js');
 var jsxRuntime = require('react/jsx-runtime');
 var i18n = require('i18next');
 var Right = require('@bigbinary/neeto-icons/Right');
@@ -44,10 +47,7 @@ var Help = require('@bigbinary/neeto-icons/Help');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Modal = require('@bigbinary/neetoui/Modal');
 var Input = require('@bigbinary/neetoui/Input');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
-var Toastr = require('@bigbinary/neetoui/Toastr');
 var Input$1 = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var AddImage = require('@bigbinary/neeto-icons/AddImage');
@@ -62,6 +62,74 @@ require('axios');
 require('zustand');
 require('yup');
 
+var getImageFromUrl = function getImageFromUrl(source) {
+  var image = new Image();
+  image.crossOrigin = "anonymous";
+  image.src = source;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      resolve(image);
+    };
+  });
+};
+var getDominantColorFromUrl = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
+    var image, context, c;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getImageFromUrl(imageUrl);
+        case 3:
+          image = _context.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
+        case 9:
+          return _context.abrupt("return", null);
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](0);
+          Toastr.error(_context.t0);
+          return _context.abrupt("return", null);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 12]]);
+  }));
+  return function getDominantColorFromUrl(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var scrollElementIntoView = function scrollElementIntoView(elementId) {
+  var elementToScroll = document.getElementById(elementId);
+  var sidebarContainer = document.querySelector(".neeto-themes-sidebar__scroll");
+  if (!elementToScroll || !sidebarContainer) return;
+  var elementRect = elementToScroll.getBoundingClientRect();
+  var sidebarContainerRect = sidebarContainer.getBoundingClientRect();
+  var offset = elementRect.top - sidebarContainerRect.top + sidebarContainer.scrollTop;
+  sidebarContainer.scrollTo({
+    top: offset,
+    behavior: "smooth"
+  });
+};
+var isFunction = function isFunction(obj) {
+  return typeof obj === "function";
+};
+var isNewThemeRoute = function isNewThemeRoute() {
+  return location.pathname.endsWith("new");
+};
+var isEditThemeRoute = function isEditThemeRoute() {
+  return location.pathname.endsWith("edit");
+};
+
 var DESIGN_SCREENS = {
   THEMES: "Themes",
   Customize: "Customize",
@@ -274,7 +342,7 @@ var CustomCSS = function CustomCSS(_ref) {
     if (!isCustomCssScreen) return onEditCSSClick(DESIGN_SCREENS.CustomCSS);
     onEditCSSClick(DESIGN_SCREENS.Customize);
     return setTimeout(function () {
-      utils.scrollElementIntoView("css-editor");
+      scrollElementIntoView("css-editor");
     }, 400);
   };
   var handleChange = function handleChange(value) {
@@ -1202,7 +1270,7 @@ var ImageBlock = function ImageBlock(_ref) {
             return _context.abrupt("return");
           case 4:
             _context.next = 6;
-            return utils.getDominantColorFromUrl(image.url);
+            return getDominantColorFromUrl(image.url);
           case 6:
             dominantColor = _context.sent;
             setFieldValue(name, {
@@ -1378,7 +1446,7 @@ var Customize = function Customize(_ref) {
     _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
     globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3;
   var _useFetchTheme = useGlobalThemesApi.useFetchTheme(themeId, {
-      enabled: utils.isEditThemeRoute() && ramda.isNotNil(themeId),
+      enabled: isEditThemeRoute() && ramda.isNotNil(themeId),
       initialData: theme !== null && theme !== void 0 ? theme : undefined
     }),
     _useFetchTheme$data = _useFetchTheme.data,
@@ -1728,7 +1796,7 @@ var Card = function Card(_ref) {
       if (neetoCist.isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
     };
   };
-  var showMoreDropdown = utils.isFunction(onDeleteTheme);
+  var showMoreDropdown = isFunction(onDeleteTheme);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "group space-y-2 pt-0.5",
     "data-flip-id": theme.id,
@@ -1922,7 +1990,7 @@ var Themes = function Themes(_ref) {
     if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
     didScrollActiveThemeIntoView.current = true;
     setTimeout(function () {
-      utils.scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+      scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
     }, 100);
   }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
   var setPreviewTheme = function setPreviewTheme(theme) {
@@ -2079,7 +2147,7 @@ var TitleBar = function TitleBar(_ref) {
     }, shallow.shallow),
     entityType = _useConfigStore.entityType,
     helpDocUrl = _useConfigStore.helpDocUrl;
-  var isCustomizeScreen = utils.isEditThemeRoute() || utils.isNewThemeRoute();
+  var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var isRTL = i18n.dir() === "rtl";
   var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
@@ -2105,7 +2173,7 @@ var TitleBar = function TitleBar(_ref) {
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
-          children: [isCustomizeScreen && !isCustomCssScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+          children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
@@ -2305,7 +2373,7 @@ var Sidebar = function Sidebar(_ref) {
   };
   var highlightTheme = function highlightTheme(themeIdToHighlight) {
     setTimeout(function () {
-      utils.scrollElementIntoView(themeIdToHighlight);
+      scrollElementIntoView(themeIdToHighlight);
     }, 1500);
     setTimeout(function () {
       setThemeToHighlight(null);
@@ -2503,7 +2571,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     });
   }, []);
   react.useEffect(function () {
-    if (neetoCist.isNotPresent(currentTheme) || utils.isEditThemeRoute()) {
+    if (neetoCist.isNotPresent(currentTheme) || isEditThemeRoute()) {
       return;
     }
     setThemeState({