<commit_before>import React, { Component } from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Carousel } from '../src/index';

// carousel styles
import '../src/main.scss';
import '../src/carousel.scss';
import '../src/examples/presentation/presentation.scss';

const createCarouselItemImage = (index, options = {}) => (
    <div key={index}>
        <img src={`/assets/${index}.jpeg`} />
        <p className="legend">Legend {index}</p>
    </div>
);

const addChildren = (ammount = 1, options = {}) => {
	let current = 0;
	const children = [];
	while ( current < ammount ) {
		children.push(createCarouselItemImage(current, options));
	}

	return children
};

const baseChildren = <div>{ [1,2,3,4,5].map(createCarouselItemImage) }</div>;

export class LazyLoadedCarousel extends Component {
    constructor (props) {
        super(props);

        this.state = {
            slides: null
        };

        this.loadSlides = this.loadSlides.bind(this);
    }

    loadSlides() {
        this.setState({
            slides: baseChildren.props.children
        });
    }

    render() {
        return (
            <div>
                <p>Click the button to asynchronously load the slides</p>
                <button onClick={this.loadSlides} style={{padding: '10px', margin: '10px', fontSize: '1.5em'}}>Load slides</button>
                <Carousel>
                    { this.state.slides }
                </Carousel>
            </div>
        );
    }
}

export class ExternalControlledCarousel extends Component {
    constructor (props) {
        super(props);

        this.state = {
            currentSlide: 0
        };
    }

    next = () => {
        this.setState({
            currentSlide: this.state.currentSlide + 1
        });
    }

    prev = () => {
        this.setState({
            currentSlide: this.state.currentSlide - 1
        });
    }

    render() {
        const buttonStyle = {fontSize: 20, padding: '5px 20px', margin: '5px 0px'};
        const containerStyle = {margin: '5px 0 20px'};
        return (
            <div>
                <div style={containerStyle}>
                    <p style={containerStyle}>
                        Use the buttons below to change the selected item in the carousel
                        <br/>

                        <small><i>Note that the external controls might not respect the carousel boundaries but the carousel won't go past it.</i></small>
                    </p>
                    <p>External slide value: {this.state.currentSlide}</p>
                    <button onClick={this.prev} style={buttonStyle}>Prev</button>
                    <button onClick={this.next} style={buttonStyle}>Next</button>
                </div>
                <Carousel selectedItem={this.state.currentSlide}>
                    { baseChildren.props.children }
                </Carousel>
            </div>
        );
    }
}

storiesOf('Carousel')
  .addWithInfo('PropTypes',  'All the allowed props and default values', () =>
    <div/>,
    { source: false, inline: true, propTables: [Carousel]})
  .addWithInfo('defaults',() => (
    <Carousel>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('lazy loaded',
    `
    Code example:
    ~~~js
    class LazyLoadedCarousel extends Component {
        constructor (props) {
            super(props);

            this.state = {
                slides: null
            };

            this.loadSlides = this.loadSlides.bind(this);
        }

        loadSlides() {
            this.setState({
                slides: baseChildren.props.children
            });
        }

        render() {
            return (
                <div>
                    <button onClick={this.loadSlides}>Load slides</button>
                    <Carousel>
                        { this.state.slides }
                    </Carousel>
                </div>
            );
        }
    }
    ~~~
            `,
    () => (
    <LazyLoadedCarousel />
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('handlers',
    <div>
    <p>Handlers will be called with the index of the element plus the element. i.e:</p>
    <code>
        function myHandler(index, element)
    </code>
    </div>
    ,() => (
    <Carousel onClickThumb={action('click thumb')} onClickItem={action('click item')} onChange={action('change')}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('custom transition time (1000ms)', () => (
    <Carousel transitionTime={1000}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('emulate touch', () => (
    <Carousel emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows', () => (
    <Carousel showArrows={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('custom status', () => (
    <Carousel statusFormatter={(current, total) => `Current slide: ${current} / Total: ${total}`}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('axis horizontal + keyboard support', () => (
    <Carousel useKeyboardArrows>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('axis vertical + keyboard support', () => (
    <Carousel axis="vertical" useKeyboardArrows>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows + infinite loop + auto play', () => (
    <Carousel showArrows={false} infiniteLoop autoPlay>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows + infinite loop + emulateTouch', () => (
    <Carousel showArrows={false} infiniteLoop emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no status', () => (
    <Carousel showStatus={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no indicators', () => (
    <Carousel showIndicators={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no thumbs', () => (
    <Carousel showThumbs={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no status, no indicators', () => (
    <Carousel showStatus={false}  showIndicators={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('fixed width', () => (
    <Carousel width="700px">
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('dynamic height images', () => (
    <Carousel showArrows={false} dynamicHeight={true}>
        <div><img src="http://placehold.it/350x150" /></div>
        <div><img src="http://placehold.it/255x150" /></div>
        <div><img src="http://placehold.it/295x150" /></div>
        <div><img src="http://placehold.it/310x150" /></div>
        <div><img src="http://placehold.it/575x250" /></div>
        <div><img src="http://placehold.it/450x150" /></div>
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('auto play', () => (
    <Carousel autoPlay={true} interval={1000} infiniteLoop={true}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('auto play stopping on hover', () => (
    <Carousel autoPlay={true} stopOnHover={true} infiniteLoop={true}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('initial selected', () => (
    <Carousel selectedItem={3}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('vertical axis', () => (
    <Carousel axis="vertical">
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('vertical axis + emulateTouch + "natural" vertical swipe', () => (
    <Carousel axis="vertical" verticalSwipe="natural" emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('youtube', () => (
    <Carousel showThumbs={false}>
		<div key="youtube-1">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>

		<div key="youtube-2">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/C-y70ZOSzE0" />
		</div>

		<div key="youtube-3">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/IyTv_SR2uUo" />
		</div>

		<div key="youtube-4">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/3zrfGHQd4Bo" />
		</div>
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('with external controls', () => (
    <ExternalControlledCarousel />
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('presentation mode', () => (
    <Carousel showThumbs={ false } showStatus={ false } useKeyboardArrows className="presentation-mode">
		<div key="content-0" className="my-slide primary">
			<h1>Presentation mode</h1>
		</div>
		<div key="content-1" className="my-slide secondary">
			<h2>It's just a couple of new styles...</h2>
		</div>
		<div key="content-2" className="my-slide content">
			<p>...and the carousel can be used to present something!</p>
		</div>
		<div key="content-3" className="my-slide content">
			<img src="/assets/meme.png" />
		</div><commit_msg>Updating example with external controls<commit_after>import React, { Component } from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Carousel } from '../src/index';

// carousel styles
import '../src/main.scss';
import '../src/carousel.scss';
import '../src/examples/presentation/presentation.scss';

const createCarouselItemImage = (index, options = {}) => (
    <div key={index}>
        <img src={`/assets/${index}.jpeg`} />
        <p className="legend">Legend {index}</p>
    </div>
);

const addChildren = (ammount = 1, options = {}) => {
	let current = 0;
	const children = [];
	while ( current < ammount ) {
		children.push(createCarouselItemImage(current, options));
	}

	return children
};

const baseChildren = <div>{ [1,2,3,4,5].map(createCarouselItemImage) }</div>;

export class LazyLoadedCarousel extends Component {
    constructor (props) {
        super(props);

        this.state = {
            slides: null
        };

        this.loadSlides = this.loadSlides.bind(this);
    }

    loadSlides() {
        this.setState({
            slides: baseChildren.props.children
        });
    }

    render() {
        return (
            <div>
                <p>Click the button to asynchronously load the slides</p>
                <button onClick={this.loadSlides} style={{padding: '10px', margin: '10px', fontSize: '1.5em'}}>Load slides</button>
                <Carousel>
                    { this.state.slides }
                </Carousel>
            </div>
        );
    }
}

export class ExternalControlledCarousel extends Component {
    constructor (props) {
        super(props);

        this.state = {
            currentSlide: 0
        };
    }

    next = () => {
        this.setState({
            currentSlide: this.state.currentSlide + 1
        });
    }

    prev = () => {
        this.setState({
            currentSlide: this.state.currentSlide - 1
        });
    }

    updateCurrentSlide = (index) => {
        const { currentSlide } = this.state;

        if (currentSlide !== index) {
            this.setState({
                currentSlide: index
            });
        }
    }

    render() {
        const buttonStyle = {fontSize: 20, padding: '5px 20px', margin: '5px 0px'};
        const containerStyle = {margin: '5px 0 20px'};
        return (
            <div>
                <div style={containerStyle}>
                    <p style={containerStyle}>
                        Use the buttons below to change the selected item in the carousel
                        <br/>

                        <small><i>Note that the external controls might not respect the carousel boundaries but the carousel won't go past it.</i></small>
                    </p>
                    <p>External slide value: {this.state.currentSlide}</p>
                    <button onClick={this.prev} style={buttonStyle}>Prev</button>
                    <button onClick={this.next} style={buttonStyle}>Next</button>
                </div>
                <Carousel selectedItem={this.state.currentSlide} onChange={this.updateCurrentSlide} {...this.props}>
                    { baseChildren.props.children }
                </Carousel>
            </div>
        );
    }
}

storiesOf('Carousel')
  .addWithInfo('PropTypes',  'All the allowed props and default values', () =>
    <div/>,
    { source: false, inline: true, propTables: [Carousel]})
  .addWithInfo('defaults',() => (
    <Carousel>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('lazy loaded',
    `
    Code example:
    ~~~js
    class LazyLoadedCarousel extends Component {
        constructor (props) {
            super(props);

            this.state = {
                slides: null
            };

            this.loadSlides = this.loadSlides.bind(this);
        }

        loadSlides() {
            this.setState({
                slides: baseChildren.props.children
            });
        }

        render() {
            return (
                <div>
                    <button onClick={this.loadSlides}>Load slides</button>
                    <Carousel>
                        { this.state.slides }
                    </Carousel>
                </div>
            );
        }
    }
    ~~~
            `,
    () => (
    <LazyLoadedCarousel />
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('handlers',
    <div>
    <p>Handlers will be called with the index of the element plus the element. i.e:</p>
    <code>
        function myHandler(index, element)
    </code>
    </div>
    ,() => (
    <Carousel onClickThumb={action('click thumb')} onClickItem={action('click item')} onChange={action('change')}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('custom transition time (1000ms)', () => (
    <Carousel transitionTime={1000}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('emulate touch', () => (
    <Carousel emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows', () => (
    <Carousel showArrows={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('custom status', () => (
    <Carousel statusFormatter={(current, total) => `Current slide: ${current} / Total: ${total}`}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('axis horizontal + keyboard support', () => (
    <Carousel useKeyboardArrows>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('axis vertical + keyboard support', () => (
    <Carousel axis="vertical" useKeyboardArrows>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows + infinite loop + auto play', () => (
    <Carousel showArrows={false} infiniteLoop autoPlay>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no arrows + infinite loop + emulateTouch', () => (
    <Carousel showArrows={false} infiniteLoop emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no status', () => (
    <Carousel showStatus={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no indicators', () => (
    <Carousel showIndicators={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no thumbs', () => (
    <Carousel showThumbs={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('no status, no indicators', () => (
    <Carousel showStatus={false}  showIndicators={false}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('fixed width', () => (
    <Carousel width="700px">
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('dynamic height images', () => (
    <Carousel showArrows={false} dynamicHeight={true}>
        <div><img src="http://placehold.it/350x150" /></div>
        <div><img src="http://placehold.it/255x150" /></div>
        <div><img src="http://placehold.it/295x150" /></div>
        <div><img src="http://placehold.it/310x150" /></div>
        <div><img src="http://placehold.it/575x250" /></div>
        <div><img src="http://placehold.it/450x150" /></div>
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('auto play', () => (
    <Carousel autoPlay={true} interval={1000} infiniteLoop={true}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('auto play stopping on hover', () => (
    <Carousel autoPlay={true} stopOnHover={true} infiniteLoop={true}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('initial selected', () => (
    <Carousel selectedItem={3}>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('vertical axis', () => (
    <Carousel axis="vertical">
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('vertical axis + emulateTouch + "natural" vertical swipe', () => (
    <Carousel axis="vertical" verticalSwipe="natural" emulateTouch>
        { baseChildren.props.children }
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('youtube', () => (
    <Carousel showThumbs={false}>
		<div key="youtube-1">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>

		<div key="youtube-2">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/C-y70ZOSzE0" />
		</div>

		<div key="youtube-3">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/IyTv_SR2uUo" />
		</div>

		<div key="youtube-4">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/3zrfGHQd4Bo" />
		</div>
    </Carousel>
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('with external controls + auto play + inifinite loop', () => (
    <ExternalControlledCarousel infiniteLoop autoPlay />
  ), { source: true, inline: true, propTables: false})
  .addWithInfo('presentation mode', () => (
    <Carousel showThumbs={ false } showStatus={ false } useKeyboardArrows className="presentation-mode">
		<div key="content-0" className="my-slide primary">
			<h1>Presentation mode</h1>
		</div>
		<div key="content-1" className="my-slide secondary">
			<h2>It's just a couple of new styles...</h2>
		</div>
		<div key="content-2" className="my-slide content">
			<p>...and the carousel can be used to present something!</p>
		</div>
		<div key="content-3" className="my-slide content">
			<img src="/assets/meme.png" />
		</div>
{'fraction_non_alphanumeric': 0.15985327477194844, 'fraction_numerical': 0.01187315990153965, 'mean_word_length': 2.533424283765348, 'pattern_counts': {'":': 0, '<': 283, '<?xml version=': 0, '>': 344, 'https://': 8, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3050232', 'n_tokens_mistral': 6542, 'n_tokens_neox': 6227, 'n_words': 1368}