@knovator/pagecreator-admin 0.5.3 → 0.5.5

package/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var fetchUrl = require('@knovator/api');
 var classNames = require('classnames');
-var ReactSelect = require('react-select');
+var ReactSelect = require('react-select/async');
 var reactHookForm = require('react-hook-form');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var CSSTransition = require('react-transition-group/CSSTransition');
@@ -1737,7 +1737,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.webPerRowRequired': 'Web Per Row is required',
   'widget.tabletPerRowRequired': 'Tablet Per Row is required',
   'widget.mobilePerRowRequired': 'Mobile Per Row is required',
-  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?'
+  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
+  'widget.widgetTitleInfo': 'HTML is supported'
 };
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
@@ -3256,6 +3257,7 @@ const Input$1 = ({
   onInput,
   onBlur,
   value,
+  info,
   onChange,
   wrapperClassName
 }) => {
@@ -3278,7 +3280,9 @@ const Input$1 = ({
     onBlur: onBlur
   })), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
-  }, error));
+  }, error), info && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "khb_input-info"
+  }, info));
 };
 
 const Select = ({
@@ -3319,18 +3323,19 @@ const CustomReactSelect = ({
   onChange,
   label,
   error,
-  options: _options = [],
   className,
   isMulti,
   selectedOptions: _selectedOptions = [],
   required,
   isLoading,
   isSearchable,
-  onSearch,
+  loadOptions,
   placeholder,
   wrapperClassName,
   formatOptionLabel,
-  listCode
+  listCode,
+  customStyles,
+  selectKey
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClassName
@@ -3339,6 +3344,7 @@ const CustomReactSelect = ({
   }, label, required ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_input-label-required"
   }, "*") : null), /*#__PURE__*/React__default["default"].createElement(ReactSelect__default["default"], {
+    key: selectKey,
     "data-testid": `input-select-${label}`,
     value: _selectedOptions,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3346,12 +3352,13 @@ const CustomReactSelect = ({
     onChange: onChange,
     className: classNames__default["default"](className),
     isMulti: isMulti,
-    options: _options,
+    defaultOptions: true,
     isSearchable: isSearchable,
     isLoading: isLoading,
-    onKeyDown: e => onSearch && onSearch(e.target.value),
+    loadOptions: loadOptions,
     placeholder: placeholder,
-    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined
+    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined,
+    styles: customStyles
   }), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
   }, error));
@@ -3717,7 +3724,6 @@ const Form = /*#__PURE__*/React.forwardRef(({
       switch (schema.type) {
         case 'ReactSelect':
           input = /*#__PURE__*/React__default["default"].createElement(CustomReactSelect, {
-            options: schema.options,
             disabled: !_enable,
             label: schema.label,
             error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
@@ -3731,11 +3737,12 @@ const Form = /*#__PURE__*/React.forwardRef(({
             required: schema.required,
             isMulti: schema.isMulti,
             isSearchable: schema.isSearchable,
-            onSearch: schema.onSearch,
             isLoading: schema.isLoading,
             placeholder: schema.placeholder,
             wrapperClassName: schema.wrapperClassName,
-            formatOptionLabel: schema.formatOptionLabel
+            formatOptionLabel: schema.formatOptionLabel,
+            selectKey: schema.selectKey,
+            loadOptions: schema.loadOptions
           });
           break;
         case 'checkbox':
@@ -3870,7 +3877,6 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
       switch (schema.type) {
         case 'ReactSelect':
           input = /*#__PURE__*/React__default["default"].createElement(CustomReactSelect, {
-            options: schema.options,
             disabled: !_enable,
             label: schema.label,
             error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
@@ -3884,12 +3890,14 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
             required: schema.required,
             isMulti: schema.isMulti,
             isSearchable: schema.isSearchable,
-            onSearch: schema.onSearch,
             isLoading: schema.isLoading,
             placeholder: schema.placeholder,
             wrapperClassName: schema.wrapperClassName,
             formatOptionLabel: schema.formatOptionLabel,
-            listCode: schema.listCode
+            listCode: schema.listCode,
+            customStyles: schema.customStyles,
+            loadOptions: schema.loadOptions,
+            selectKey: schema.selectKey
           });
           break;
         case 'checkbox':
@@ -3941,7 +3949,8 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
             onInput: schema.onInput,
-            wrapperClassName: schema.wrapperClassName
+            wrapperClassName: schema.wrapperClassName,
+            info: schema.info
           });
           break;
       }
@@ -4829,7 +4838,7 @@ const useWidget = ({
     }
     setLoading(false);
   });
-  const getCollectionData = (collectionName, search, callback) => __awaiter(void 0, void 0, void 0, function* () {
+  const getCollectionData = (collectionName, search, callback, collectionItems) => __awaiter(void 0, void 0, void 0, function* () {
     setCollectionDataLoading(true);
     const api = getApiType({
       routes,
@@ -4845,7 +4854,8 @@ const useWidget = ({
       onError: handleError(CALLBACK_CODES.GET_ALL),
       data: {
         search: search || '',
-        collectionName
+        collectionName,
+        collectionItems: collectionItems || []
       }
     });
     if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
@@ -4889,35 +4899,6 @@ const useWidget = ({
     setFormState(undefined);
     setItemData(null);
   };
-  const updateCollectionDataReferences = itemData => collectionData => {
-    const itemDataUpdated = Object.assign({}, itemData);
-    if (itemDataUpdated['tabs'] && itemDataUpdated['tabs'].length > 0 && collectionData && collectionData.length > 0) {
-      itemDataUpdated['tabs'] = itemDataUpdated['tabs'].map(item => {
-        var _a;
-        return {
-          name: item.name,
-          collectionItems: ((_a = item === null || item === void 0 ? void 0 : item.collectionItems) === null || _a === void 0 ? void 0 : _a.map(itemId => {
-            item = collectionData.find(item => item._id === itemId || item.id === itemId);
-            return item ? Object.assign({
-              label: item.name,
-              value: item._id || item.id
-            }, item) : {};
-          })) || []
-        };
-      });
-    }
-    if (itemDataUpdated['collectionItems'] && itemDataUpdated['collectionItems'].length > 0 && collectionData && collectionData.length > 0) {
-      let item;
-      itemDataUpdated['collectionItems'] = itemDataUpdated['collectionItems'].map(itemId => {
-        item = collectionData.find(item => item._id === itemId || item.id === itemId);
-        return item ? Object.assign({
-          label: item.name,
-          value: item._id || item.id
-        }, item) : {};
-      });
-    }
-    setItemData(itemDataUpdated);
-  };
   const onChangeFormState = (state, data) => {
     setFormState(state);
     // fetch ItemsTypes & WidgetTypes if needed
@@ -4927,10 +4908,10 @@ const useWidget = ({
     }
     // get Item data if widget is updating
     if (state === 'UPDATE' && data) {
-      if (data['itemsType'] !== 'Image' && data['collectionName']) getCollectionData(data['collectionName'], '', updateCollectionDataReferences(data));else {
+      if (data['itemsType'] === 'Image') {
         getItems(data['_id']);
-        setItemData(data);
       }
+      setItemData(data);
     } else if (state === 'ADD') {
       // reset Item data if widget is adding
       setItemsList({
@@ -6187,6 +6168,7 @@ const WidgetContextProvider = ({
   mobileItems: _mobileItems = [],
   itemsLoading: _itemsLoading = false,
   onItemFormSubmit: _onItemFormSubmit = () => {},
+  reactSelectStyles: _reactSelectStyles = {},
   // other
   children
 }) => {
@@ -6215,6 +6197,7 @@ const WidgetContextProvider = ({
       collectionData: _collectionData,
       formatListItem,
       formatOptionLabel,
+      reactSelectStyles: _reactSelectStyles,
       // Pagination
       currentPage: _currentPage,
       limits: _limits,
@@ -6724,22 +6707,24 @@ const TabItem = ({
 };
 
 const Tabs = ({
+  activeTab,
+  setActiveTab,
   options,
   control,
   register,
   listCode,
   formatItem,
   deleteTitle,
+  loadOptions,
+  customStyles,
   noButtonText,
   yesButtonText,
-  onItemsSearch,
   isItemsLoading,
   itemsPlaceholder,
   formatOptionLabel,
   tabCollectionItems,
   onCollectionItemsIndexChange
 }) => {
-  const [activeTab, setActiveTab] = React.useState(0);
   const {
     fields: tabFields,
     append: appendField,
@@ -6797,19 +6782,21 @@ const Tabs = ({
         onChange
       }
     }) => /*#__PURE__*/React__default["default"].createElement(CustomReactSelect, {
-      options: options,
+      options: options || [],
       onChange: value => {
         if (value) {
           if (Array.isArray(value)) onChange(value);else onChange([value]);
         }
       },
+      selectKey: `tabs.${index}.collectionItems.${listCode}`,
       selectedOptions: value,
       isMulti: true,
       isSearchable: true,
-      onSearch: onItemsSearch,
+      loadOptions: loadOptions,
       isLoading: isItemsLoading,
       placeholder: itemsPlaceholder,
       listCode: listCode,
+      customStyles: customStyles,
       // wrapperClassName={schema.wrapperClassName}
       formatOptionLabel: formatOptionLabel
     })
@@ -6825,6 +6812,7 @@ const constants = {
   widgetTypeAccessor: 'widgetType',
   itemTypeAccessor: 'itemsType',
   collectionNameAccessor: 'collectionName',
+  collectionItemsAccessor: 'collectionItems',
   tabsWidgetTypeValue: 'Tabs',
   fixedCardWidgetTypeValue: 'FixedCard',
   carouselWidgetTypeValue: 'Carousel',
@@ -6873,9 +6861,11 @@ const WidgetForm = ({
     collectionData,
     collectionDataLoading,
     formatListItem,
-    formatOptionLabel
+    formatOptionLabel,
+    reactSelectStyles
   } = useWidgetState();
   const callerRef = React.useRef(null);
+  const [activeTab, setActiveTab] = React.useState(0);
   const [webItemsVisible, setWebItemsVisible] = React.useState(false);
   const [mobileItemsVisible, setMobileItemsVisible] = React.useState(false);
   const [selectedWidgetType, setSelectedWidgetType] = React.useState();
@@ -6891,11 +6881,6 @@ const WidgetForm = ({
       } else {
         setItemsEnabled(false);
       }
-      if ((data === null || data === void 0 ? void 0 : data.collectionItems) && (data === null || data === void 0 ? void 0 : data.collectionItems.length) > 0 && collectionData && collectionData.length > 0) {
-        setSelectedCollectionItems((data === null || data === void 0 ? void 0 : data.collectionItems) || []);
-      } else {
-        setSelectedCollectionItems([]);
-      }
       if ((data === null || data === void 0 ? void 0 : data.collectionName) !== 'Image' && itemsTypes && itemsTypes.length > 0) {
         setSelectedCollectionType(itemsTypes.find(item => item.value === (data === null || data === void 0 ? void 0 : data.collectionName)));
       }
@@ -6913,10 +6898,42 @@ const WidgetForm = ({
       reset(data);
     }
   }, [data, reset]);
-  const onChangeSearch = str => {
+  const onChangeSearch = (str, callback) => {
+    let collectionItems = [];
+    let valueToSet = '';
+    if (formState === 'UPDATE') {
+      if (data[constants.widgetTypeAccessor] === constants.tabsWidgetTypeValue) {
+        collectionItems = data[constants.tabsAccessor][activeTab]['collectionItems'];
+        valueToSet = `${constants.tabsAccessor}.${activeTab}.${constants.tabCollectionItemsAccessor}`;
+      } else if (Array.isArray(data[constants.collectionItemsAccessor]) && data[constants.collectionItemsAccessor].length > 0) {
+        collectionItems = data[constants.collectionItemsAccessor];
+        // valueToSet = constants.collectionItemsAccessor;
+      }
+    }
+
     if (callerRef.current) clearTimeout(callerRef.current);
+    let item;
     callerRef.current = setTimeout(() => {
-      if (selectedCollectionType) getCollectionData(selectedCollectionType.value, str);
+      if (selectedCollectionType) getCollectionData(selectedCollectionType.value, str, options => {
+        if (typeof callback === 'function') callback(options.map(item => Object.assign({
+          value: item['_id'] || item['id'],
+          label: item['name']
+        }, item)));
+        if (formState === 'UPDATE') {
+          const selectedOptions = (collectionItems === null || collectionItems === void 0 ? void 0 : collectionItems.map(itemId => {
+            item = options.find(item => item._id === itemId || item.id === itemId);
+            return item ? Object.assign({
+              label: item.name,
+              value: item._id || item.id
+            }, item) : {};
+          })) || [];
+          if (valueToSet) {
+            setValue(valueToSet, selectedOptions);
+          } else {
+            setSelectedCollectionItems(selectedOptions);
+          }
+        }
+      }, collectionItems);
     }, 300);
   };
   // Form Utility Functions
@@ -6942,7 +6959,6 @@ const WidgetForm = ({
       if (value[name] === 'Tabs') {
         const firstItemType = getFirstItemTypeValue(value[name]);
         if (firstItemType) {
-          getCollectionData(firstItemType.value);
           setSelectedCollectionType(firstItemType);
         }
       }
@@ -6953,13 +6969,12 @@ const WidgetForm = ({
       } else {
         const selectedWType = itemsTypes.find(wType => wType.value === value[constants.itemTypeAccessor]);
         setSelectedCollectionType(selectedWType);
-        getCollectionData(value[constants.itemTypeAccessor]);
         setItemsEnabled(false);
       }
-    } else if (name === null || name === void 0 ? void 0 : name.includes(constants.tabsAccessor)) {
+    } else if ((name === null || name === void 0 ? void 0 : name.includes(constants.tabsAccessor)) && Array.isArray(value[constants.tabsAccessor])) {
       setTabCollectionItems(value[constants.tabsAccessor].map(tabItem => tabItem[constants.tabCollectionItemsAccessor]));
     }
-  }, [getCollectionData, getFirstItemTypeValue, itemsTypes]);
+  }, [getFirstItemTypeValue, itemsTypes]);
   const onFormSubmit = data => {
     var _a, _b;
     const formData = Object.assign({}, data);
@@ -6972,7 +6987,7 @@ const WidgetForm = ({
     if (Array.isArray(tabsData) && (formData[constants.widgetTypeAccessor] === constants.tabsWidgetTypeValue || formState === 'UPDATE')) {
       formData[constants.tabsAccessor] = tabsData.map(tabItem => ({
         name: tabItem.name,
-        collectionItems: tabItem.collectionItems.map(item => item.value)
+        collectionItems: tabItem.collectionItems.map(item => typeof item == 'string' ? item : item.value)
       }));
     } else formData[constants.tabsAccessor] = [];
     // setting items type if undefined
@@ -7055,7 +7070,8 @@ const WidgetForm = ({
     placeholder: t('widget.widgetTitlePlaceholder'),
     validations: {
       required: t('widget.widgetTitleRequired')
-    }
+    },
+    info: t('widget.widgetTitleInfo')
   }, {
     label: `${t('widget.widgetType')}`,
     required: true,
@@ -7123,19 +7139,18 @@ const WidgetForm = ({
     required: true,
     accessor: 'collectionItems',
     type: 'ReactSelect',
-    options: collectionData.map(item => Object.assign({
-      value: item['_id'] || item['id'],
-      label: item['name']
-    }, item)),
+    options: collectionData,
     selectedOptions: selectedCollectionItems,
     isMulti: true,
     isSearchable: true,
     onChange: setSelectedCollectionItems,
-    onSearch: onChangeSearch,
+    loadOptions: onChangeSearch,
     isLoading: collectionDataLoading,
     show: !itemsEnabled && selectedWidgetType !== 'Tabs',
     formatOptionLabel: formatOptionLabel,
-    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
+    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value,
+    customStyles: reactSelectStyles || {},
+    selectKey: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }];
   const itemFormSchema = [{
     label: `${t('item.title')}`,
@@ -7216,18 +7231,17 @@ const WidgetForm = ({
     deleteTitle: t('widget.tabDeleteTitle'),
     yesButtonText: t('yesButtonText'),
     noButtonText: t('cancelButtonText'),
-    options: collectionData.map(item => Object.assign({
-      value: item['_id'] || item['id'],
-      label: item['name']
-    }, item)),
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
-    onItemsSearch: onChangeSearch,
+    loadOptions: onChangeSearch,
     isItemsLoading: collectionDataLoading,
     formatOptionLabel: formatOptionLabel,
     listCode: (selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value) || '',
     onCollectionItemsIndexChange: onTabItemsIndexChange,
     tabCollectionItems: tabCollectionItems,
-    formatItem: formatListItem
+    formatItem: formatListItem,
+    customStyles: reactSelectStyles || {},
+    activeTab: activeTab,
+    setActiveTab: setActiveTab
   }) : null, !itemsEnabled && selectedWidgetType !== 'Tabs' && /*#__PURE__*/React__default["default"].createElement(DNDItemsList, {
     items: selectedCollectionItems,
     onDragEnd: onCollectionIndexChange,

package/index.css

@@ -937,6 +937,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -1504,6 +1508,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.khb_input-info {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .khb_input-error {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1611,7 +1622,7 @@ video {
 .khb_drawer-container-2 {
   position: relative;
   width: 100vw;
-  max-width: 48rem;
+  max-width: 72rem;
 }
 .khb_drawer-close-section {
   position: absolute;