@elementor/editor-controls 0.9.0 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,7 +40,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.0",
+    "@elementor/editor-props": "0.9.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.3",
     "@elementor/icons": "1.31.0",

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -6,7 +6,7 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
+import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -20,8 +20,15 @@ import { BackgroundImageOverlayAttachment } from './background-image-overlay/bac
 import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
 import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
 import { BackgroundImageOverlaySize } from './background-image-overlay/background-image-overlay-size';
+import { type BackgroundImageOverlay } from './types';
+import { useBackgroundTabsHistory } from './use-background-tabs-history';
 
-const initialBackgroundOverlay = ( backgroundPlaceholderImage: string ): BackgroundOverlayItemPropValue => ( {
+export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = {
+	$$type: 'background-color-overlay',
+	value: '#00000033',
+};
+
+export const getInitialBackgroundOverlay = (): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
 	value: {
 		image: {
@@ -32,7 +39,7 @@ const initialBackgroundOverlay = ( backgroundPlaceholderImage: string ): Backgro
 					value: {
 						url: {
 							$$type: 'url',
-							value: backgroundPlaceholderImage,
+							value: env.background_placeholder_image,
 						},
 						id: null,
 					},
@@ -53,31 +60,6 @@ const backgroundResolutionOptions = [
 	{ label: __( 'Full', 'elementor' ), value: 'full' },
 ];
 
-type OverlayType = 'image' | 'color';
-
-type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
-
-type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
-
-type BackgroundImageOverlay = {
-	$$type: 'background-image-overlay';
-	value: {
-		image: {
-			$$type: 'image';
-			value: {
-				src: {
-					$$type: 'image-src';
-					value: ImageSrcAttachment | ImageSrcUrl;
-				};
-				size: {
-					$$type: 'string';
-					value: 'thumbnail' | 'medium' | 'large' | 'full';
-				};
-			};
-		};
-	};
-};
-
 export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
@@ -91,24 +73,26 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: initialBackgroundOverlay( env.background_placeholder_image ),
+					initialValues: getInitialBackgroundOverlay(),
 				} }
 			/>
 		</PropProvider>
 	);
 } );
 
-const ItemContent = ( { bind, value }: { bind: PropKey; value: BackgroundOverlayItemPropValue } ) => {
+export const ItemContent = ( { bind }: { bind: PropKey } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<Content value={ value } />
+			<Content />
 		</PropKeyProvider>
 	);
 };
 
-const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const activeTab = deriveOverlayType( value.$$type );
-	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( activeTab );
+const Content = () => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
+		image: getInitialBackgroundOverlay().value,
+		color: initialBackgroundColorOverlay.value,
+	} );
 
 	return (
 		<Box sx={ { width: '100%' } }>
@@ -207,18 +191,6 @@ const ImageOverlayContent = () => {
 	);
 };
 
-const deriveOverlayType = ( type: string ): OverlayType => {
-	if ( type === 'background-color-overlay' ) {
-		return 'color';
-	}
-
-	if ( type === 'background-image-overlay' ) {
-		return 'image';
-	}
-
-	throw new Error( `Invalid overlay type: ${ type }` );
-};
-
 const useImage = ( image: BackgroundImageOverlay ) => {
 	let imageTitle,
 		imageUrl: string | null = null;

package/src/controls/background-control/background-overlay/types.ts

@@ -0,0 +1,22 @@
+type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
+
+type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
+
+export type BackgroundImageOverlay = {
+	$$type: 'background-image-overlay';
+	value: {
+		image: {
+			$$type: 'image';
+			value: {
+				src: {
+					$$type: 'image-src';
+					value: ImageSrcAttachment | ImageSrcUrl;
+				};
+				size: {
+					$$type: 'string';
+					value: 'thumbnail' | 'medium' | 'large' | 'full';
+				};
+			};
+		};
+	};
+};

package/src/controls/background-control/background-overlay/use-background-tabs-history.ts

@@ -0,0 +1,62 @@
+import { useRef } from 'react';
+import {
+	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayItemPropValue,
+} from '@elementor/editor-props';
+import { useTabs } from '@elementor/ui';
+
+import { useBoundProp } from '../../../bound-prop-context';
+import { type BackgroundImageOverlay } from './types';
+
+type OverlayType = 'image' | 'color';
+
+type InitialBackgroundValues = {
+	color: BackgroundOverlayItemPropValue[ 'value' ];
+	image: BackgroundImageOverlay[ 'value' ];
+};
+
+export const useBackgroundTabsHistory = ( {
+	color: initialBackgroundColorOverlay,
+	image: initialBackgroundImageOverlay,
+}: InitialBackgroundValues ) => {
+	const { value: imageValue, setValue: setImageValue } = useBoundProp( backgroundImageOverlayPropTypeUtil );
+	const { value: colorValue, setValue: setColorValue } = useBoundProp( backgroundColorOverlayPropTypeUtil );
+
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( colorValue ? 'color' : 'image' );
+
+	const valuesHistory = useRef< InitialBackgroundValues >( {
+		image: initialBackgroundImageOverlay,
+		color: initialBackgroundColorOverlay,
+	} );
+
+	const saveToHistory = ( key: keyof InitialBackgroundValues, value: BackgroundOverlayItemPropValue[ 'value' ] ) => {
+		if ( value ) {
+			valuesHistory.current[ key ] = value;
+		}
+	};
+
+	const onTabChange = ( e: React.SyntheticEvent, tabName: OverlayType ) => {
+		switch ( tabName ) {
+			case 'image':
+				setImageValue( valuesHistory.current.image );
+
+				saveToHistory( 'color', colorValue );
+
+				break;
+
+			case 'color':
+				setColorValue( valuesHistory.current.color );
+
+				saveToHistory( 'image', imageValue );
+		}
+
+		return getTabsProps().onChange( e, tabName );
+	};
+
+	return {
+		getTabProps,
+		getTabPanelProps,
+		getTabsProps: () => ( { ...getTabsProps(), onChange: onTabChange } ),
+	};
+};