onDraging slides doesn't return index of new visible element.

Describe the feature you’d like: Currently, there is no good way of selecting a new slide on when you finish dragging on a tablet or phone. Add some property which will control which slide is visible now. Because all workarounds have a lot of bugs.

Suggested implementation: When on drag is finished and only when a new screen is shown return to a user index of a new visible slide

Describe alternatives you’ve considered: this code is working but it is kinda clunky

onTransitionEnd={ () => {
  if (!isOnDesktop) {
  const visible = document.querySelector('.videoSlider .carousel__slide--visible .video');
  console.log(visible);
  items.forEach(({ id: vId }, i) => {
    if (vId === visible) {
     console.log(i, 'i', vId);
      handleChangeVideo(i);
     }
  });
  console.log(items, visible.id, 'visible');
  }
} }

Teachability, Documentation, Adoption, Migration Strategy: onDragSlideEnd return an index of a new slide or return -1 if the slide has not changed.

[jimlowrey]

@vignitres I believe this can be done with an HOC inside the CarouselProvider. Add a callback to the resulting HOC and it will get passed to your wrapped component. The wrapped component will have access to the props that the HOC provides your component.

import { WithStore } from 'pure-react-carousel';
import { CarouselProvider} from 'pure-react-carousel';

class Listener extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate() {
        if ( this.props.updatePlace) {
            this.props.updatePlace(this.props.currentSlide);
        }
    }
    render() {
          return null;
    }
}

const WrappedListener = WithStore(Listener, (state) => {
    return {
        currentSlide: state.currentSlide
    };
});

then the component rendering would have something like this,

updatePlace(place) {
  //process place
}
render() {
  return (
  ...
  <CarouselProvider ... >
         <WrappedListener updatePlace={this.updatePlace.bind(this)}/>
         //etc...
  </CarouselProvider>
  ...
  );
}

[vignitres]

@vignitres I believe this can be done with an HOC inside the CarouselProvider. Add a callback to the resulting HOC and it will get passed to your wrapped component. The wrapped component will have access to the props that the HOC provides your component.

import { WithStore } from 'pure-react-carousel';
import { CarouselProvider} from 'pure-react-carousel';

class Listener extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate() {
        if ( this.props.updatePlace) {
            this.props.updatePlace(this.props.currentSlide);
        }
    }
    render() {
          return null;
    }
}

const WrappedListener = WithStore(Listener, (state) => {
    return {
        currentSlide: state.currentSlide
    };
});

then the component rendering would have something like this,

updatePlace(place) {
  //process place
}
render() {
  return (
  ...
  <CarouselProvider ... >
         <WrappedListener updatePlace={this.updatePlace.bind(this)}/>
         //etc...
  </CarouselProvider>
  ...
  );
}

Yes! I managed to do that a few days ago. I guess I’m just used to dealing with this using events, but for some odd reason, this solution just feels right.

Thanks anyways!