How to display list from array of objects?

[skorotkiewicz]

I want to make a simple list to display the contents of an array of objects where you can easily select the next item using the keys.

Unfortunately, when I reach the end of the menu it starts to focus from the beginning instead of scrolling and showing the next items from the array.

It should display the list nicely one by one, and when item 3 is focused and you scroll down, it should show:
item 4
item 5
item 6

As in my attached example which I am trying to build.

import React, { useState } from "react";
import { render, Box, Text, useInput, useApp, useFocus } from "ink";

const App = () => {
  const { exit } = useApp();
  const [selected, setSelected] = useState("");

  useInput((input, key) => {
    input === "q" && exit();
    // input === "j" next item selected? // XXX
    // input === "k" && prev item selected? // XXX
  });

  const items = [
    { nick: "1", description: "item 1" },
    { nick: "2", description: "item 2" },
    { nick: "3", description: "item 3" },
    { nick: "4", description: "item 4" },
    { nick: "5", description: "item 5" },
    { nick: "6", description: "item 6" },
  ];

  return (
    <>
      <Box height={7} width="100%" borderStyle="round" borderColor="blue">
        <Focus items={items} setSelected={setSelected} />
      </Box>
      <Text>{selected && <Details selected={selected} />}</Text>
    </>
  );
};

const Details = ({ selected }) => {
  return (
    // XXX
    <Box style={{ position: "absolute", top: 0, left: "center" }}>
      <Text>{selected}</Text>
    </Box>
  );
};

const Focus = ({ items, setSelected }) => (
  <Box flexDirection="column" padding={1}>
    <Box marginBottom={1}>
      <Text>
        Press Tab to focus next element, Shift+Tab to focus previous element,
        Esc to reset focus.
      </Text>
    </Box>

    {items.map((item, key) => (
      <Item
        onSelect={(e) => setSelected(e.description)} // XXX
        key={key}
        label={item.description}
      />
    ))}
  </Box>
);

const Item = ({ label }) => {
  const { isFocused } = useFocus();
  return (
    <Box>
      <Text>
        {label} {isFocused && <Text color="green">(focused)</Text>}
      </Text>
    </Box>
  );
};

render(<App />);

-----------------------
|    item 1           |
|---------------------|
|    item 2           |
|---------------------|
|    item 2           |
-----------------------

Any advice would I be very grateful for.

PS. How to do when the item is focused event onSelect?

[vadimdemedes]

Scrolling isn't supported in Ink, but you can use ink-select-input to add a selectable list.