Add LinkDestination abstraction

Avoid repetition to reduce likelihood of bugs.
WordPress · Sep 16, 2021 · d67db6b · d67db6b
1 parent 79eb02c
commit d67db6b
Showing 1 changed file with 41 additions and 34 deletions.
diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js
@@ -21,6 +21,33 @@ const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const LINK_DESTINATION_CUSTOM = 'custom';
 
+function LinkDestination( {
+	children,
+	currentOption,
+	label,
+	option,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={
+				currentOption !== option && styles.unselectedOptionIcon
+			}
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
 function ImageLinkDestinationsScreen( props ) {
 	const navigation = useNavigation();
 	const route = useRoute();
@@ -71,63 +98,43 @@ function ImageLinkDestinationsScreen( props ) {
 				</BottomSheet.NavBar.Heading>
 			</BottomSheet.NavBar>
 			<PanelBody>
-				<BottomSheet.Cell
-					icon={ check }
-					iconStyle={
-						linkDestination !== LINK_DESTINATION_NONE &&
-						styles.unselectedOptionIcon
-					}
+				<LinkDestination
+					currentOption={ linkDestination }
+					option={ LINK_DESTINATION_NONE }
 					label={ __( 'None' ) }
-					leftAlign
 					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-					separatorType="leftMargin"
 				/>
-				<BottomSheet.Cell
-					icon={ check }
-					iconStyle={
-						linkDestination !== LINK_DESTINATION_MEDIA &&
-						styles.unselectedOptionIcon
-					}
+				<LinkDestination
+					currentOption={ linkDestination }
+					option={ LINK_DESTINATION_MEDIA }
 					label={ __( 'Media File' ) }
-					leftAlign
 					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-					separatorType="leftMargin"
 				/>
 				{ !! attachmentPageUrl && (
-					<BottomSheet.Cell
-						icon={ check }
-						iconStyle={
-							linkDestination !== LINK_DESTINATION_ATTACHMENT &&
-							styles.unselectedOptionIcon
-						}
+					<LinkDestination
+						currentOption={ linkDestination }
+						option={ LINK_DESTINATION_ATTACHMENT }
 						label={ __( 'Attachment Page' ) }
-						leftAlign
 						onPress={ setLinkDestination(
 							LINK_DESTINATION_ATTACHMENT
 						) }
-						separatorType="leftMargin"
 					/>
 				) }
-				<BottomSheet.Cell
-					icon={ check }
-					iconStyle={
-						linkDestination !== LINK_DESTINATION_CUSTOM &&
-						styles.unselectedOptionIcon
-					}
+				<LinkDestination
+					currentOption={ linkDestination }
+					option={ LINK_DESTINATION_CUSTOM }
 					label={ __( 'Custom URL' ) }
-					leftAlign
+					onPress={ goToLinkPicker }
 					// since this is not actually editable, we treat value as a placeholder
 					value={
 						customUrlSet ? inputValue : __( 'Search or type URL' )
 					}
 					valueStyle={
 						customUrlSet ? undefined : styles.placeholderTextColor
 					}
-					onPress={ goToLinkPicker }
-					separatorType="leftMargin"
 				>
 					<Icon icon={ chevronRight }></Icon>
-				</BottomSheet.Cell>
+				</LinkDestination>
 			</PanelBody>
 		</>
 	);