@webbio/strapi-plugin-page-builder 0.12.2-platform → 0.12.4-platform

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

@@ -1,210 +1,210 @@
-import React, { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { useSelector } from 'react-redux';
-import { useFetchClient } from '@strapi/helper-plugin';
-import pick from 'lodash/pick';
-
-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';
-import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
-import { getTranslation } from '../utils/get-translations';
-import { Platform } from '../../../api/platform';
-
-const PAGE = 1;
-
-// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
-
-export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
-	relations?: any;
-	isCloningEntry?: boolean;
-	totalRelations: number;
-	relationsFromModifiedData?: Record<string, any>[];
-	selectedPlatform?: Platform;
-	hiddenId?: number[];
-}
-
-const MultiPlatformFilteredSelectField = ({
-	attribute,
-	description,
-	labelAction,
-	error,
-	required,
-	placeholder,
-	intlLabel,
-	name,
-	relations,
-	isCloningEntry,
-	totalRelations,
-	relationsFromModifiedData,
-	selectedPlatform,
-	hiddenId
-}: IMultiPlatformFilteredSelectFieldProps) => {
-	const fetchClient = useFetchClient();
-	const {
-		initialData,
-		modifiedData,
-		layout,
-		allLayoutData,
-		relationReorder,
-		relationDisconnect,
-		relationConnect,
-		isCreatingEntry
-	} = useCMEditViewDataManager() as any;
-	const { locales } = useSelector((state: any) => state.i18n_locales);
-	const urlLocale = useGetLocaleFromUrl();
-	const defaultLocale = locales.find((locale: any) => locale.isDefault);
-	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
-
-	const [searchResults, setSearchResults] = useState<RelationInputProps['searchResults']>({
-		data: [],
-		isLoading: false
-	});
-	const [selectedResults, setSelectedResults] = useState<RelationInputProps['relations']>({
-		data: [],
-		isLoading: false,
-		isFetchingNextPage: false
-	});
-
-	const { formatMessage } = useIntl();
-
-	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
-		name,
-		attribute,
-		modifiedData,
-		layout,
-		allLayoutData
-	);
-
-	const label = intlLabel?.id
-		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
-		: name;
-
-	const hint = description?.id
-		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
-		: '';
-
-	useEffect(() => {
-		setSelectedResults({ data: targetFieldValue, isLoading: false, isFetchingNextPage: false });
-	}, [targetFieldValue]);
-
-	const getItems = async (inputValue?: string) => {
-		const entities = await getSearchFilteredEntities({
-			fetchClient,
-			page: PAGE,
-			uid: targetAttributes?.target || '',
-			locale: selectedLocale,
-			searchQuery: inputValue,
-			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : selectedPlatform?.title,
-			notIds: [...(selectedResults?.data || []).map((x: Record<string, any>) => x.id), ...(hiddenId || [])],
-			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters
-		});
-
-		const mapped = entities?.results.map((x) => ({
-			id: x.id,
-			mainField: x.title,
-			href: x?.href,
-			publicationState: x.publicationState,
-			publishedAt: x.publishedAt
-		}));
-
-		// @ts-expect-error data is fine
-		setSearchResults({ data: mapped || [], isLoading: false });
-	};
-
-	const handleRelationReorder = (oldIndex: number, newIndex: number) => {
-		relationReorder?.({
-			name: targetField,
-			newIndex,
-			oldIndex
-		});
-	};
-
-	const handleRelationLoadMore = () => {
-		relations.fetchNextPage();
-	};
-
-	const handleRelationConnect = (relation: Record<string, any>) => {
-		relationConnect?.({ name: targetField, value: relation, toOneRelation: false });
-	};
-
-	const handleRelationDisconnect = (relation: Record<string, any>) => {
-		relationDisconnect?.({ name: targetField, id: relation.id });
-	};
-
-	return (
-		<RelationInput
-			id={name}
-			name={name || ''}
-			error={error}
-			canReorder
-			description={hint}
-			iconButtonAriaLabel="Drag"
-			label={`${label} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
-			labelLoadMore={
-				!isCreatingEntry || isCloningEntry
-					? formatMessage({
-							id: getTranslation('relation.loadMore'),
-							defaultMessage: 'Load More'
-						})
-					: undefined
-			}
-			liveText=""
-			listAriaDescription={formatMessage({
-				id: getTranslation('dnd.instructions'),
-				defaultMessage: `Press spacebar to grab and re-order`
-			})}
-			loadingMessage={formatMessage({
-				id: getTranslation('relation.isLoading'),
-				defaultMessage: 'Relations are loading'
-			})}
-			labelDisconnectRelation={formatMessage({
-				id: getTranslation('relation.disconnect'),
-				defaultMessage: 'Remove'
-			})}
-			numberOfRelationsToDisplay={5}
-			noRelationsMessage={formatMessage({
-				id: getTranslation('relation.notAvailable'),
-				defaultMessage: 'No relations available'
-			})}
-			onRelationConnect={handleRelationConnect}
-			onRelationDisconnect={handleRelationDisconnect}
-			onRelationLoadMore={handleRelationLoadMore}
-			onRelationReorder={handleRelationReorder}
-			onSearch={(e?: string) => getItems(e)}
-			// onSearchNextPage={(e) => console.log(e)}
-			placeholder={formatMessage(
-				placeholder || {
-					id: getTranslation('relation.add'),
-					defaultMessage: 'Add relation'
-				}
-			)}
-			publicationStateTranslations={{
-				draft: 'Draft',
-				published: 'Published'
-			}}
-			relations={pick(
-				{ ...relations, data: relationsFromModifiedData },
-				'data',
-				'hasNextPage',
-				'isFetchingNextPage',
-				'isLoading',
-				'isSuccess'
-			)}
-			searchResults={searchResults}
-			size={8}
-			// @ts-ignore
-			hint={hint || ''}
-			labelAction={labelAction}
-			required={required}
-			disabled={!selectedPlatform}
-		/>
-	);
-};
-
-export default MultiPlatformFilteredSelectField;
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+import { useFetchClient } from '@strapi/helper-plugin';
+import pick from 'lodash/pick';
+
+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';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { getTranslation } from '../utils/get-translations';
+import { Platform } from '../../../api/platform';
+
+const PAGE = 1;
+
+// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
+
+export interface IMultiPlatformFilteredSelectFieldProps extends IPlatformFilteredSelectFieldProps {
+	relations?: any;
+	isCloningEntry?: boolean;
+	totalRelations: number;
+	relationsFromModifiedData?: Record<string, any>[];
+	selectedPlatform?: Platform;
+	hiddenId?: number[];
+}
+
+const MultiPlatformFilteredSelectField = ({
+	attribute,
+	description,
+	labelAction,
+	error,
+	required,
+	placeholder,
+	intlLabel,
+	name,
+	relations,
+	isCloningEntry,
+	totalRelations,
+	relationsFromModifiedData,
+	selectedPlatform,
+	hiddenId
+}: IMultiPlatformFilteredSelectFieldProps) => {
+	const fetchClient = useFetchClient();
+	const {
+		initialData,
+		modifiedData,
+		layout,
+		allLayoutData,
+		relationReorder,
+		relationDisconnect,
+		relationConnect,
+		isCreatingEntry
+	} = useCMEditViewDataManager() as any;
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = initialData?.locale ?? urlLocale ?? defaultLocale.code;
+
+	const [searchResults, setSearchResults] = useState<RelationInputProps['searchResults']>({
+		data: [],
+		isLoading: false
+	});
+	const [selectedResults, setSelectedResults] = useState<RelationInputProps['relations']>({
+		data: [],
+		isLoading: false,
+		isFetchingNextPage: false
+	});
+
+	const { formatMessage } = useIntl();
+
+	const { targetAttributes, targetFieldValue, targetField } = RelationHelper.getTargetAttributes(
+		name,
+		attribute,
+		modifiedData,
+		layout,
+		allLayoutData
+	);
+
+	const label = intlLabel?.id
+		? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel?.defaultMessage }, { ...intlLabel.values })
+		: name;
+
+	const hint = description?.id
+		? formatMessage({ id: description.id, defaultMessage: description.defaultMessage }, { ...description.values })
+		: '';
+
+	useEffect(() => {
+		setSelectedResults({ data: targetFieldValue, isLoading: false, isFetchingNextPage: false });
+	}, [targetFieldValue]);
+
+	const getItems = async (inputValue?: string) => {
+		const entities = await getSearchFilteredEntities({
+			fetchClient,
+			page: PAGE,
+			uid: targetAttributes?.target || '',
+			locale: selectedLocale,
+			searchQuery: inputValue,
+			platformTitle: attribute?.pluginOptions?.filteredSelect?.disablePlatformFilter ? '' : selectedPlatform?.title,
+			notIds: [...(selectedResults?.data || []).map((x: Record<string, any>) => x.id), ...(hiddenId || [])],
+			customFilters: attribute?.pluginOptions?.filteredSelect?.customFilters
+		});
+
+		const mapped = entities?.results.map((x) => ({
+			id: x.id,
+			mainField: x.title,
+			href: x?.href,
+			publicationState: x.publicationState,
+			publishedAt: x.publishedAt
+		}));
+
+		// @ts-expect-error data is fine
+		setSearchResults({ data: mapped || [], isLoading: false });
+	};
+
+	const handleRelationReorder = (oldIndex: number, newIndex: number) => {
+		relationReorder?.({
+			name: targetField,
+			newIndex,
+			oldIndex
+		});
+	};
+
+	const handleRelationLoadMore = () => {
+		relations.fetchNextPage();
+	};
+
+	const handleRelationConnect = (relation: Record<string, any>) => {
+		relationConnect?.({ name: targetField, value: relation, toOneRelation: false });
+	};
+
+	const handleRelationDisconnect = (relation: Record<string, any>) => {
+		relationDisconnect?.({ name: targetField, id: relation.id });
+	};
+
+	return (
+		<RelationInput
+			id={name}
+			name={name || ''}
+			error={error}
+			canReorder
+			description={hint}
+			iconButtonAriaLabel="Drag"
+			label={`${label} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
+			labelLoadMore={
+				!isCreatingEntry || isCloningEntry
+					? formatMessage({
+							id: getTranslation('relation.loadMore'),
+							defaultMessage: 'Load More'
+						})
+					: undefined
+			}
+			liveText=""
+			listAriaDescription={formatMessage({
+				id: getTranslation('dnd.instructions'),
+				defaultMessage: `Press spacebar to grab and re-order`
+			})}
+			loadingMessage={formatMessage({
+				id: getTranslation('relation.isLoading'),
+				defaultMessage: 'Relations are loading'
+			})}
+			labelDisconnectRelation={formatMessage({
+				id: getTranslation('relation.disconnect'),
+				defaultMessage: 'Remove'
+			})}
+			numberOfRelationsToDisplay={5}
+			noRelationsMessage={formatMessage({
+				id: getTranslation('relation.notAvailable'),
+				defaultMessage: 'No relations available'
+			})}
+			onRelationConnect={handleRelationConnect}
+			onRelationDisconnect={handleRelationDisconnect}
+			onRelationLoadMore={handleRelationLoadMore}
+			onRelationReorder={handleRelationReorder}
+			onSearch={(e?: string) => getItems(e)}
+			// onSearchNextPage={(e) => console.log(e)}
+			placeholder={formatMessage(
+				placeholder || {
+					id: getTranslation('relation.add'),
+					defaultMessage: 'Add relation'
+				}
+			)}
+			publicationStateTranslations={{
+				draft: 'Draft',
+				published: 'Published'
+			}}
+			relations={pick(
+				{ ...relations, data: relationsFromModifiedData },
+				'data',
+				'hasNextPage',
+				'isFetchingNextPage',
+				'isLoading',
+				'isSuccess'
+			)}
+			searchResults={searchResults}
+			size={8}
+			// @ts-ignore
+			hint={hint || ''}
+			labelAction={labelAction}
+			required={required}
+			disabled={!selectedPlatform}
+		/>
+	);
+};
+
+export default MultiPlatformFilteredSelectField;