Auto-detect props.items changes

[Hendrik]

At the moment, changing props.items won't reset state.currentIndex automatically, so that props.items changes can result in a broken image. The current workaround is to use slideToIndex to reset the currentIndex back to the correct start position on props.items changes.

It's possible to auto-detect props.items changes by comparing the current and next props.items arrays. However, the solution I'm using on my fork adds 2 more dependencies to the project (immutable and immutablediff), so that there's quite a bit of extra code just to have the ability to compare the property changes. That's also the reason I didn't submit a pull request for this, as I don't know whether you would want to add such extra dependencies to the original code base.

I mentioned about sharing my solution in one of the previous commit messages, so here are the relevant changes from my build/image-gallery.js file:

  var diff = require('immutablediff');
  var Immutable = require('immutable');

  ...  

  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    var propsDiff = diff(Immutable.fromJS(this.props.items), Immutable.fromJS(nextProps.items));
    if (propsDiff.size !== 0) {
      var startIndex = nextProps.startIndex || 0;
      this.setState({ currentIndex: startIndex });
    }
  }

[xiaolin]

@Hendrik Thanks for sharing. I did some thinking, and realize this function might fix one issue, but break another.

For example, If you decides to change other properties in items that are not image src related, e.g. description, originalClass or thumbnailClass, the index reset would be a bad side effect.

I think for this specific issue using slideToIndex after you manipulated the items is the right way to go.

[Hendrik]

No problem.
I'll close this issue then.