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

UI components for GeChiUI.

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

/**
 * External dependencies
 */
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import { lowerCase, startsWith } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
import { BottomSheet, Icon } from '@gechiui/components';
import { getProtocol, prependHTTP } from '@gechiui/url';
import { link, cancelCircleFilled } from '@gechiui/icons';
import { usePreferredColorSchemeStyle } from '@gechiui/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 => {
  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 = _ref => {
  let {
    value: initialValue,
    onLinkPicked,
    onCancel: cancel
  } = _ref;
  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 = _ref2 => {
    let {
      title,
      url,
      isDirectEntry
    } = _ref2;
    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(NavBar, null, createElement(NavBar.DismissButton, {
    onPress: cancel
  }), createElement(NavBar.Heading, null, __('链接至')), 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: 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