Function RecipientInput

src/components/editor/components/RecipientInput.js:56–149

({extraKey, hideErrorMsg, keys, recipients, onChangeRecipients})

}

export function RecipientInput({extraKey, hideErrorMsg, keys, recipients, onChangeRecipients}) {
  const idRef = useRef(getUUID());

  const tags = useMemo(
    () => recipients.map(r => recipientToTag(r, keys, extraKey)),
    [recipients, keys, extraKey]
  );

  const updateParentRecipients = nextTags => onChangeRecipients(nextTags.map(t => tagToRecipient(t, keys)));

  const onDelete = tagIndex => updateParentRecipients(tags.filter((_, i) => i !== tagIndex));

  const onAddition = newTag => {
    if (!isValidAddress(newTag.id)) {
      return;
    }
    updateParentRecipients([...tags, newTag]);
    // <ReactTags> exposes neither its input element nor a focus API, so we
    // re-focus by querying for it after the parent state update lands.
    setTimeout(() => {
      const inputElem = document.querySelector(`[id="${idRef.current}"] .tag-input-field`);
      inputElem?.focus();
    }, 0);
  };

  const onFilterSuggestions = (textInputValue, possibleSuggestionsArray) => {
    const lowerCaseQuery = textInputValue.toLowerCase();
    return possibleSuggestionsArray
    .filter(suggestion => suggestion.text.toLowerCase().includes(lowerCaseQuery))
    .slice(0, 10);
  };

  const suggestions = keys
  .filter(key => !tags.find(tag => tag.id === key.email))
  .map(key => ({
    id: key.email,
    text: `${key.userId} - ${key.keyId}`,
  }));

  const renderSuggestion = ({text}, query) => {
    query = query.trim();
    let html = text.replaceAll(query, `<mark>${query}</mark>`);
    html = encodeHTML(html);
    html = html.replaceAll('&lt;mark&gt;', '<mark>').replaceAll('&lt;&#x2F;mark&gt;', '</mark>'); // decode mark tag
    return <span dangerouslySetInnerHTML={{__html: html}} />;
  };

  const showNotFoundAlert = !hideErrorMsg && !extraKey && hasAnyUnresolvedRecipient(recipients, keys);
  const showExtraKeyAlert = extraKey && !recipients.some(r => r.lookupPending);

  return (
    <div id={idRef.current} className="mb-0">
      <ReactTags
        tags={tags}
        suggestions={suggestions}
        renderSuggestion = {renderSuggestion}
        handleDelete={onDelete}
        handleAddition={onAddition}