react-js-spatial-navigation icon indicating copy to clipboard operation
react-js-spatial-navigation copied to clipboard

Support for leaveFor

Open goffioul opened this issue 7 years ago • 2 comments

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?

goffioul avatar Feb 07 '18 15:02 goffioul

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 :)

acontreras89 avatar Feb 18 '18 17:02 acontreras89

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

chwagssd avatar Nov 14 '18 18:11 chwagssd