slidePrev - slideNext not working as expected. #35

Olivr3 · 2018-09-23T18:59:00Z

Hey,

Is this a bug or did I implement it wrong?

The slide stays in the current position on click.

import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import { Link } from 'react-router-dom'
import { Col, Row, Card, CardHeader, CardBody } from 'reactstrap'
import styled from 'react-emotion'
import categories from '../../static/categories'
import EmptyList from '../EmptyList'

const Heading = styled('h3')`
  color: #777;
`

const Header = styled(CardHeader)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
`

const Body = styled(CardBody)`
  display: flex;
  height: 270px;
`

const RowDiv = styled(Row)`
  position: relative;
`

const ImageContainer = styled('div')`
  width: 100%;
  margin: auto;
  height: auto;
  line-height: 135px;
  float: left;
  text-align: center;
`

const NextButton = styled('button')`
  position: absolute;
  background-color: transparent;
  border: none;
  top: 50%;
  left: 98.7%;
  z-index: 1;
`

const PreviousButton = styled('button')`
  position: absolute;
  background-color: transparent;
  border: none;
  left: -1.5%;
  top: 50%;
  z-index: 1;
`

const responsive = {
  0: { items: 1 },
  600: { items: 3 },
  1024: { items: 4 },
}

const ProductImage = styled('img')`
  max-width: 150px;
  max-height: 150px;

  @media (max-width: 768px) {
    max-width: 175px;
    max-height: 175px;
  }

  @media (min-width: 992px) and (max-width: 1146px) {
    max-width: 125px;
    max-height: 125px;
  }
`

const displayImage = attachments => (
  <ImageContainer>
    <ProductImage
      src={
        attachments && attachments.length
          ? attachments[0]
          : 'https://s3-sa-east-1.amazonaws.com/ofornecedor-images/noImage300.png'
      } // @TODO set enviroment variable
      alt="Produto"
    />
  </ImageContainer>
)
const category = value => categories.find(cat => cat.value === value)
const galleryItems = product => (
  <Card key={product.id}>
    <Header>
      <Link to={`/product/${product.id}`}>{product.title}</Link>
    </Header>
    <Body>
      <Row>
        <Col xs="12">
          <Link to={`/product/${product.id}`}>{displayImage(product.attachments)}</Link>
        </Col>
        <Col xs="12">
          <span>
            <b>Ordem mínima</b> : {product.minorder ? product.minorder : ' -'}
          </span>
          <br />
          <span>
            <b>Preço</b> : {product.price ? product.price : ' -'}
          </span>
          <br />
          <span>
            <b>Categoria</b> : {product.category ? category(product.category).name : ' -'}
          </span>
        </Col>
      </Row>
    </Body>
  </Card>
)

class AliceGallery extends React.PureComponent {
  constructor(props) {
    super(props)

    this.slideNext = this.slideNext.bind(this)
    this.slidePrev = this.slidePrev.bind(this)
    this.onSlideChanged = this.onSlideChanged.bind(this)

    this.state = {
      currentIndex: 0,
      products: this.props.products && this.props.products.length > 0 ? this.props.products : [],
    }
  }

  onSlideChanged(e) {
    this.setState({ currentIndex: e.item })
  }

  slideNext() {
    this.setState({ currentIndex: this.state.currentIndex + 1 })
  }

  slidePrev() {
    this.setState({ currentIndex: this.state.currentIndex - 1 })
  }

  render() {
    const { title } = this.props
    const { products, currentIndex } = this.state

    return (
      <React.Fragment>
        <Row>
          <Col xs="12">
            <Heading>{title}</Heading>
            <hr />
          </Col>
        </Row>
        <RowDiv>
          {products && products.length > 0 ? (
            <React.Fragment>
              <PreviousButton onClick={() => this.slidePrev()}>
                <i className="fa fa-chevron-left fa-2x" aria-hidden="true" />
              </PreviousButton>
              <NextButton onClick={() => this.slideNext()}>
                <i className="fa fa-chevron-right fa-2x" aria-hidden="true" />
              </NextButton>
              <AliceCarousel
                items={products.map(product => galleryItems(product))}
                duration={400}
                autoPlay
                fadeOutAnimation
                mouseDragEnabled
                buttonsDisabled
                dotsDisabled
                slideToIndex={currentIndex}
                onSlideChanged={this.onSlideChanged}
                autoPlayInterval={2000}
                autoPlayDirection="rtl"
                responsive={responsive}
              />
            </React.Fragment>
          ) : (
            <Col xs="12">
              <EmptyList />
            </Col>
          )}
        </RowDiv>
      </React.Fragment>
    )
  }
}

export default AliceGallery

The text was updated successfully, but these errors were encountered:

maxmarinich · 2018-09-24T07:01:41Z

The problem you're passing new gallery items on the render(anti-pattern): items={products.map(product => galleryItems(product))}. Each time, the gallery gets new items and calculates the initial props. The property slideToIndex not included in this process(startIndex only). Save items in the state or specify startIndex property together with slideToIndex.

Maybe in one of the next releases i'll implement a new logic and include both properties for initial calculation. But this is not an obvious case, and additional research is needed.

Olivr3 · 2018-09-24T08:37:16Z

THanks @maxmarinich. You were right, it is working now. 👍

maxmarinich closed this as completed Sep 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

slidePrev - slideNext not working as expected. #35

slidePrev - slideNext not working as expected. #35

Olivr3 commented Sep 23, 2018

maxmarinich commented Sep 24, 2018

Olivr3 commented Sep 24, 2018

slidePrev - slideNext not working as expected. #35

slidePrev - slideNext not working as expected. #35

Comments

Olivr3 commented Sep 23, 2018

maxmarinich commented Sep 24, 2018

Olivr3 commented Sep 24, 2018