@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.createDirectEntry = exports.LinkPicker = void 0;

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

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

var _clipboard = _interopRequireDefault(require("@react-native-clipboard/clipboard"));

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 _navBar = _interopRequireDefault(require("../bottom-sheet/nav-bar"));

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 => {
  var _getProtocol;

  let type = 'URL';
  const protocol = ((_getProtocol = (0, _url.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' ? (0, _url.prependHTTP)(value) : value,
    type
  };
};

exports.createDirectEntry = createDirectEntry;

const getURLFromClipboard = async () => {
  const text = await _clipboard.default.getString();
  return !!text && (0, _url.isURL)(text) ? text : '';
};

const LinkPicker = _ref => {
  let {
    value: initialValue,
    onLinkPicked,
    onCancel: cancel
  } = _ref;
  const [{
    value,
    clipboardUrl
  }, setValue] = (0, _element.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 = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.omniCell, _styles.default.omniCellDark);
  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.icon, _styles.default.iconDark);
  (0, _element.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 (0, _element.createElement)(_reactNative.SafeAreaView, {
    style: _styles.default.safeArea
  }, (0, _element.createElement)(_navBar.default, null, (0, _element.createElement)(_navBar.default.DismissButton, {
    onPress: cancel
  }), (0, _element.createElement)(_navBar.default.Heading, null, (0, _i18n.__)('Link to')), (0, _element.createElement)(_navBar.default.ApplyButton, {
    onPress: onSubmit
  })), (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: newValue => {
      setValue({
        value: newValue,
        clipboardUrl
      });
    },
    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
  }))), !!clipboardUrl && clipboardUrl !== value && (0, _element.createElement)(_components.BottomSheet.LinkSuggestionItemCell, {
    accessible: true,
    accessibilityLabel: (0, _i18n.sprintf)(
    /* translators: Copy URL from the clipboard, https://sample.url */
    (0, _i18n.__)('Copy URL from the clipboard, %s'), clipboardUrl),
    suggestion: {
      type: 'clipboard',
      url: clipboardUrl,
      isDirectEntry: true
    },
    onLinkPicked: pickLink
  }), !!value && (0, _element.createElement)(_linkPickerResults.default, {
    query: value,
    onLinkPicked: pickLink,
    directEntry: directEntry
  })));
};

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