react spy scroll - react scroll spy

Created: 2018-02-16 09:50:25 -0800 Modified: 2018-08-25 23:18:22 -0700

Background

This is just a scrollspy library. I was using it just fine until I upgraded to React 16. That’s when I needed to fork the library and make modifications.

Building the example

npm install
Run “webpack —config webpack-config.js” from the example directory
http-server -p 3000

Upgrading to React 16

npm install —save-dev react@16.2.0 react-dom@16.2.0
Update peer dependencies to be ^16.0
npm install —save-dev prop-types
- Make sure the dependency has a ”^” at the beginning, e.g. “prop-types”: “^15.5.8”,
Modify all of their “PropTypes” imports to point at “prop-types” instead of React
Change the version to have “-adam.1” at the end.
For their tests, I needed to upgrade to Enzyme 3. There’s a guide on that here.
- npm i —save-dev enzyme@latest enzyme-adapter-react-16
- Copy/paste this line to anywhere that was trying to use Enzyme: Enzyme.configure({ adapter: new Adapter() });
- Update any other code, e.g. they were using mount() to get ReactWrappers and then calling .node on them. That private property has been deleted (reference), so I needed to change it to instance().
10:10 HiDeoo: Adam13531 Imo commit, push, use git temporarily in your dependency, press the PR button, wait 2 weeks, if PR not accepted, publish to Sinopia

Troubleshooting

Nothing is highlighted in the scrollspy at first

(see how nothing is selected in the scroll spy on the right?)

This is usually a problem with not having the scrollspy in the DOM when the page loads. A quick workaround is to put “visibility: hidden” instead of “display: none” on the element. An alternative workaround is to call “scrollBy(1,1)” on the scrollable element whenever the visibility of the scrollspy changes (as detailed in this part of the same note).

8/24/2018 UPDATE

Related to the above, if you have no AnchorElement in the DOM at the time that the component mounts, then internally, the “registerLink” function won’t be called until after “registerScrollpanel” is called. registerScrollpanel has a call to _handleScroll which is what sets “newActive”, and that needs to happen so that we know which anchor image is active.

I ran into this issue when I had this general pattern (which was bad): in componentDidMount of a parent component of the scroll-spy stuff, I was setting the state based on props. This meant that the first time the component rendered, it wouldn’t have the state since I hadn’t set it in the constructor, so in the scroll-spy part of the code, I never rendered an AnchorElement. The solution here was to set my state in the constructor so that the first render would have the data that I expected.

Hiding or showing the scroll spy may end up with the scrollbar in the wrong location

Just going to copy paste a function from 4/25/2018 that was in Bot Land’s inventory.js:

/**
   * When we switch between hiding/showing the scroll spy, we need to
   * workaround an issue where the scrollbar may not be in the right location.
   */
  changedScrollSpyVisibility() {
    const domNode = ReactDOM.findDOMNode(this.scrollPanelRef);

    // scrollTop will be 0 in the case that the items in the scroll spy
    // changed, in which case we want to scroll now to reset it.
    if (domNode.scrollTop === 0) {
      domNode.scrollBy(1, 1);
    }
  }

Then, any time the scrollspy gets added/removed in the DOM, you need to call that function. You can typically do this by modifying “componentDidUpdate” to call something like this:

componentDidUpdate(prevProps, prevState) {
  if (
    this.shouldRenderScrollSpy() !== this.shouldRenderScrollSpy(prevProps)
  ) {
    this.changedScrollSpyVisibility();
  }
}

shouldRenderScrollSpy(props = this.props) {
  return !props.shouldRenderScrollSpy;
}