search

dead / react-js-spatial-navigation

A wrapper of js-spatial-navigation to react components
MIT License
30 stars 31 forks source link

Support for leaveFor #9

Open goffioul opened 6 years ago

goffioul commented 6 years ago

I've used js-spatial-navigation in another project that wasn't using react. Now I'm considering using it again for a react-based project, hence I ended up finding your library. One feature I'd probably miss is the ability to specify leaveFor in sections. Conceptually, that means that you'd need a way to specify the section ID in the component properties, instead of auto-generating them. Is this something you've considered?

acontreras89 commented 6 years ago

I've had to do this in a project of mine.

// FocusableSection.js
getChildContext() {
  return { focusableSectionId: this.sectionId }
}
// ...
componentWillMount() {
  this.sectionId = this.props.id ? this.props.id : `section-${sectionsIds++}`
}
// ...
JsSpatialNavigation.add({
  leaveFor: this.props.leaveFor, // TODO: Add more options like this
  id: this.sectionId,
  selector: selector,
  enterTo: enterTo,
  defaultElement: defaultElement
})

Some bits may be missing but you get the idea :)

chwagssd commented 5 years ago

I have a PR open, did it via RenderProps and added a neighborLeft/neighborRight/neighborDown/neighborUp as well as a sectionId property which is needed. It all maps through to the sectionId and leaveFor: {neighborLeft, neighborRight, neighborDown, neighborUp} which gets passed to js-spatial-navigation

You can yarn add https://github.com/chwagssd/react-js-spatial-navigation.git if you like for now, until PR #11 gets merged by @dead