@threedddplus/logoeditor 0.0.112-5 → 0.0.113

package/dist/logoeditor.esm.js

@@ -14790,41 +14790,31 @@ var LogoEditor = function LogoEditor(_ref) {
     defaultColorList = _ref.defaultColorList,
     logoData = _ref.logoData,
     customerId = _ref.customerId,
-    onSaveLogo = _ref.onSaveLogo;
+    onSaveLogo = _ref.onSaveLogo,
+    onClose = _ref.onClose;
   var _use3dddPlus = use3dddPlus(function (state) {
       return [state.setSelectedStepper, state.loading, state.myLogoHandler];
     }),
     setSelectedStepper = _use3dddPlus[0],
     loading = _use3dddPlus[1],
     myLogoHandler = _use3dddPlus[2];
-  React.useEffect(function () {
-    setSelectedStepper(stepperId);
-  }, [stepperId]);
-  var _React$useState = React.useState([]),
-    fontFamilies = _React$useState[0],
-    setFontFamilies = _React$useState[1];
-  React.useEffect(function () {
+  var _useState = useState([]),
+    fontFamilies = _useState[0],
+    setFontFamilies = _useState[1];
+  useEffect(function () {
     setSelectedStepper(stepperId);
-    if (stepperId == undefined) {
+    if (stepperId === undefined) {
       myLogoHandler(logoData);
     }
-  }, [stepperId]);
-  React.useEffect(function () {
     use3dddPlus.setState({
       customUploadLogoColorList: customLogoColorList
     });
-  }, [customLogoColorList]);
-  React.useEffect(function () {
     use3dddPlus.setState({
       defaultColorList: defaultColorList
     });
-  }, [defaultColorList]);
-  React.useEffect(function () {
     use3dddPlus.setState({
       customerId: customerId
     });
-  }, [customerId]);
-  React.useEffect(function () {
     fetch('https://storage.googleapis.com/3ddplusgcp/richardson-customizer/fonts/fontFamilies.json').then(function (response) {
       return response.json();
     }).then(function (data) {
@@ -14832,12 +14822,13 @@ var LogoEditor = function LogoEditor(_ref) {
     })["catch"](function (error) {
       return console.error('Error fetching font families:', error);
     });
-  }, []);
+  }, [stepperId, customLogoColorList, defaultColorList, customerId, logoData, myLogoHandler, setSelectedStepper]);
   return React.createElement(Modal, {
     backdropStyle: "z-[7]",
-    contentStyle: 'top-0 bottom-0 !m-[auto] z-[7] w-[80%] p-0'
+    contentStyle: "top-0 bottom-0 !m-[auto] z-[7] w-[80%] p-0",
+    crossOnClick: onClose
   }, React.createElement("div", {
-    className: " flex flex-col md:flex-row w-full h-[88vh]"
+    className: "flex flex-col md:flex-row w-full h-[88vh]"
   }, React.createElement(ToastContainer, {
     position: "top-center",
     autoClose: 3000,
@@ -14850,14 +14841,15 @@ var LogoEditor = function LogoEditor(_ref) {
     pauseOnHover: true,
     theme: "colored",
     transition: Bounce
-  }), fontFamilies.map(function (font) {
+  }), fontFamilies.map(function (font, index) {
     return React.createElement(FontLoader, {
+      key: index,
       fontPath: font
     });
   }), loading && React.createElement(Loader, null), React.createElement("div", {
     className: "w-[10%] h-[100%]"
   }, React.createElement(LeftMenu, null)), React.createElement("div", {
-    className: "flex h-full w-[90%]"
+    className: "flex h-full w-[90%] flex-1"
   }, React.createElement(MiddleMenu, {
     onApply: onApply,
     onSaveLogo: onSaveLogo