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

UI components for WordPress.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

var _components = require("@wordpress/components");

var _url = require("@wordpress/url");

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

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

var _linkPickerResults = _interopRequireDefault(require("./link-picker-results"));

var _navigationHeader = _interopRequireDefault(require("../bottom-sheet/navigation-header"));

var _styles = _interopRequireDefault(require("./styles.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// this creates a search suggestion for adding a url directly
const createDirectEntry = value => {
  let type = 'URL';
  const protocol = (0, _lodash.lowerCase)((0, _url.getProtocol)(value)) || '';

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

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

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

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

exports.createDirectEntry = createDirectEntry;

const LinkPicker = ({
  value: initialValue,
  onLinkPicked,
  onCancel: cancel
}) => {
  const [value, setValue] = (0, _element.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 = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.omniCell, _styles.default.omniCellDark);
  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.icon, _styles.default.iconDark);
  return (0, _element.createElement)(_reactNative.SafeAreaView, {
    style: _styles.default.safeArea
  }, (0, _element.createElement)(_navigationHeader.default, {
    screen: (0, _i18n.__)('Link to'),
    leftButtonOnPress: cancel,
    applyButtonOnPress: onSubmit,
    isFullscreen: true
  }), (0, _element.createElement)(_reactNative.View, {
    style: _styles.default.contentContainer
  }, (0, _element.createElement)(_components.BottomSheet.Cell, {
    icon: _icons.link,
    style: omniCellStyle,
    valueStyle: _styles.default.omniInput,
    value: value,
    placeholder: (0, _i18n.__)('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 !== '' && (0, _element.createElement)(_reactNative.TouchableOpacity, {
    onPress: clear,
    style: _styles.default.clearIcon
  }, (0, _element.createElement)(_components.Icon, {
    icon: _icons.cancelCircleFilled,
    fill: iconStyle.color,
    size: 24
  }))), !!value && (0, _element.createElement)(_linkPickerResults.default, {
    query: value,
    onLinkPicked: pickLink,
    directEntry: directEntry
  })));
};

exports.LinkPicker = LinkPicker;
//# sourceMappingURL=index.native.js.map