Fixes collor-palette scrolling issue

WordPress · May 6, 2021 · 4ddd1d9 · 4ddd1d9
1 parent 9de6fea
commit 4ddd1d9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 43 deletions.
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
@@ -7,7 +7,6 @@ import {
 	View,
 	Animated,
 	Easing,
-	Dimensions,
 	Platform,
 	Text,
 } from 'react-native';
@@ -26,9 +25,8 @@ import ColorIndicator from '../color-indicator';
 import { colorsUtils } from '../mobile/color-settings/utils';
 
 const ANIMATION_DURATION = 200;
+const SEGMENTED_CONTROL_ANIMATION_DURATION_DELAY = 200;
 
-let contentWidth = 0;
-let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
@@ -81,12 +79,17 @@ function ColorPalette( {
 	useEffect( () => {
 		setShouldShowCustomIndicator(
 			shouldShowCustomIndicatorOption &&
-				( ! isGradientSegment || isCustomGradientColor )
+				( ! isGradientSegment ||
+					( isGradientColor &&
+						activeColor &&
+						! ( colors && colors.includes( activeColor ) ) ) )
 		);
 	}, [
 		shouldShowCustomIndicatorOption,
 		isGradientSegment,
-		isCustomGradientColor,
+		activeColor,
+		colors,
+		isGradientColor,
 	] );
 
 	const accessibilityHint = isGradientSegment
@@ -95,14 +98,23 @@ function ColorPalette( {
 	const customText = __( 'Custom' );
 
 	useEffect( () => {
+		const delayedScroll = setTimeout( () => {
+			resetScrollPosition();
+		}, SEGMENTED_CONTROL_ANIMATION_DURATION_DELAY );
+		return () => {
+			clearTimeout( delayedScroll );
+		};
+	}, [ currentSegment ] );
+
+	function resetScrollPosition() {
 		if ( scrollViewRef.current ) {
 			if ( isSelectedCustom() ) {
 				scrollViewRef.current.scrollToEnd();
 			} else {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
 		}
-	}, [ currentSegment ] );
+	}
 
 	function isSelectedCustom() {
 		const isWithinColors =
@@ -148,53 +160,18 @@ function ColorPalette( {
 		outputRange: [ 1, 0.7, 1 ],
 	} );
 
-	function deselectCustomGradient() {
-		const { width } = Dimensions.get( 'window' );
-		const isVisible =
-			contentWidth - scrollPosition - customIndicatorWidth < width;
-
-		if ( isCustomGradientColor ) {
-			if ( ! isIOS ) {
-				// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.
-				// https://github.com/facebook/react-native/issues/27504
-				// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.
-				if (
-					isCustomGradientColor &&
-					isVisible &&
-					scrollViewRef.current
-				) {
-					scrollViewRef.current.scrollTo( {
-						x: scrollPosition - customIndicatorWidth,
-					} );
-				}
-			}
-		}
-	}
-
 	function onColorPress( color ) {
-		deselectCustomGradient();
 		performAnimation( color );
 		setColor( color );
 	}
 
-	function onContentSizeChange( width ) {
-		contentWidth = width;
-		if ( isSelectedCustom() && scrollViewRef.current ) {
-			scrollViewRef.current.scrollToEnd( { animated: ! isIOS } );
-		}
-	}
-
 	function onCustomIndicatorLayout( { nativeEvent } ) {
 		const { width } = nativeEvent.layout;
 		if ( width !== customIndicatorWidth ) {
 			customIndicatorWidth = width;
 		}
 	}
 
-	function onScroll( { nativeEvent } ) {
-		scrollPosition = nativeEvent.contentOffset.x;
-	}
-
 	const verticalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.verticalSeparator,
 		styles.verticalSeparatorDark
@@ -219,8 +196,7 @@ function ColorPalette( {
 			keyboardShouldPersistTaps="always"
 			disableScrollViewPanResponder
 			scrollEventThrottle={ 16 }
-			onScroll={ onScroll }
-			onContentSizeChange={ onContentSizeChange }
+			onContentSizeChange={ resetScrollPosition }
 			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }

diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss
@@ -1,4 +1,5 @@
 .contentContainer {
+	flex-grow: 1;
 	flex-direction: row;
 	padding: 0 $grid-unit-20;
 }