@knovator/pagecreator-admin 1.6.9 → 1.7.0

package/index.cjs

@@ -3370,13 +3370,25 @@ const Input$1 = ({
   onChange,
   wrapperClassName
 }) => {
+  const isTextarea = type === 'textarea';
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]('khb_input-wrapper', wrapperClassName)
   }, label && (/*#__PURE__*/React__default["default"].createElement("label", {
     className: "khb_input-label"
   }, label, required ? (/*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_input-label-required"
-  }, "*")) : null)), /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
+  }, "*")) : null)), isTextarea ? (/*#__PURE__*/React__default["default"].createElement("textarea", Object.assign({
+    className: classNames__default["default"]('khb_input', `khb_input-${_size}`, className),
+    placeholder: placeholder,
+    disabled: disabled,
+    id: id,
+    value: value,
+    onChange: onChange,
+    rows: 10
+  }, rest, {
+    onInput: onInput,
+    onBlur: onBlur
+  }))) : (/*#__PURE__*/React__default["default"].createElement("input", Object.assign({
     className: classNames__default["default"]('khb_input', `khb_input-${_size}`, className),
     type: type,
     placeholder: placeholder,
@@ -3387,7 +3399,7 @@ const Input$1 = ({
   }, rest, {
     onInput: onInput,
     onBlur: onBlur
-  })), error && /*#__PURE__*/React__default["default"].createElement("p", {
+  }))), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
   }, error), info && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-info"
@@ -7197,10 +7209,11 @@ const WidgetForm = ({
   const [collectionItemsUpdated, setCollectionItemsUpdated] = React.useState(false);
   const [tabCollectionItemsUpdated, setTabCollectionItemsUpdated] = React.useState([]);
   const [blogCategory, setBlogCategory] = React.useState(null);
-  const [blogLimit, setBlogLimit] = React.useState(10);
+  const [blogLimit, setBlogLimit] = React.useState(undefined);
   const [blogCategories, setBlogCategories] = React.useState([]);
   const [blogCategoriesLoading, setBlogCategoriesLoading] = React.useState(false);
   const pagesLoadedRef = React.useRef(false);
+  const blogCategoryInitialized = React.useRef(false);
   React.useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7265,24 +7278,25 @@ const WidgetForm = ({
   }, [currentItemsType, baseUrl, token, widgetRoutesPrefix, blogCategories.length]);
   // Set blog category and limit when editing a widget
   React.useEffect(() => {
-    if (formState === 'UPDATE' && data && currentItemsType === 'blog' && blogCategories.length > 0) {
+    if (formState === 'UPDATE' && data && currentItemsType === 'blog' && blogCategories.length > 0 && !blogCategoryInitialized.current) {
       // Set blog category if it exists in the data
-      if (data.blogCategory && !blogCategory) {
+      if (data.blogCategory) {
         const savedCategory = blogCategories.find(cat => cat.value === data.blogCategory);
         if (savedCategory) {
           setBlogCategory(savedCategory);
+          blogCategoryInitialized.current = true;
         }
       }
       // Set blog limit if it exists in the data
-      if (data.blogLimit && blogLimit === 10) {
+      if (data.blogLimit) {
         setBlogLimit(data.blogLimit);
       }
     }
-  }, [formState, data, currentItemsType, blogCategories, blogCategory, blogLimit]);
+  }, [formState, data, currentItemsType, blogCategories]);
   // Clear collectionItems when using blog category/limit (server will handle fetching latest blogs)
   React.useEffect(() => {
     if (currentItemsType === 'blog') {
-      if (blogCategory || blogLimit > 0) {
+      if (blogCategory || blogLimit && blogLimit > 0) {
         // Clear selected collection items since server will fetch latest blogs based on category/limit
         setSelectedCollectionItems([]);
         setCollectionItemsUpdated(true);
@@ -7293,10 +7307,15 @@ const WidgetForm = ({
   React.useEffect(() => {
     if (currentItemsType !== 'blog') {
       setBlogCategory(null);
-      setBlogLimit(10);
+      setBlogLimit(undefined);
       setBlogCategories([]);
+      blogCategoryInitialized.current = false;
     }
   }, [currentItemsType]);
+  // Reset initialization flag when opening a different widget or changing form state
+  React.useEffect(() => {
+    blogCategoryInitialized.current = false;
+  }, [data === null || data === void 0 ? void 0 : data._id, formState]);
   // Watch blogLimit form value and update state
   const watchedBlogLimit = watch('blogLimit');
   React.useEffect(() => {
@@ -7506,6 +7525,13 @@ const WidgetForm = ({
       }
       return item;
     });
+    // Clean up fields based on widget type
+    if (formData['widgetType'] !== constants.htmlWidgetTypeValue) {
+      delete formData['htmlContent'];
+    }
+    if (formData['widgetType'] !== constants.textWidgetTypeValue) {
+      delete formData['textContent'];
+    }
     const submitPayload = Object.assign(Object.assign(Object.assign(Object.assign({}, formData), {
       items
     }), blogCategory && {
@@ -7632,6 +7658,7 @@ const WidgetForm = ({
       required: widgetTranslations.htmlContentRequired
     },
     show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
+    wrapperClassName: 'khb_html-content-field',
     Input: customInputs && customInputs['htmlContent'] ? customInputs['htmlContent'] : undefined
   }, {
     label: widgetTranslations.itemsType,

package/index.js

@@ -3358,13 +3358,25 @@ const Input$1 = ({
   onChange,
   wrapperClassName
 }) => {
+  const isTextarea = type === 'textarea';
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('khb_input-wrapper', wrapperClassName)
   }, label && (/*#__PURE__*/React.createElement("label", {
     className: "khb_input-label"
   }, label, required ? (/*#__PURE__*/React.createElement("span", {
     className: "khb_input-label-required"
-  }, "*")) : null)), /*#__PURE__*/React.createElement("input", Object.assign({
+  }, "*")) : null)), isTextarea ? (/*#__PURE__*/React.createElement("textarea", Object.assign({
+    className: classNames('khb_input', `khb_input-${_size}`, className),
+    placeholder: placeholder,
+    disabled: disabled,
+    id: id,
+    value: value,
+    onChange: onChange,
+    rows: 10
+  }, rest, {
+    onInput: onInput,
+    onBlur: onBlur
+  }))) : (/*#__PURE__*/React.createElement("input", Object.assign({
     className: classNames('khb_input', `khb_input-${_size}`, className),
     type: type,
     placeholder: placeholder,
@@ -3375,7 +3387,7 @@ const Input$1 = ({
   }, rest, {
     onInput: onInput,
     onBlur: onBlur
-  })), error && /*#__PURE__*/React.createElement("p", {
+  }))), error && /*#__PURE__*/React.createElement("p", {
     className: "khb_input-error "
   }, error), info && /*#__PURE__*/React.createElement("p", {
     className: "khb_input-info"
@@ -7185,10 +7197,11 @@ const WidgetForm = ({
   const [collectionItemsUpdated, setCollectionItemsUpdated] = useState(false);
   const [tabCollectionItemsUpdated, setTabCollectionItemsUpdated] = useState([]);
   const [blogCategory, setBlogCategory] = useState(null);
-  const [blogLimit, setBlogLimit] = useState(10);
+  const [blogLimit, setBlogLimit] = useState(undefined);
   const [blogCategories, setBlogCategories] = useState([]);
   const [blogCategoriesLoading, setBlogCategoriesLoading] = useState(false);
   const pagesLoadedRef = useRef(false);
+  const blogCategoryInitialized = useRef(false);
   useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7253,24 +7266,25 @@ const WidgetForm = ({
   }, [currentItemsType, baseUrl, token, widgetRoutesPrefix, blogCategories.length]);
   // Set blog category and limit when editing a widget
   useEffect(() => {
-    if (formState === 'UPDATE' && data && currentItemsType === 'blog' && blogCategories.length > 0) {
+    if (formState === 'UPDATE' && data && currentItemsType === 'blog' && blogCategories.length > 0 && !blogCategoryInitialized.current) {
       // Set blog category if it exists in the data
-      if (data.blogCategory && !blogCategory) {
+      if (data.blogCategory) {
         const savedCategory = blogCategories.find(cat => cat.value === data.blogCategory);
         if (savedCategory) {
           setBlogCategory(savedCategory);
+          blogCategoryInitialized.current = true;
         }
       }
       // Set blog limit if it exists in the data
-      if (data.blogLimit && blogLimit === 10) {
+      if (data.blogLimit) {
         setBlogLimit(data.blogLimit);
       }
     }
-  }, [formState, data, currentItemsType, blogCategories, blogCategory, blogLimit]);
+  }, [formState, data, currentItemsType, blogCategories]);
   // Clear collectionItems when using blog category/limit (server will handle fetching latest blogs)
   useEffect(() => {
     if (currentItemsType === 'blog') {
-      if (blogCategory || blogLimit > 0) {
+      if (blogCategory || blogLimit && blogLimit > 0) {
         // Clear selected collection items since server will fetch latest blogs based on category/limit
         setSelectedCollectionItems([]);
         setCollectionItemsUpdated(true);
@@ -7281,10 +7295,15 @@ const WidgetForm = ({
   useEffect(() => {
     if (currentItemsType !== 'blog') {
       setBlogCategory(null);
-      setBlogLimit(10);
+      setBlogLimit(undefined);
       setBlogCategories([]);
+      blogCategoryInitialized.current = false;
     }
   }, [currentItemsType]);
+  // Reset initialization flag when opening a different widget or changing form state
+  useEffect(() => {
+    blogCategoryInitialized.current = false;
+  }, [data === null || data === void 0 ? void 0 : data._id, formState]);
   // Watch blogLimit form value and update state
   const watchedBlogLimit = watch('blogLimit');
   useEffect(() => {
@@ -7494,6 +7513,13 @@ const WidgetForm = ({
       }
       return item;
     });
+    // Clean up fields based on widget type
+    if (formData['widgetType'] !== constants.htmlWidgetTypeValue) {
+      delete formData['htmlContent'];
+    }
+    if (formData['widgetType'] !== constants.textWidgetTypeValue) {
+      delete formData['textContent'];
+    }
     const submitPayload = Object.assign(Object.assign(Object.assign(Object.assign({}, formData), {
       items
     }), blogCategory && {
@@ -7620,6 +7646,7 @@ const WidgetForm = ({
       required: widgetTranslations.htmlContentRequired
     },
     show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
+    wrapperClassName: 'khb_html-content-field',
     Input: customInputs && customInputs['htmlContent'] ? customInputs['htmlContent'] : undefined
   }, {
     label: widgetTranslations.itemsType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",