@knovator/pagecreator-admin 0.5.4 → 0.5.6

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');
@@ -2819,7 +2819,7 @@ const usePage = ({
     }
     onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
   }, [onError, onLogout]);
-  const getWidgets = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+  const getWidgets = React.useCallback(callback => __awaiter(void 0, void 0, void 0, function* () {
     try {
       setWidgetsLoading(true);
       const api = getApiType({
@@ -2846,6 +2846,7 @@ const usePage = ({
             value: item['_id'] || item['id']
           };
         });
+        if (typeof callback === 'function') callback(widgetsData);
         return setWidgets(widgetsData);
       }
       setWidgetsLoading(false);
@@ -2970,10 +2971,7 @@ const usePage = ({
   const onChangeFormState = (state, data) => {
     setItemData(data || null);
     setFormState(state);
-    if (state === 'UPDATE' && (data === null || data === void 0 ? void 0 : data.widgets)) {
-      setSelectedWidgets(data.widgets.map(widgetId => widgets.find(widget => widget['value'] === widgetId)).filter(widget => widget));
-      // setSelectedWidgets(widgets.filter((widget) => data.widgets.includes(widget.value)));
-    } else {
+    if (state === 'UPDATE' && (data === null || data === void 0 ? void 0 : data.widgets)) ; else {
       setSelectedWidgets([]);
     }
   };
@@ -2987,7 +2985,6 @@ const usePage = ({
   };
   React.useEffect(() => {
     if (_canList) getPages();
-    getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageSize, currentPage, _canList]);
   return {
@@ -3006,6 +3003,7 @@ const usePage = ({
     widgets,
     itemData,
     formState,
+    getWidgets,
     onCloseForm,
     widgetsLoading,
     selectedWidgets,
@@ -3027,6 +3025,7 @@ const PageContextProvider = ({
   closeForm: _closeForm = () => {},
   getPages: _getPages = () => {},
   loading: _loading = false,
+  getWidgets: _getWidgets = () => {},
   onChangeFormState: _onChangeFormState = () => {},
   onPageFormSubmit: _onPageFormSubmit = () => {},
   canAdd: _canAdd = false,
@@ -3060,6 +3059,7 @@ const PageContextProvider = ({
       closeForm: _closeForm,
       formState: _formState,
       loading: _loading,
+      getWidgets: _getWidgets,
       onChangeFormState: _onChangeFormState,
       canAdd: _canAdd,
       canUpdate: _canUpdate,
@@ -3323,19 +3323,19 @@ const CustomReactSelect = ({
   onChange,
   label,
   error,
-  options: _options = [],
   className,
   isMulti,
   selectedOptions: _selectedOptions = [],
   required,
   isLoading,
   isSearchable,
-  onSearch,
+  loadOptions,
   placeholder,
   wrapperClassName,
   formatOptionLabel,
   listCode,
-  customStyles
+  customStyles,
+  selectKey
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClassName
@@ -3344,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
@@ -3351,10 +3352,10 @@ 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,
     styles: customStyles
@@ -3723,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(),
@@ -3737,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':
@@ -3876,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(),
@@ -3890,13 +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,
-            customStyles: schema.customStyles
+            customStyles: schema.customStyles,
+            loadOptions: schema.loadOptions,
+            selectKey: schema.selectKey
           });
           break;
         case 'checkbox':
@@ -4041,6 +4042,7 @@ const PageForm = ({
     selectedWidgets,
     setSelectedWidgets,
     widgets,
+    getWidgets,
     onChangeWidgetSequence,
     canAdd,
     canUpdate
@@ -4054,6 +4056,12 @@ const PageForm = ({
     event.target.value = changeToCode(event.target.value);
     return event;
   }
+  function loadOptions(value, callback) {
+    getWidgets(widgetsData => {
+      if (callback) callback(widgetsData);
+      if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
+    });
+  }
   // Widget Form Functions
   const onDragEnd = result => {
     const {
@@ -4091,6 +4099,7 @@ const PageForm = ({
     options: widgets,
     selectedOptions: selectedWidgets,
     isMulti: true,
+    loadOptions: loadOptions,
     onChange: widgets => setSelectedWidgets(widgets)
   }];
   if (!canAdd && !canUpdate) return null;
@@ -4511,6 +4520,7 @@ const Page = ({
     itemData,
     setCurrentPage,
     formState,
+    getWidgets,
     onChangeFormState,
     onPageFormSubmit,
     onCloseForm,
@@ -4536,6 +4546,7 @@ const Page = ({
     currentPage: currentPage,
     onChangeFormState: onChangeFormState,
     pageSize: pageSize,
+    getWidgets: getWidgets,
     setCurrentPage: setCurrentPage,
     onPageFormSubmit: onPageFormSubmit,
     selectedWidgets: selectedWidgets,
@@ -4837,7 +4848,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,
@@ -4853,7 +4864,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') {
@@ -4897,35 +4909,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
@@ -4935,10 +4918,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({
@@ -6734,23 +6717,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,
@@ -6808,16 +6792,17 @@ 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,
@@ -6837,6 +6822,7 @@ const constants = {
   widgetTypeAccessor: 'widgetType',
   itemTypeAccessor: 'itemsType',
   collectionNameAccessor: 'collectionName',
+  collectionItemsAccessor: 'collectionItems',
   tabsWidgetTypeValue: 'Tabs',
   fixedCardWidgetTypeValue: 'FixedCard',
   carouselWidgetTypeValue: 'Carousel',
@@ -6889,6 +6875,7 @@ const WidgetForm = ({
     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();
@@ -6904,11 +6891,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)));
       }
@@ -6926,10 +6908,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
@@ -6955,7 +6969,6 @@ const WidgetForm = ({
       if (value[name] === 'Tabs') {
         const firstItemType = getFirstItemTypeValue(value[name]);
         if (firstItemType) {
-          getCollectionData(firstItemType.value);
           setSelectedCollectionType(firstItemType);
         }
       }
@@ -6966,13 +6979,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);
@@ -6985,7 +6997,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
@@ -7137,20 +7149,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,
-    customStyles: reactSelectStyles || {}
+    customStyles: reactSelectStyles || {},
+    selectKey: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }];
   const itemFormSchema = [{
     label: `${t('item.title')}`,
@@ -7231,19 +7241,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,
-    customStyles: reactSelectStyles || {}
+    customStyles: reactSelectStyles || {},
+    activeTab: activeTab,
+    setActiveTab: setActiveTab
   }) : null, !itemsEnabled && selectedWidgetType !== 'Tabs' && /*#__PURE__*/React__default["default"].createElement(DNDItemsList, {
     items: selectedCollectionItems,
     onDragEnd: onCollectionIndexChange,