@wordpress/components/build-module/mobile/link-settings/image-link-destinations-screen.native.js

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { useNavigation, useRoute } from '@react-navigation/native';
import { StyleSheet } from 'react-native';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { Icon, check, chevronRight } from '@wordpress/icons';
import { blockSettingsScreens } from '@wordpress/block-editor';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import styles from './style.scss';
import PanelBody from '../../panel/body';
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';

function LinkDestination(_ref) {
  let {
    children,
    isSelected,
    label,
    onPress,
    value,
    valueStyle
  } = _ref;
  const optionIcon = usePreferredColorSchemeStyle(styles.optionIcon, styles.optionIconDark);
  return createElement(BottomSheet.Cell, {
    icon: check,
    iconStyle: StyleSheet.flatten([optionIcon, !isSelected && styles.unselectedOptionIcon]),
    label: label,
    leftAlign: true,
    onPress: onPress,
    value: value,
    valueStyle: valueStyle,
    separatorType: "leftMargin"
  }, children);
}

function ImageLinkDestinationsScreen(props) {
  const navigation = useNavigation();
  const route = useRoute();
  const {
    url = ''
  } = props;
  const {
    inputValue = url,
    imageUrl,
    attachmentPageUrl,
    linkDestination
  } = route.params || {};

  function goToLinkPicker() {
    navigation.navigate(blockSettingsScreens.linkPicker, {
      inputValue: linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : ''
    });
  }

  const setLinkDestination = newLinkDestination => () => {
    let newUrl;

    switch (newLinkDestination) {
      case LINK_DESTINATION_MEDIA:
        newUrl = imageUrl;
        break;

      case LINK_DESTINATION_ATTACHMENT:
        newUrl = attachmentPageUrl;
        break;

      default:
        newUrl = '';
        break;
    }

    navigation.navigate(blockSettingsScreens.settings, {
      // The `inputValue` name is reused from LinkPicker, as it helps avoid
      // bugs from stale values remaining in the React Navigation route
      // parameters.
      inputValue: newUrl,
      // Clear link text value that may be set from LinkPicker.
      text: ''
    });
  };

  return createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
    onPress: navigation.goBack
  }), createElement(BottomSheet.NavBar.Heading, null, __('Link To'))), createElement(PanelBody, null, createElement(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_NONE,
    label: __('None'),
    onPress: setLinkDestination(LINK_DESTINATION_NONE)
  }), createElement(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_MEDIA,
    label: __('Media File'),
    onPress: setLinkDestination(LINK_DESTINATION_MEDIA)
  }), !!attachmentPageUrl && createElement(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_ATTACHMENT,
    label: __('Attachment Page'),
    onPress: setLinkDestination(LINK_DESTINATION_ATTACHMENT)
  }), createElement(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_CUSTOM,
    label: __('Custom URL'),
    onPress: goToLinkPicker,
    value: linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
    valueStyle: linkDestination === LINK_DESTINATION_CUSTOM ? undefined : styles.placeholderTextColor
  }, createElement(Icon, {
    icon: chevronRight
  }))));
}

export default ImageLinkDestinationsScreen;
//# sourceMappingURL=image-link-destinations-screen.native.js.map