@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 _reactNative = require("react-native");
var _clipboard = _interopRequireDefault(require("@react-native-clipboard/clipboard"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
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"));
var _bottomSheet = _interopRequireDefault(require("../bottom-sheet"));
var _icon = _interopRequireDefault(require("../../icon"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * 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, _url.getProtocol)(value)?.toLowerCase() || '';
  if (protocol.includes('mailto')) {
    type = 'mailto';
  }
  if (protocol.includes('tel')) {
    type = 'tel';
  }
  if (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 = ({
  value: initialValue,
  onLinkPicked,
  onCancel: cancel
}) => {
  const [value, setValue] = (0, _element.useState)(initialValue);
  const [clipboardUrl, setClipboardUrl] = (0, _element.useState)('');
  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('');
    setClipboardUrl('');
  };
  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(setClipboardUrl).catch(() => setClipboardUrl(''));
  }, []);

  // TODO: Localize the accessibility label.
  // TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.SafeAreaView, {
    style: _styles.default.safeArea,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.DismissButton, {
        onPress: cancel
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.Heading, {
        children: (0, _i18n.__)('Link to')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.ApplyButton, {
        onPress: onSubmit
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: _styles.default.contentContainer,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.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",
        children: value !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          onPress: clear,
          style: _styles.default.clearIcon,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
            icon: _icons.cancelCircleFilled,
            fill: iconStyle.color,
            size: 24
          })
        })
      }), !!clipboardUrl && clipboardUrl !== value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.LinkSuggestionItemCell, {
        accessible: true,
        accessibilityLabel: (0, _i18n.sprintf)(/* translators: %s: 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 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkPickerResults.default, {
        query: value,
        onLinkPicked: pickLink,
        directEntry: directEntry
      })]
    })]
  });
};
exports.LinkPicker = LinkPicker;
//# sourceMappingURL=index.native.js.map