Axis: y + Custom Height doesn't work

[mpodlasin]

Hi.

My cruel designers want me to implement such a view:

You would choose desired month by swipe'ing up and down on touch screen.

I wanted to use react-swipeable-views, as this seems like a straighforward mix of three examples from docs: Axis - to make it move vertically Custom Width - but in this case it would be custom height - I want each slide to have 1/3 of containers height, so that always three months are visible on the screen. Virtualize User needs to be able to scroll arbitrarily long into the past.

At the end I have this:

  render() {
    return (
        <div style={{flex: '1 1 0'}}>
        <VirtualizeSwipeableViews
          style={{paddingTop: styles.slide.height, paddingBottom: styles.slide.height}}
          containerStyle={{height: styles.slide.height, width: '100%'}}
          index={this.state.index}
          onChangeIndex={this.handleChangeIndex}
          slideRenderer={slideRenderer}
          axis="y"
        />
        </div>
    );
  }

Note the paddingTop and paddingBottom which show two more month-slides to the user.

Here are the problems I encountered:

At some point left and right padding of container are considered in calulations, but when axis: "y" is set, these do not change to top and bottom padding to calculate startIndex. This totally breaks functionality (swiping makes components "jump" in ugly way). This seems like obvious bug, but I wanted to be sure.

Second problem is much more subtle. After fixing calculating startIndex, swiping seems to be extremely sluggish. It turns out that if you move slide on Simple example, if you move slowly, your finger or cursor will always stay above the point you "clicked" on when starting to swipe. But on Custom Width at some point the point you clicked on will "shift". For example if you clicked on letter "a" on some slide, after moving it considerably to either side, cursor will no longer be above that letter. With small padding it is barely visible, but in my case where paddings make container three times as big, it makes swiping appear very slow (slides move very little compared to movement of cursor/finger). The problem this time seems to be here where padding is calculated into viewLength. In other words this line:

this.viewLength = this.viewLength - parseInt(rootStyle.paddingTop, 10) - parseInt(rootStyle.paddingBottom, 10);

fixes problem for me. I would like to consult if it is indeed proper fix.

In both cases I can submit a PR with these fixes, so that we could test it and consult in detail. Would you like me to do that?

Thanks in advance and have a great day. :)

[mpodlasin]

There is also third issue with this line, which works well one swiping only one slider, but in my case user will often swipe more than one slider at once (with one continuous movement). If for example user swipes up, delta will always be negative and index 7.3 will be rounded to 8, even though it would make more sense to round it to 7, since it is a closer index.

From perspective of the user after ending swipe wrong item appears as centered - not closest to the center of container, but the one above it.

Again I have a fix, which I can provide. It should not change behaviour of typical one-element-visible-at-once sliders. :)

[jeven2016]

I encounter this problem as well and look forward for an enhancement, thanks.