@wordpress/components/build-module/mobile/link-picker/index.native.js

UI components for WordPress.

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

/**
 * External dependencies
 */
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
/**
 * WordPress dependencies
 */

import { useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { BottomSheet, Icon } from '@wordpress/components';
import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
import { link, cancelCircleFilled } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import LinkPickerResults from './link-picker-results';
import NavBar from '../bottom-sheet/nav-bar';
import styles from './styles.scss'; // This creates a search suggestion for adding a url directly.

export const createDirectEntry = value => {
  var _getProtocol;

  let type = 'URL';
  const protocol = ((_getProtocol = getProtocol(value)) === null || _getProtocol === void 0 ? void 0 : _getProtocol.toLowerCase()) || '';

  if (protocol.includes('mailto')) {
    type = 'mailto';
  }

  if (protocol.includes('tel')) {
    type = 'tel';
  }

  if (value !== null && value !== void 0 && value.startsWith('#')) {
    type = 'internal';
  }

  return {
    isDirectEntry: true,
    title: value,
    url: type === 'URL' ? prependHTTP(value) : value,
    type
  };
};

const getURLFromClipboard = async () => {
  const text = await Clipboard.getString();
  return !!text && isURL(text) ? text : '';
};

export const LinkPicker = _ref => {
  let {
    value: initialValue,
    onLinkPicked,
    onCancel: cancel
  } = _ref;
  const [{
    value,
    clipboardUrl
  }, setValue] = useState({
    value: initialValue,
    clipboardUrl: ''
  });
  const directEntry = createDirectEntry(value); // The title of a direct entry is displayed as the raw input value, but if we
  // are replacing empty text, we want to use the generated url.

  const pickLink = _ref2 => {
    let {
      title,
      url,
      isDirectEntry
    } = _ref2;
    onLinkPicked({
      title: isDirectEntry ? url : title,
      url
    });
  };

  const onSubmit = () => {
    pickLink(directEntry);
  };

  const clear = () => {
    setValue({
      value: '',
      clipboardUrl
    });
  };

  const omniCellStyle = usePreferredColorSchemeStyle(styles.omniCell, styles.omniCellDark);
  const iconStyle = usePreferredColorSchemeStyle(styles.icon, styles.iconDark);
  useEffect(() => {
    getURLFromClipboard().then(url => setValue({
      value,
      clipboardUrl: url
    })).catch(() => setValue({
      value,
      clipboardUrl: ''
    })); // Disable reason: deferring this refactor to the native team.
    // see https://github.com/WordPress/gutenberg/pull/41166
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // TODO: Localize the accessibility label.
  // TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.

  return createElement(SafeAreaView, {
    style: styles.safeArea
  }, createElement(NavBar, null, createElement(NavBar.DismissButton, {
    onPress: cancel
  }), createElement(NavBar.Heading, null, __('Link to')), createElement(NavBar.ApplyButton, {
    onPress: onSubmit
  })), createElement(View, {
    style: styles.contentContainer
  }, createElement(BottomSheet.Cell, {
    icon: link,
    style: omniCellStyle,
    valueStyle: styles.omniInput,
    value: value,
    placeholder: __('Search or type URL'),
    autoCapitalize: "none",
    autoCorrect: false,
    keyboardType: "url",
    onChangeValue: newValue => {
      setValue({
        value: newValue,
        clipboardUrl
      });
    },
    onSubmit: onSubmit
    /* eslint-disable-next-line jsx-a11y/no-autofocus */
    ,
    autoFocus: true,
    separatorType: "none"
  }, value !== '' && createElement(TouchableOpacity, {
    onPress: clear,
    style: styles.clearIcon
  }, createElement(Icon, {
    icon: cancelCircleFilled,
    fill: iconStyle.color,
    size: 24
  }))), !!clipboardUrl && clipboardUrl !== value && createElement(BottomSheet.LinkSuggestionItemCell, {
    accessible: true,
    accessibilityLabel: sprintf(
    /* translators: Copy URL from the clipboard, https://sample.url */
    __('Copy URL from the clipboard, %s'), clipboardUrl),
    suggestion: {
      type: 'clipboard',
      url: clipboardUrl,
      isDirectEntry: true
    },
    onLinkPicked: pickLink
  }), !!value && createElement(LinkPickerResults, {
    query: value,
    onLinkPicked: pickLink,
    directEntry: directEntry
  })));
};
//# sourceMappingURL=index.native.js.map