draft: navigation interface

[raphamorim]

Working in Progress in #58 #40

const MyListComponent = (
   <div class="container">
   <div class="list"> 
         <div class="item" focusable onBlur={() => console.log('blur') } >
                Vertical Item with Blur Handler
          </div>
          <div class="horizontal-list">
               <div class="item" focusable onPress={() => console.log('pressed') } >
                     Horizontal Item 1 with Press Handler
               </div>
               <div class="item" focusable focused>
                     Horizontal Item 2 which started focused
                </div>
          </div>
          <div class="item" focusable onFocus={() => console.log('focused') } >
               Vertical Item with Focus Handler
          </div>
          <div class="item">
               Item which can't be focused or selected
           </div>
       </div>
       <div class='button' focusable>
           Enter
       </div>
   </div>
)

References:

• https://github.com/dead/react-key-navigation
• https://github.com/luke-chang/js-spatial-navigation
• https://github.com/bbc/tal

[raphamorim]

cc// @dead

[dead]

Looks good to me 😄
Any particular reason to use <div class="list"> instead of something like <div nav-list> ?

There are also other things that I was thinking:

• When moving to another item using i.e. ◀️ and then pressing ▶️ it should back to the same element it was before. (there are some cases where this would not happen)
• Lists where an item is "active" and should be focused when entering.
• How to set an item as active in the navigation tree? (without causing all the list to rerender)

[raphamorim]

Any particular reason to use <div class="list"> instead of something like <div nav-list> ?

Nopes, the only thing that matter for the renderer is focusable prop.

Lists where an item is "active" and should be focused when entering.

This is the idea 👍

How to set an item as active in the navigation tree? (without causing all the list to rerender)

For this draft, I'll go on based on props (active) setted by state. But this is still a item for discuss later.

[raphamorim]

change: active -> focused
ref: https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8

[EloB]

Nice :)

What will happend if the current focused item unmounts?
Is the coder responsible to move the focus prop?

[raphamorim]

What will happend if the current focused item unmounts?

Probably will focus on last focused element, if even the last focused element not exists anymore focus the first one.

Is the coder responsible to move the focus prop?

For first version yes @EloB

[raphamorim]

I ended up making a decision to reuse the Spatial Navigation code.
But I need to readjust the algorithm for the life cycle of a React renderer.

Preview: https://twitter.com/raphamundi/status/933510056678707200