Managed Scrolling

[masiamj]

@jasongaare First off thanks for your work putting this together- awesome library!

In my project, I'm using this library to display a walkthrough on elements within a ScrollView. Some of the elements are initially below-the-fold and not visible until you scroll down.

Right now, when I target below-the-fold elements, the modal overlay is shown, but I cannot see the tooltip.

I'd like to use a single guide for all the elements on the page, and have the library automatically scroll the below-the-fold elements into view. Do you think we should implement this into the library or do you know of a different way to manage this?

Happy to write a PR if you think it should be included. Best!

[jasongaare]

hello sorry for the delayed response!

I think at this time it is something I wouldn't put into the library as scrolling can get hairy really quickly, but I think it could possibly be accomplished using the onClose function included in the tooltipProps.

I'd have to play with it a bit, but what I'm thinking is if you included a function to scroll to the element on the <WalkthroughElement> in place you could accomplish it... here's some pseudo code let me know if I'm in the ballpark or not...

<ScrollView ref={this.scrollView}>
  <WalkthroughElement
    id="element-1"
    tooltipProps={{
      onClose: () => this.scrollView.current.scrollTo({ y: POSITION_OF_ELEMENT_2 })
    }}
  >
    <Element1>
  </WalkthroughElement>
  <WalkthroughElement id="element-2">
    <Element2>
  </WalkthroughElement>
</ScrollView>

I think something like that could work. If you get a chance to play with it let me know!

[nullfox]

@jasongaare I tried using the example you posted above, but by passing an onClose to tooltipProps it replaces the existing onClose inside of WalkthroughElement and refuses to close the current tooltip and move on to the next one.

Can the onClose passed in tooltipProps be called by the default onClose inside of WalkthroughElement or pass in the close/goToNext functions to a user supplied onClose function?

[rtainter]

Just in case this helps someone else out (and I'm certain this isn't the cleanest way, but it's a start)...I am wrapping the walkthrough elements with a view that onLayout stores all the positions of the walkthroughElements:

<View
        collapsable={false}
        onLayout={(event) => {
          event.target.measureInWindow((x, y) => {
            console.log('onLayout profileButton', y)
            dispatch(updateWalkthrough({ profileButton: y }))
          })
        }}>
        <WalkthroughElement
          id='profileButton'
          tooltipProps={{
            onClose: (event) => {
              // console.log(event.target)
              dispatch(updateCurrentItem({ dashboardCurItem: 'profileName' }))
              goToWalkthroughElementWithId('profileName')
              //scroll to walkthroughY.profileName
            },
          }}

And then in the parent component I listen for the update and scroll to it

 const walkthroughState = useTypedSelector((state) => state.walkthrough)
  useEffect(() => {
    if (walkthroughState.dashboardCurItem) {
      const moveTo = walkthroughState[walkthroughState.dashboardCurItem]
      dashboard.current.scrollToOffset({ offset: moveTo - 100, animated: true })
    }

    return () => {}
  }, [walkthroughState])