@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 { lowerCase, startsWith } from 'lodash';
/**
 * WordPress dependencies
 */

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

import LinkPickerResults from './link-picker-results';
import NavigationHeader from '../bottom-sheet/navigation-header';
import styles from './styles.scss'; // this creates a search suggestion for adding a url directly

export const createDirectEntry = value => {
  let type = 'URL';
  const protocol = lowerCase(getProtocol(value)) || '';

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

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

  if (startsWith(value, '#')) {
    type = 'internal';
  }

  return {
    isDirectEntry: true,
    title: value,
    url: type === 'URL' ? prependHTTP(value) : value,
    type
  };
};
export const LinkPicker = ({
  value: initialValue,
  onLinkPicked,
  onCancel: cancel
}) => {
  const [value, setValue] = useState(initialValue);
  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 = ({
    title,
    url,
    isDirectEntry
  }) => {
    onLinkPicked({
      title: isDirectEntry ? url : title,
      url
    });
  };

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

  const clear = () => {
    setValue('');
  };

  const omniCellStyle = usePreferredColorSchemeStyle(styles.omniCell, styles.omniCellDark);
  const iconStyle = usePreferredColorSchemeStyle(styles.icon, styles.iconDark);
  return createElement(SafeAreaView, {
    style: styles.safeArea
  }, createElement(NavigationHeader, {
    screen: __('Link to'),
    leftButtonOnPress: cancel,
    applyButtonOnPress: onSubmit,
    isFullscreen: true
  }), 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: setValue,
    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
  }))), !!value && createElement(LinkPickerResults, {
    query: value,
    onLinkPicked: pickLink,
    directEntry: directEntry
  })));
};
//# sourceMappingURL=index.native.js.map