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

package/admin/src/components/EditView/Platform/platform-select.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
-
-import { Platform } from '../../../api/platform';
-import { PLATFORM } from '../../../../../shared/utils/constants';
-
-interface Props {
-	onChange: (platformId: string) => void;
-	selectedPlatform?: Platform | null;
-	platforms?: Platform[];
-	noLabel?: boolean;
-}
-
-export const PlatformSelect = ({ onChange, platforms, selectedPlatform, noLabel }: Props) => {
-	return (
-		<SingleSelect
-			label={!noLabel && 'Platform'}
-			placeholder="Kies een platform"
-			value={selectedPlatform?.id || PLATFORM}
-			onChange={onChange}
-		>
-			{platforms?.map((pageType: Platform) => (
-				<SingleSelectOption key={pageType?.id} value={pageType?.id}>
-					{pageType?.title}
-				</SingleSelectOption>
-			))}
-		</SingleSelect>
-	);
-};
+import React from 'react';
+
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { Platform } from '../../../api/platform';
+import { PLATFORM } from '../../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (platformId: string) => void;
+	selectedPlatform?: Platform | null;
+	platforms?: Platform[];
+	noLabel?: boolean;
+}
+
+export const PlatformSelect = ({ onChange, platforms, selectedPlatform, noLabel }: Props) => {
+	return (
+		<SingleSelect
+			label={!noLabel && 'Platform'}
+			placeholder="Kies een platform"
+			value={selectedPlatform?.id || PLATFORM}
+			onChange={onChange}
+		>
+			{platforms?.map((pageType: Platform) => (
+				<SingleSelectOption key={pageType?.id} value={pageType?.id}>
+					{pageType?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

package/admin/src/components/EditView/Template/TemplateConfirmModal/index.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-
-import { Icon, Flex } from '@strapi/design-system';
-import { Rotate } from '@strapi/icons';
-
-import getTrad from '../../../../utils/getTrad';
-import ConfirmModal, { IConfirmModalProps } from '../../../ConfirmModal';
-
-interface ITemplateConfirmModalProps extends IConfirmModalProps {}
-
-const TemplateConfirmModal = (props: ITemplateConfirmModalProps): JSX.Element => {
-	const { formatMessage } = useIntl();
-
-	return (
-		<ConfirmModal
-			{...props}
-			title={
-				<Flex gap={4}>
-					<Icon as={Rotate} color="neutral900" width={4} height={4} />
-					{formatMessage({
-						id: getTrad('template.confirmModal.title')
-					})}
-				</Flex>
-			}
-			body={formatMessage({
-				id: getTrad('template.confirmModal.body')
-			})}
-			submitText={formatMessage({
-				id: getTrad('template.confirmModal.buttons.submit')
-			})}
-		/>
-	);
-};
-
-export default TemplateConfirmModal;
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Icon, Flex } from '@strapi/design-system';
+import { Rotate } from '@strapi/icons';
+
+import getTrad from '../../../../utils/getTrad';
+import ConfirmModal, { IConfirmModalProps } from '../../../ConfirmModal';
+
+interface ITemplateConfirmModalProps extends IConfirmModalProps {}
+
+const TemplateConfirmModal = (props: ITemplateConfirmModalProps): JSX.Element => {
+	const { formatMessage } = useIntl();
+
+	return (
+		<ConfirmModal
+			{...props}
+			title={
+				<Flex gap={4}>
+					<Icon as={Rotate} color="neutral900" width={4} height={4} />
+					{formatMessage({
+						id: getTrad('template.confirmModal.title')
+					})}
+				</Flex>
+			}
+			body={formatMessage({
+				id: getTrad('template.confirmModal.body')
+			})}
+			submitText={formatMessage({
+				id: getTrad('template.confirmModal.buttons.submit')
+			})}
+		/>
+	);
+};
+
+export default TemplateConfirmModal;

package/admin/src/components/EditView/Template/TemplateSelect/index.tsx

@@ -1,70 +1,70 @@
-import React, { useEffect, useState } from 'react';
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Template } from '../../../../api/template';
-import TemplateConfirmModal from '../TemplateConfirmModal';
-import { useTemplateModules } from './use-template-modules';
-
-interface Props {
-	disabled?: boolean;
-}
-
-export const TemplateSelect = ({ disabled }: Props) => {
-	const { onChange, modifiedData } = useCMEditViewDataManager() as any;
-	const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
-	const { templates, replaceContentTypeModules } = useTemplateModules(onChange);
-	const [templateIdToSelect, setTemplateIdToSelect] = useState<string | undefined>();
-
-	const handleSelectChange = (templateId?: string) => {
-		setTemplateIdToSelect(templateId);
-	};
-
-	const handleSelectTemplate = (templateId?: string) => {
-		const template = templates?.find((template) => template.id === Number(templateId));
-
-		setSelectedTemplate(template || null);
-
-		setTemplateIdToSelect(undefined);
-	};
-
-	useEffect(() => {
-		const noModules = getHasModules(modifiedData?.modules);
-
-		const template = templates?.find((template) => template.id === Number(modifiedData?.pageType?.[0]?.templateId));
-		if (template && noModules) {
-			setSelectedTemplate(template);
-		}
-	}, [modifiedData?.pageType]);
-
-	useEffect(() => {
-		if (selectedTemplate !== null) {
-			replaceContentTypeModules(selectedTemplate.id);
-		}
-	}, [selectedTemplate]);
-
-	return (
-		<>
-			<SingleSelect
-				label="Template"
-				placeholder="Kies een template"
-				value={selectedTemplate?.id || 0}
-				onChange={handleSelectChange}
-				disabled={Boolean(disabled)}
-			>
-				<SingleSelectOption value={0}>Kies een template om in te laden</SingleSelectOption>
-				{templates?.map((template) => (
-					<SingleSelectOption key={template.id} value={template.id}>
-						{template.title}
-					</SingleSelectOption>
-				))}
-			</SingleSelect>
-			<TemplateConfirmModal
-				isOpen={Boolean(templateIdToSelect)}
-				onSubmit={() => handleSelectTemplate(templateIdToSelect)}
-				closeModal={() => setTemplateIdToSelect(undefined)}
-			/>
-		</>
-	);
-};
-
-const getHasModules = (modules: any[]): boolean => (modules?.length || 0) === 0;
+import React, { useEffect, useState } from 'react';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Template } from '../../../../api/template';
+import TemplateConfirmModal from '../TemplateConfirmModal';
+import { useTemplateModules } from './use-template-modules';
+
+interface Props {
+	disabled?: boolean;
+}
+
+export const TemplateSelect = ({ disabled }: Props) => {
+	const { onChange, modifiedData } = useCMEditViewDataManager() as any;
+	const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+	const { templates, replaceContentTypeModules } = useTemplateModules(onChange);
+	const [templateIdToSelect, setTemplateIdToSelect] = useState<string | undefined>();
+
+	const handleSelectChange = (templateId?: string) => {
+		setTemplateIdToSelect(templateId);
+	};
+
+	const handleSelectTemplate = (templateId?: string) => {
+		const template = templates?.find((template) => template.id === Number(templateId));
+
+		setSelectedTemplate(template || null);
+
+		setTemplateIdToSelect(undefined);
+	};
+
+	useEffect(() => {
+		const noModules = getHasModules(modifiedData?.modules);
+
+		const template = templates?.find((template) => template.id === Number(modifiedData?.pageType?.[0]?.templateId));
+		if (template && noModules) {
+			setSelectedTemplate(template);
+		}
+	}, [modifiedData?.pageType]);
+
+	useEffect(() => {
+		if (selectedTemplate !== null) {
+			replaceContentTypeModules(selectedTemplate.id);
+		}
+	}, [selectedTemplate]);
+
+	return (
+		<>
+			<SingleSelect
+				label="Template"
+				placeholder="Kies een template"
+				value={selectedTemplate?.id || 0}
+				onChange={handleSelectChange}
+				disabled={Boolean(disabled)}
+			>
+				<SingleSelectOption value={0}>Kies een template om in te laden</SingleSelectOption>
+				{templates?.map((template) => (
+					<SingleSelectOption key={template.id} value={template.id}>
+						{template.title}
+					</SingleSelectOption>
+				))}
+			</SingleSelect>
+			<TemplateConfirmModal
+				isOpen={Boolean(templateIdToSelect)}
+				onSubmit={() => handleSelectTemplate(templateIdToSelect)}
+				closeModal={() => setTemplateIdToSelect(undefined)}
+			/>
+		</>
+	);
+};
+
+const getHasModules = (modules: any[]): boolean => (modules?.length || 0) === 0;

package/admin/src/components/EditView/Template/TemplateSelect/use-template-modules.ts

@@ -1,41 +1,41 @@
-import { useFetchClient } from '@strapi/helper-plugin';
-
-import { Template, useGetTemplates } from '../../../../api/template';
-import { sanitizeModules } from '../../../../utils/sanitizeModules';
-import getRequestUrl from '../../../../utils/getRequestUrl';
-import { useDefaultPlatformFromLocalStorage } from '../../../../utils/hooks/useDefaultPlatformFromLocalStorage';
-
-type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
-
-export const useTemplateModules = (onChange: OnChangeFormType) => {
-	const { selectedPlatform } = useDefaultPlatformFromLocalStorage();
-	const { data: templates } = useGetTemplates({ platformId: selectedPlatform?.id });
-	const fetchClient = useFetchClient();
-
-	return {
-		findTemplate,
-		templates,
-		replaceContentTypeModules: (id: number) => replaceContentTypeModules(id, fetchClient, onChange)
-	};
-};
-
-const findTemplate = (templates?: Template[], selectedTemplateId?: string | number) =>
-	templates?.find((template) => template.id === Number(selectedTemplateId));
-
-const sanatizeContentTypeModules = (onChange: OnChangeFormType, modules: Record<string, any>[]) => {
-	const sanitizedModules = sanitizeModules(modules);
-
-	return onChange({
-		target: {
-			name: 'modules',
-			value: sanitizedModules
-		},
-		shouldSetInitialValue: true
-	});
-};
-
-const replaceContentTypeModules = async (id: number, fetchClient: any, onChange: OnChangeFormType) => {
-	const { get } = fetchClient;
-	const result = await get(getRequestUrl(`/template/${id}`));
-	return sanatizeContentTypeModules(onChange, result.data.modules);
-};
+import { useFetchClient } from '@strapi/helper-plugin';
+
+import { Template, useGetTemplates } from '../../../../api/template';
+import { sanitizeModules } from '../../../../utils/sanitizeModules';
+import getRequestUrl from '../../../../utils/getRequestUrl';
+import { useDefaultPlatformFromLocalStorage } from '../../../../utils/hooks/useDefaultPlatformFromLocalStorage';
+
+type OnChangeFormType = (props: { target: Record<string, any>; shouldSetInitialValue: boolean }) => void;
+
+export const useTemplateModules = (onChange: OnChangeFormType) => {
+	const { selectedPlatform } = useDefaultPlatformFromLocalStorage();
+	const { data: templates } = useGetTemplates({ platformId: selectedPlatform?.id });
+	const fetchClient = useFetchClient();
+
+	return {
+		findTemplate,
+		templates,
+		replaceContentTypeModules: (id: number) => replaceContentTypeModules(id, fetchClient, onChange)
+	};
+};
+
+const findTemplate = (templates?: Template[], selectedTemplateId?: string | number) =>
+	templates?.find((template) => template.id === Number(selectedTemplateId));
+
+const sanatizeContentTypeModules = (onChange: OnChangeFormType, modules: Record<string, any>[]) => {
+	const sanitizedModules = sanitizeModules(modules);
+
+	return onChange({
+		target: {
+			name: 'modules',
+			value: sanitizedModules
+		},
+		shouldSetInitialValue: true
+	});
+};
+
+const replaceContentTypeModules = async (id: number, fetchClient: any, onChange: OnChangeFormType) => {
+	const { get } = fetchClient;
+	const result = await get(getRequestUrl(`/template/${id}`));
+	return sanatizeContentTypeModules(onChange, result.data.modules);
+};

package/admin/src/components/EditView/index.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-import { PAGE_UID } from '../../../../shared/utils/constants';
-import { PageSettings } from './PageSettings';
-import { CollectionTypeSettings } from './CollectionTypeSettings';
-import { useHasPageRelation } from '../../api/has-page-relation';
-import { useHasPlatformRelation } from '../../api/has-platform-relation';
-
-export const EditView = () => {
-	const { layout } = useCMEditViewDataManager() as any;
-
-	const isPageCollectionType = layout.uid === PAGE_UID;
-	const isCollectionType = layout.kind === 'collectionType';
-
-	const { data: hasPageRelation, isLoading } = useHasPageRelation({
-		uid: layout.uid
-	});
-
-	const { data: hasPlatformRelation, isLoading: isLoadingPlatformRelation } = useHasPlatformRelation({
-		uid: layout.uid
-	});
-
-	if (isPageCollectionType) {
-		return <PageSettings />;
-	}
-
-	// Show collectiontype settings if it's not a page and it has a page relation OR a platform relation
-	if (isCollectionType && !isLoading && !isLoadingPlatformRelation && (hasPageRelation || hasPlatformRelation)) {
-		return <CollectionTypeSettings onlyPlatform={!hasPageRelation && hasPlatformRelation} />;
-	}
-
-	return null;
-};
+import React from 'react';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import { PAGE_UID } from '../../../../shared/utils/constants';
+import { PageSettings } from './PageSettings';
+import { CollectionTypeSettings } from './CollectionTypeSettings';
+import { useHasPageRelation } from '../../api/has-page-relation';
+import { useHasPlatformRelation } from '../../api/has-platform-relation';
+
+export const EditView = () => {
+	const { layout } = useCMEditViewDataManager() as any;
+
+	const isPageCollectionType = layout.uid === PAGE_UID;
+	const isCollectionType = layout.kind === 'collectionType';
+
+	const { data: hasPageRelation, isLoading } = useHasPageRelation({
+		uid: layout.uid
+	});
+
+	const { data: hasPlatformRelation, isLoading: isLoadingPlatformRelation } = useHasPlatformRelation({
+		uid: layout.uid
+	});
+
+	if (isPageCollectionType) {
+		return <PageSettings />;
+	}
+
+	// Show collectiontype settings if it's not a page and it has a page relation OR a platform relation
+	if (isCollectionType && !isLoading && !isLoadingPlatformRelation && (hasPageRelation || hasPlatformRelation)) {
+		return <CollectionTypeSettings onlyPlatform={!hasPageRelation && hasPlatformRelation} />;
+	}
+
+	return null;
+};

package/admin/src/components/EditView/page-type-select.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
-
-import { PageType } from '../../api/platform-page-types';
-import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
-
-interface Props {
-	onChange: (pageTypeId: string) => void;
-	selectedPageType?: PageType | null;
-	pageTypes?: PageType[];
-	disabled?: boolean;
-}
-
-export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType, disabled }: Props) => {
-	return (
-		<SingleSelect
-			label="Page type"
-			placeholder="Choose a page type"
-			value={selectedPageType?.id || PAGE_TYPE_PAGE}
-			onChange={onChange}
-			disabled={Boolean(disabled)}
-		>
-			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
-			{pageTypes?.map((pageType: PageType) => (
-				<SingleSelectOption key={pageType?.uid} value={pageType?.id}>
-					{pageType?.title}
-				</SingleSelectOption>
-			))}
-		</SingleSelect>
-	);
-};
+import React from 'react';
+
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+
+import { PageType } from '../../api/platform-page-types';
+import { PAGE_TYPE_PAGE } from '../../../../shared/utils/constants';
+
+interface Props {
+	onChange: (pageTypeId: string) => void;
+	selectedPageType?: PageType | null;
+	pageTypes?: PageType[];
+	disabled?: boolean;
+}
+
+export const PageTypeSelect = ({ onChange, pageTypes, selectedPageType, disabled }: Props) => {
+	return (
+		<SingleSelect
+			label="Page type"
+			placeholder="Choose a page type"
+			value={selectedPageType?.id || PAGE_TYPE_PAGE}
+			onChange={onChange}
+			disabled={Boolean(disabled)}
+		>
+			<SingleSelectOption value={PAGE_TYPE_PAGE}>Page</SingleSelectOption>
+			{pageTypes?.map((pageType: PageType) => (
+				<SingleSelectOption key={pageType?.uid} value={pageType?.id}>
+					{pageType?.title}
+				</SingleSelectOption>
+			))}
+		</SingleSelect>
+	);
+};

package/admin/src/components/EditView/wrapper.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import { Flex, Box, Divider, Typography } from '@strapi/design-system';
-
-interface Props {
-	title?: string;
-	children: React.ReactNode;
-	flexProps?: Record<string, any>;
-}
-
-export const Wrapper = (props: Props) => {
-	return (
-		<Flex
-			as="aside"
-			direction="column"
-			background="neutral0"
-			borderColor="neutral150"
-			hasRadius={true}
-			paddingTop={6}
-			paddingBottom={4}
-			paddingRight={4}
-			paddingLeft={4}
-			shadow="tableShadow"
-			alignItems="left"
-			{...props.flexProps}
-		>
-			{props.title && (
-				<>
-					<Typography variant="sigma" textColor="neutral600" id="additional-information">
-						{props.title}
-					</Typography>
-
-					<Box paddingTop={2} paddingBottom={4}>
-						<Divider />
-					</Box>
-				</>
-			)}
-
-			{props.children}
-		</Flex>
-	);
-};
+import React from 'react';
+import { Flex, Box, Divider, Typography } from '@strapi/design-system';
+
+interface Props {
+	title?: string;
+	children: React.ReactNode;
+	flexProps?: Record<string, any>;
+}
+
+export const Wrapper = (props: Props) => {
+	return (
+		<Flex
+			as="aside"
+			direction="column"
+			background="neutral0"
+			borderColor="neutral150"
+			hasRadius={true}
+			paddingTop={6}
+			paddingBottom={4}
+			paddingRight={4}
+			paddingLeft={4}
+			shadow="tableShadow"
+			alignItems="left"
+			{...props.flexProps}
+		>
+			{props.title && (
+				<>
+					<Typography variant="sigma" textColor="neutral600" id="additional-information">
+						{props.title}
+					</Typography>
+
+					<Box paddingTop={2} paddingBottom={4}>
+						<Divider />
+					</Box>
+				</>
+			)}
+
+			{props.children}
+		</Flex>
+	);
+};

package/admin/src/components/GlobalPlatformSelect/index.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import PlatformFilter from '../PageFilters/PlatformFilter';
-import { Platform, useGetPlatforms } from '../../api/platform';
-import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
-
-import S from './styles';
-
-export interface IGlobalPlatformSelectProps {
-	small?: boolean;
-}
-
-const GlobalPlatformSelect = ({ small }: IGlobalPlatformSelectProps) => {
-	const { pathname } = useLocation();
-	const { push } = useHistory();
-
-	const { data: platforms, isLoading } = useGetPlatforms({});
-	const { selectedPlatform, setSelectedPlatform } = useDefaultPlatformFromLocalStorage();
-
-	const handlePlatformChange = (platform: Platform) => {
-		setSelectedPlatform(platform);
-
-		if (typeof window !== 'undefined' && pathname.split('/').filter(Boolean).length > 3) {
-			push('/');
-		}
-	};
-
-	if (isLoading || (platforms || [])?.length < 2) {
-		return null;
-	}
-
-	return (
-		<S.Wrapper small={small}>
-			<PlatformFilter platforms={platforms} onChange={handlePlatformChange} selectedPlatform={selectedPlatform} />
-		</S.Wrapper>
-	);
-};
-
-export { GlobalPlatformSelect };
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import PlatformFilter from '../PageFilters/PlatformFilter';
+import { Platform, useGetPlatforms } from '../../api/platform';
+import { useDefaultPlatformFromLocalStorage } from '../../utils/hooks/useDefaultPlatformFromLocalStorage';
+
+import S from './styles';
+
+export interface IGlobalPlatformSelectProps {
+	small?: boolean;
+}
+
+const GlobalPlatformSelect = ({ small }: IGlobalPlatformSelectProps) => {
+	const { pathname } = useLocation();
+	const { push } = useHistory();
+
+	const { data: platforms, isLoading } = useGetPlatforms({});
+	const { selectedPlatform, setSelectedPlatform } = useDefaultPlatformFromLocalStorage();
+
+	const handlePlatformChange = (platform: Platform) => {
+		setSelectedPlatform(platform);
+
+		if (typeof window !== 'undefined' && pathname.split('/').filter(Boolean).length > 3) {
+			push('/');
+		}
+	};
+
+	if (isLoading || (platforms || [])?.length < 2) {
+		return null;
+	}
+
+	return (
+		<S.Wrapper small={small}>
+			<PlatformFilter platforms={platforms} onChange={handlePlatformChange} selectedPlatform={selectedPlatform} />
+		</S.Wrapper>
+	);
+};
+
+export { GlobalPlatformSelect };