[RNMobile] Performance improvements in Cover related controls (#28235)

WordPress · Feb 2, 2021 · 728485d · 728485d
1 parent d89fe22
commit 728485d
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 92 deletions.
diff --git a/...ages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/...ages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js
@@ -7,6 +7,7 @@ import { useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { ColorControl, PanelBody } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,32 +17,32 @@ import { blockSettingsScreens } from '../block-settings';
 export default function PanelColorGradientSettings( { settings, title } ) {
 	const navigation = useNavigation();
 
-	return (
-		<PanelBody title={ title }>
-			{ settings.map(
-				( {
-					onColorChange,
-					colorValue,
-					onGradientChange,
-					gradientValue,
-					label,
-				} ) => (
-					<ColorControl
-						onPress={ () => {
-							navigation.navigate( blockSettingsScreens.color, {
-								onColorChange,
-								colorValue: gradientValue || colorValue,
-								gradientValue,
-								onGradientChange,
-								label,
-							} );
-						} }
-						key={ `color-setting-${ label }` }
-						label={ label }
-						color={ gradientValue || colorValue }
-					/>
-				)
-			) }
-		</PanelBody>
-	);
+	const mappedSettings = useMemo( () => {
+		return settings.map(
+			( {
+				onColorChange,
+				colorValue,
+				onGradientChange,
+				gradientValue,
+				label,
+			} ) => (
+				<ColorControl
+					onPress={ () => {
+						navigation.navigate( blockSettingsScreens.color, {
+							onColorChange,
+							colorValue: gradientValue || colorValue,
+							gradientValue,
+							onGradientChange,
+							label,
+						} );
+					} }
+					key={ `color-setting-${ label }` }
+					label={ label }
+					color={ gradientValue || colorValue }
+				/>
+			)
+		);
+	}, [ settings ] );
+
+	return <PanelBody title={ title }>{ mappedSettings }</PanelBody>;
 }
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -26,7 +26,7 @@ import {
 	PanelBody,
 	RangeControl,
 	UnitControl,
-	BottomSheet,
+	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
 	Gradient,
@@ -92,6 +92,7 @@ const Cover = ( {
 	setAttributes,
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
+	isSelected,
 	selectBlock,
 	blockWidth,
 } ) => {
@@ -173,11 +174,14 @@ const Cover = ( {
 		onSelect( media );
 	};
 
-	const onHeightChange = useCallback( ( value ) => {
-		if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
-			setAttributes( { minHeight: value } );
-		}
-	}, [] );
+	const onHeightChange = useCallback(
+		( value ) => {
+			if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
+				setAttributes( { minHeight: value } );
+			}
+		},
+		[ minHeight ]
+	);
 
 	const onOpacityChange = useCallback( ( value ) => {
 		setAttributes( { dimRatio: value } );
@@ -206,7 +210,7 @@ const Cover = ( {
 	const onClearMedia = useCallback( () => {
 		setAttributes( { id: undefined, url: undefined } );
 		closeSettingsBottomSheet();
-	}, [] );
+	}, [ closeSettingsBottomSheet ] );
 
 	function setColor( color ) {
 		setAttributes( {
@@ -281,15 +285,15 @@ const Cover = ( {
 		</TouchableWithoutFeedback>
 	);
 
-	const onChangeUnit = ( nextUnit ) => {
+	const onChangeUnit = useCallback( ( nextUnit ) => {
 		setAttributes( {
 			minHeightUnit: nextUnit,
 			minHeight:
 				nextUnit === 'px'
 					? Math.max( CONTAINER_HEIGHT, COVER_MIN_HEIGHT )
 					: CONTAINER_HEIGHT,
 		} );
-	};
+	}, [] );
 
 	const onBottomSheetClosed = useCallback( () => {
 		InteractionManager.runAfterInteractions( () => {
@@ -300,7 +304,10 @@ const Cover = ( {
 	const controls = (
 		<InspectorControls>
 			<OverlayColorSettings
-				attributes={ attributes }
+				overlayColor={ attributes.overlayColor }
+				customOverlayColor={ attributes.customOverlayColor }
+				gradient={ attributes.gradient }
+				customGradient={ attributes.customGradient }
 				setAttributes={ setAttributes }
 			/>
 			{ url ? (
@@ -330,10 +337,9 @@ const Cover = ( {
 					key={ minHeightUnit }
 				/>
 			</PanelBody>
-
 			{ url ? (
 				<PanelBody title={ __( 'Media' ) }>
-					<BottomSheet.Cell
+					<TextControl
 						leftAlign
 						label={ __( 'Clear Media' ) }
 						labelStyle={ styles.clearMediaButton }
@@ -513,7 +519,7 @@ const Cover = ( {
 
 	return (
 		<View style={ styles.backgroundContainer }>
-			{ controls }
+			{ isSelected && controls }
 
 			{ isImage &&
 				url &&

diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js
@@ -14,19 +14,19 @@ import {
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
-function OverlayColorSettings( { attributes, setAttributes } ) {
+function OverlayColorSettings( {
+	overlayColor,
+	customOverlayColor,
+	gradient,
+	customGradient,
+	setAttributes,
+} ) {
 	const EMPTY_ARRAY = [];
 	const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
 	const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY;
 
-	const {
-		overlayColor,
-		customOverlayColor,
-		gradient,
-		customGradient,
-	} = attributes;
-
 	const gradientValue =
 		customGradient || getGradientValueBySlug( gradients, gradient );
 
@@ -36,56 +36,60 @@ function OverlayColorSettings( { attributes, setAttributes } ) {
 		customOverlayColor
 	).color;
 
-	const setOverlayAttribute = ( attributeName, value ) => {
-		setAttributes( {
-			// clear all related attributes (only one should be set)
-			overlayColor: undefined,
-			customOverlayColor: undefined,
-			gradient: undefined,
-			customGradient: undefined,
-			[ attributeName ]: value,
-		} );
-	};
+	const settings = useMemo( () => {
+		const setOverlayAttribute = ( attributeName, value ) => {
+			setAttributes( {
+				// clear all related attributes (only one should be set)
+				overlayColor: undefined,
+				customOverlayColor: undefined,
+				gradient: undefined,
+				customGradient: undefined,
+				[ attributeName ]: value,
+			} );
+		};
+
+		const onColorChange = ( value ) => {
+			// do nothing for falsy values
+			if ( ! value ) {
+				return;
+			}
+			const colorObject = getColorObjectByColorValue( colors, value );
+			if ( colorObject?.slug ) {
+				setOverlayAttribute( 'overlayColor', colorObject.slug );
+			} else {
+				setOverlayAttribute( 'customOverlayColor', value );
+			}
+		};
 
-	const onColorChange = ( value ) => {
-		// do nothing for falsy values
-		if ( ! value ) {
-			return;
-		}
-		const colorObject = getColorObjectByColorValue( colors, value );
-		if ( colorObject?.slug ) {
-			setOverlayAttribute( 'overlayColor', colorObject.slug );
-		} else {
-			setOverlayAttribute( 'customOverlayColor', value );
-		}
-	};
+		const onGradientChange = ( value ) => {
+			// do nothing for falsy values
+			if ( ! value ) {
+				return;
+			}
+			const slug = getGradientSlugByValue( gradients, value );
+			if ( slug ) {
+				setOverlayAttribute( 'gradient', slug );
+			} else {
+				setOverlayAttribute( 'customGradient', value );
+			}
+		};
 
-	const onGradientChange = ( value ) => {
-		// do nothing for falsy values
-		if ( ! value ) {
-			return;
-		}
-		const slug = getGradientSlugByValue( gradients, value );
-		if ( slug ) {
-			setOverlayAttribute( 'gradient', slug );
-		} else {
-			setOverlayAttribute( 'customGradient', value );
-		}
-	};
+		return [
+			{
+				label: __( 'Color' ),
+				onColorChange,
+				colorValue,
+				gradientValue,
+				onGradientChange,
+			},
+		];
+	}, [ colorValue, gradientValue, colors, gradients ] );
 
 	return (
 		<PanelColorGradientSettings
 			title={ __( 'Overlay' ) }
 			initialOpen={ false }
-			settings={ [
-				{
-					label: __( 'Color' ),
-					onColorChange,
-					colorValue,
-					gradientValue,
-					onGradientChange,
-				},
-			] }
+			settings={ settings }
 		/>
 	);
 }