@webbio/strapi-plugin-page-builder 0.8.4-platform → 0.9.0-platform

package/admin/src/components/Combobox/react-select-custom-styles.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { StylesConfig } from 'react-select';
 import { useTheme } from 'styled-components';
 import { IReactSelectValue } from '.';

package/admin/src/components/PlatformFilteredSelectField/Multi/index.tsx

@@ -5,7 +5,10 @@ import { useSelector } from 'react-redux';
 import { useFetchClient } from '@strapi/helper-plugin';
 import pick from 'lodash/pick';
 
-import RelationInput from '@strapi/admin/admin/src/content-manager/components/RelationInput/RelationInput';
+import {
+	RelationInput,
+	RelationInputProps
+} from '../../StrapiCore/admin/admin/src/content-manager/components/Relations/RelationInput';
 
 import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
 import { getSearchFilteredEntities } from '../../../api/search-filtered-entity';
@@ -53,8 +56,15 @@ const MultiPlatformFilteredSelectField = ({
 	const defaultLocale = locales.find((locale: any) => locale.isDefault);
 	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
 
-	const [searchResults, setSearchResults] = useState<Record<string, any>>({ data: [] });
-	const [selectedResults, setSelectedResults] = useState<Record<string, any>>({ data: [] });
+	const [searchResults, setSearchResults] = useState<RelationInputProps['searchResults']>({
+		data: [],
+		isLoading: false
+	});
+	const [selectedResults, setSelectedResults] = useState<RelationInputProps['relations']>({
+		data: [],
+		isLoading: false,
+		isFetchingNextPage: false
+	});
 
 	const { formatMessage } = useIntl();
 
@@ -75,7 +85,7 @@ const MultiPlatformFilteredSelectField = ({
 		: '';
 
 	useEffect(() => {
-		setSelectedResults({ data: targetFieldValue });
+		setSelectedResults({ data: targetFieldValue, isLoading: false, isFetchingNextPage: false });
 	}, [targetFieldValue]);
 
 	const getItems = async (inputValue?: string) => {
@@ -86,7 +96,7 @@ const MultiPlatformFilteredSelectField = ({
 			locale: selectedLocale,
 			searchQuery: inputValue,
 			platformTitle: initialData?.platform?.[0]?.title,
-			notIds: selectedResults?.data?.map((x) => x.id)
+			notIds: selectedResults?.data?.map((x: Record<string, any>) => x.id)
 		});
 
 		const mapped = entities?.results.map((x) => ({
@@ -97,7 +107,7 @@ const MultiPlatformFilteredSelectField = ({
 			publishedAt: x.publishedAt
 		}));
 
-		setSearchResults({ data: mapped || [] });
+		setSearchResults({ data: mapped || [], isLoading: false });
 	};
 
 	const handleRelationReorder = (oldIndex: number, newIndex: number) => {
@@ -123,7 +133,7 @@ const MultiPlatformFilteredSelectField = ({
 	return (
 		<RelationInput
 			id={name}
-			name={name}
+			name={name || ''}
 			error={error}
 			canReorder
 			description={hint}
@@ -134,7 +144,7 @@ const MultiPlatformFilteredSelectField = ({
 					? formatMessage({
 							id: getTranslation('relation.loadMore'),
 							defaultMessage: 'Load More'
-					  })
+						})
 					: undefined
 			}
 			liveText=""
@@ -159,7 +169,7 @@ const MultiPlatformFilteredSelectField = ({
 			onRelationDisconnect={handleRelationDisconnect}
 			onRelationLoadMore={handleRelationLoadMore}
 			onRelationReorder={handleRelationReorder}
-			onSearch={(e) => getItems(e)}
+			onSearch={(e?: string) => getItems(e)}
 			// onSearchNextPage={(e) => console.log(e)}
 			placeholder={formatMessage(
 				placeholder || {
@@ -181,7 +191,8 @@ const MultiPlatformFilteredSelectField = ({
 			)}
 			searchResults={searchResults}
 			size={8}
-			hint={hint}
+			// @ts-ignore
+			hint={hint || ''}
 			labelAction={labelAction}
 			required={required}
 		/>