Carousel

class CarouselExample extends React.Component {
  getSlides(slideNum) {
  	let totalSlides = slideNum;
    const slides = [];
    while (totalSlides--) {
      slides.push(
        <Card
          key={ totalSlides }
          imagePosition='top'
          imageUrl='https://via.placeholder.com/1500x500'
          contentClasses='p3'
          containerClasses='mr3'
        >
          <Heading tagName='h2' size='sm' className='mb3'>
            { `This is slide #${slideNum - totalSlides}`}
          </Heading>
          <Button>Button</Button>
        </Card>
      );
    }
    return slides;
  }

  render() {
    return (
      <div className='py3'>
        <Heading tagName='h2' size='md' className='p3'>
          Carousel featuring slidesPerPage option and paginator
        </Heading>
        <Carousel
          slidesPerPage={ 3 }
          messages={ {
            ariaLabel: 'Example carousel',
            ariaDescription: 'Example carousel with slides per page and paginator',
            ariaLabelNext: 'Next',
            ariaLabelPrev: 'Previous',
            ariaLabelPages: pageNumber => `go to page ${pageNumber}`
          } }
          showPaginator
          controlClassName='mt3'
          areAllSlidesCurrentlyVisible={ allAreVisible=> console.log('Are slides all visible: ', allAreVisible)}
        >
          { this.getSlides(10) }
        </Carousel>
      </div>
    );
  }
}

render(<CarouselExample />);

class CarouselExample extends React.Component {
  getSlides(slideNum) {
  	let totalSlides = slideNum;
    const slides = [];
    while (totalSlides--) {
      const evenClasses = 'size6of12 md-size4of12 lg-size3of12';
      const oddClasses = 'size12of12 md-size6of12 lg-size4of12';
      const sizeClasses = totalSlides % 2 === 0 ? evenClasses : oddClasses;

      slides.push(
        <div
          className={ `gridItem ${sizeClasses}` }
          key={ totalSlides }
        >
          <Card
            imagePosition='top'
            imageUrl='https://via.placeholder.com/500x200'
            contentClasses='p3'
            containerClasses='mr3'
          >
            <Heading tagName='h2' size='sm' className='mb3'>
              { `This is slide #${slideNum - totalSlides}`}
            </Heading>

            <Button>Button</Button>
          </Card>
        </div>
      );
    }
    return slides;
  }

  render() {
    return (
      <div className='py3'>
        <div className='px3'>
          <Heading tagName='h2' size='md' className='mb3'>
            Variable-width slides
          </Heading>

          <p className='mb3'>
            In this example, each slide defines its own width using CSS, rather
            than allowing the carousel to set widths automatically.
          </p>

          <p className='mb3'>
            This option is useful for slides of varying widths and for responsive
            carousels that should change slides per page based on breakpoints.
          </p>

          <p className='mb3'>
            In this example, slide widths change at different breakpoints, and even
            and odd slide numbers have different widths.
          </p>
        </div>

        <Carousel
          className='px3 pb1'
          messages={ {
            ariaLabel: 'Example carousel with variable-width slides',
            ariaLabelNext: 'Next',
            ariaLabelPrev: 'Previous',
            ariaLabelPages: pageNumber => `go to page ${pageNumber}`
          } }
          variableWidth
        >
          { this.getSlides(10) }
        </Carousel>
      </div>
    );
  }
}

render(<CarouselExample />);

class ControlledCarousel extends React.Component {
  constructor() {
    super();

    this.slideBack = this.slideBack.bind(this);
    this.slideForward = this.slideForward.bind(this);
  }

  slideBack() {
    this.$carousel.slideBack();
  }

  slideForward() {
    this.$carousel.slideForward();
  }

  render() {
    return (
      <div>
        <Heading tagName='h2' size='md' className='pb3'>
          Controlled slides
        </Heading>

        <p className='pb3'>
          In this example, carousel paging is controlled through custom continue
          and back buttons, rather than using default controls.
        </p>

        <Carousel
          ref={ el => this.$carousel = el }
          messages={ {
            ariaLabelPages: pageNumber => `go to page ${pageNumber}`
          } }
          showPagerButtons={ false }
        >
          { [0, 1, 2, 3].map((slide, i) => (
            <Card
              key={ i }
              contentClasses='p3'
              containerClasses='m2'
            >
              <Heading tagName='h2' size='sm'>
                { `This is slide #${ i }`}
              </Heading>

              <p className='my3'>
                Access Carousel methods directly using <b>refs</b> to
                build controlled carousels.
              </p>

              <div className='text-right'>
                { i > 0 && (
                  <Button onClick={ this.slideBack }>
                    Back
                  </Button>
                ) }

                { i < 3 && (
                  <Button
                    className='ml3'
                    visualStyle='positive'
                    onClick={ this.slideForward }
                  >
                    Continue
                  </Button>
                ) }
              </div>
            </Card>
          )) }
        </Carousel>
      </div>
    );
  }
}

render(<ControlledCarousel />);