Indicate selected link to option with check mark icon

WordPress · Sep 15, 2021 · caa5aeb · caa5aeb
1 parent 3fc0c3c
commit caa5aeb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -449,6 +449,7 @@ export class ImageEdit extends Component {
 					// passing it here.
 					navigation.navigate( blockSettingsScreens.imageOptions, {
 						inputValue,
+						linkDestination: this.props.attributes.linkDestination,
 						setAttributes: this.setMappedAttributes,
 						imageUrl: image.url,
 						attachmentPageUrl: image.link,

diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js
@@ -7,7 +7,7 @@ import { useNavigation, useRoute } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, check, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,23 +20,29 @@ import BottomSheet from '../bottom-sheet';
 const LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
 
 // TODO(David): Rename this component, file, and screen to better communicate
 // intent
 function ImageOptionsScreen( props ) {
 	const navigation = useNavigation();
 	const route = useRoute();
 	const { url = '' } = props;
-	const { inputValue = url, imageUrl, attachmentPageUrl, setAttributes } =
-		route.params || {};
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		setAttributes,
+		linkDestination,
+	} = route.params || {};
 
 	function goToLinkPicker() {
 		navigation.navigate( 'linkPicker', { inputValue } );
 	}
 
-	const setLinkDestination = ( linkDestination ) => () => {
+	const setLinkDestination = ( newLinkDestination ) => () => {
 		let newUrl;
-		switch ( linkDestination ) {
+		switch ( newLinkDestination ) {
 			case LINK_DESTINATION_MEDIA:
 				newUrl = imageUrl;
 				break;
@@ -50,13 +56,13 @@ function ImageOptionsScreen( props ) {
 		// TODO(David): Most of the logic for updatting the attributes is contained
 		// within LinkSettings. We may need to create an abstracted hook.
 		// `setAttributes` is likely not enough.
-		setAttributes( { url: newUrl, linkDestination } );
+		setAttributes( { url: newUrl, linkDestination: newLinkDestination } );
 		navigation.goBack();
 	};
 
-	// TODO(David): Need to have a "active" status indicator (e.g. check mark) to
-	// designate which option is selected. Could we compare the URLs to determine
-	// which is active?
+	// TODO(David): Non-selected items do not display an icon, which causes
+	// misalignment with the selected item. We need to update Cell to support the
+	// use case of retaining space on the left side for a conditional icon.
 	return (
 		<>
 			<BottomSheet.NavBar>
@@ -67,29 +73,43 @@ function ImageOptionsScreen( props ) {
 			</BottomSheet.NavBar>
 			<PanelBody>
 				<Cell
+					icon={
+						linkDestination === LINK_DESTINATION_NONE
+							? check
+							: undefined
+					}
 					label={ __( 'None' ) }
 					leftAlign
 					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</Cell>
+				/>
 				<Cell
+					icon={
+						linkDestination === LINK_DESTINATION_MEDIA
+							? check
+							: undefined
+					}
 					label={ __( 'Media File' ) }
 					leftAlign
 					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</Cell>
+				/>
 				<Cell
+					icon={
+						linkDestination === LINK_DESTINATION_ATTACHMENT
+							? check
+							: undefined
+					}
 					label={ __( 'Attachment Page' ) }
 					leftAlign
 					onPress={ setLinkDestination(
 						LINK_DESTINATION_ATTACHMENT
 					) }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</Cell>
+				/>
 				<Cell
+					icon={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? check
+							: undefined
+					}
 					label={ __( 'Custom URL' ) }
 					leftAlign
 					// since this is not actually editable, we treat value as a placeholder