[RNMobile] Move custom indicator to be rendered above the colors (#28698

)
WordPress · Feb 3, 2021 · b13f304 · b13f304
1 parent 35d92db
commit b13f304
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 33 deletions.
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
@@ -208,38 +208,6 @@ function ColorPalette( {
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }
 		>
-			{ colors.map( ( color ) => {
-				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
-				return (
-					<TouchableWithoutFeedback
-						onPress={ () => onColorPress( color ) }
-						key={ `${ color }-${ isSelected( color ) }` }
-						accessibilityRole={ 'button' }
-						accessibilityState={ { selected: isSelected( color ) } }
-						accessibilityHint={ color }
-					>
-						<Animated.View
-							style={ {
-								transform: [
-									{
-										scale: scaleValue,
-									},
-								],
-							} }
-						>
-							<ColorIndicator
-								color={ color }
-								isSelected={ isSelected( color ) }
-								opacity={ opacity }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-						</Animated.View>
-					</TouchableWithoutFeedback>
-				);
-			} ) }
 			{ shouldShowCustomIndicator && (
 				<View
 					style={ customIndicatorWrapperStyle }
@@ -275,6 +243,41 @@ function ColorPalette( {
 					</TouchableWithoutFeedback>
 				</View>
 			) }
+			{ colors.map( ( color ) => {
+				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
+				return (
+					<View key={ `${ color }-${ isSelected( color ) }` }>
+						<TouchableWithoutFeedback
+							onPress={ () => onColorPress( color ) }
+							accessibilityRole={ 'button' }
+							accessibilityState={ {
+								selected: isSelected( color ),
+							} }
+							accessibilityHint={ color }
+						>
+							<Animated.View
+								style={ {
+									transform: [
+										{
+											scale: scaleValue,
+										},
+									],
+								} }
+							>
+								<ColorIndicator
+									color={ color }
+									isSelected={ isSelected( color ) }
+									opacity={ opacity }
+									style={ [
+										styles.colorIndicator,
+										customColorIndicatorStyles,
+									] }
+								/>
+							</Animated.View>
+						</TouchableWithoutFeedback>
+					</View>
+				);
+			} ) }
 		</ScrollView>
 	);
 }

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