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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _native = require("@react-navigation/native");

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _blockEditor = require("@wordpress/block-editor");

var _compose = require("@wordpress/compose");

var _style = _interopRequireDefault(require("./style.scss"));

var _body = _interopRequireDefault(require("../../panel/body"));

var _bottomSheet = _interopRequireDefault(require("../bottom-sheet"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
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 = (0, _compose.usePreferredColorSchemeStyle)(_style.default.optionIcon, _style.default.optionIconDark);
  return (0, _element.createElement)(_bottomSheet.default.Cell, {
    icon: _icons.check,
    iconStyle: _reactNative.StyleSheet.flatten([optionIcon, !isSelected && _style.default.unselectedOptionIcon]),
    label: label,
    leftAlign: true,
    onPress: onPress,
    value: value,
    valueStyle: valueStyle,
    separatorType: "leftMargin"
  }, children);
}

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

  function goToLinkPicker() {
    navigation.navigate(_blockEditor.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(_blockEditor.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 (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_bottomSheet.default.NavBar, null, (0, _element.createElement)(_bottomSheet.default.NavBar.BackButton, {
    onPress: navigation.goBack
  }), (0, _element.createElement)(_bottomSheet.default.NavBar.Heading, null, (0, _i18n.__)('Link To'))), (0, _element.createElement)(_body.default, null, (0, _element.createElement)(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_NONE,
    label: (0, _i18n.__)('None'),
    onPress: setLinkDestination(LINK_DESTINATION_NONE)
  }), (0, _element.createElement)(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_MEDIA,
    label: (0, _i18n.__)('Media File'),
    onPress: setLinkDestination(LINK_DESTINATION_MEDIA)
  }), !!attachmentPageUrl && (0, _element.createElement)(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_ATTACHMENT,
    label: (0, _i18n.__)('Attachment Page'),
    onPress: setLinkDestination(LINK_DESTINATION_ATTACHMENT)
  }), (0, _element.createElement)(LinkDestination, {
    isSelected: linkDestination === LINK_DESTINATION_CUSTOM,
    label: (0, _i18n.__)('Custom URL'),
    onPress: goToLinkPicker,
    value: linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
    valueStyle: linkDestination === LINK_DESTINATION_CUSTOM ? undefined : _style.default.placeholderTextColor
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.chevronRight
  }))));
}

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