Function SearchWidget

data-browser/src/views/Element.tsx:293–352

Allows the user to search for Resources and include these as an Element.

({ query, setElement }: WidgetProps)

/** Allows the user to search for Resources and include these as an Element. */
function SearchWidget({ query, setElement }: WidgetProps) {
  const { results } = useServerSearch(query);
  // The currently selected result
  const [index, setIndex] = useState(0);

  useHotkeys(
    'tab,enter',
    e => {
      e.preventDefault();
      setElement(results[index]);
    },
    { enableOnTags: ['TEXTAREA'] },
    [],
  );

  useHotkeys(
    'left',
    e => {
      e.preventDefault();
      let next = index - 1;
      if (next < 0) {
        next = results.length - 1;
      }
      setIndex(index - 1);
    },
    { enableOnTags: ['TEXTAREA'] },
    [index],
  );

  useHotkeys(
    'right',
    e => {
      e.preventDefault();
      let next = index + 1;
      if (next > results.length - 1) {
        next = 0;
      }
      setIndex(index + 1);
    },
    { enableOnTags: ['TEXTAREA'] },
    [index],
  );

  if (query == '') {
    return (
      <WidgetWrapper>
        <p>Search something...</p>
      </WidgetWrapper>
    );
  }

  return (
    <WidgetWrapper>
      <p> (press tab to select, left / right to browse)</p>
      <p>
        <ResourceInline subject={results[index]} />
      </p>
    </WidgetWrapper>