rescript-ink/examples/useFocusWithId.res at main · cometkim/rescript-ink · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
open Ink

module Item = {
  @react.component
  let make = (~id, ~label) => {
    let {isFocused} = useFocus(~id, ())

    <Text>
      {React.string(label)}
      {switch isFocused {
      | true => <Text color=#green> {React.string(" (focused)")} </Text>
      | false => React.null
      }}
    </Text>
  }
}

module Focus = {
  @react.component
  let make = () => {
    let {focus} = useFocusManager()

    useInput((input, _) => {
      switch input {
      | '1' => focus("1")
      | '2' => focus("2")
      | '3' => focus("3")
      | _ => ()
      }
    }, ())

    <Box flexDirection=#column padding={1}>
      <Box marginBottom={1}>
        <Text>
          {React.string("Press Tab to focus next element, Shift+Tab to focus previous element, Esc to reset focus.")}
        </Text>
      </Box>
      <Item id="1" label="Press 1 to focus"/>
      <Item id="2" label="Press 2 to focus"/>
      <Item id="3" label="Press 3 to focus"/>
    </Box>
  }
}

let _ = render(<Focus />, ())