bo/src/Vegetable/Carousel.js

import React, {
  Component,
} from 'react';
import {
  Row,
  Col,
  FormGroup,
  Label,
  Input,
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  ListGroup,
  ListGroupItem,
  Button,
} from 'reactstrap';
import {
  FaFileImage,
  FaTrash,
} from 'react-icons/fa';

import '../Vegetable.css';

class VegetableCarousel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      imagesPreviewUrls: this.props.imagesPreviewUrls,
      pictures: this.props.pictures,
      activeIndex: 0,
    };

    this.onPictureChange = this.onPictureChange.bind(this);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExited = this.onExited.bind(this);
    this.onExiting = this.onExiting.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.imagesPreviewUrls) {
      this.setState({
        imagesPreviewUrls: nextProps.imagesPreviewUrls,
      });
    }
    if (nextProps.activeIndex) {
      this.setState({
        activeIndex: nextProps.activeIndex,
      });
    }
    if (nextProps.pictures) {
      this.setState({
        pictures: nextProps.pictures,
      });
    }
  }

  onPictureChange(e) {
    e.preventDefault();

    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      this.props.addPicture(file, reader);
    };

    reader.readAsDataURL(file);
  }

  next() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
    this.setState({
      activeIndex: nextIndex,
    });
  }

  previous() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
    this.setState({
      activeIndex: nextIndex,
    });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({
      activeIndex: newIndex,
    });
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  render() {
    const {
      activeIndex,
    } = this.state;

    return (
      <Row>
        <Col xs={12} sm={4}>
          <FormGroup row>
            <Col sm={12}>
              <Label className="btn btn-success" for="Pictures" sm={12}>
                <FaFileImage />
                {' '}
                Ajouter une photo
              </Label>
              <Input
                type="file"
                id="Pictures"
                onChange={e => this.onPictureChange(e)}
              />
              <ListGroup>
                {this.state.pictures.map((item, key) => (
                  <ListGroupItem key={key}>
                    <Button
                      onClick={() => this.props.deletePicture(item.id)}
                      color="danger"
                      className="deletePicture"
                    >
                      <FaTrash />
                    </Button>
                    <img className="img-thumbnail" src={item.url} alt={item.url} />
                  </ListGroupItem>
                ))}
              </ListGroup>
            </Col>
          </FormGroup>
        </Col>
        <Col xs={12} sm={8}>
          {this.state.imagesPreviewUrls
            && this.state.imagesPreviewUrls.length > 0
            ? (
              <Carousel
                activeIndex={activeIndex}
                next={this.next}
                previous={this.previous}
              >
                <CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
                {this.state.imagesPreviewUrls.map((item, key) => (
                  <CarouselItem
                    onExiting={this.onExiting}
                    onExited={this.onExited}
                    key={`Carousel_${key}`}
                  >
                    <img src={item} alt="Carousel" />
                  </CarouselItem>
                ))}
                <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
                <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
              </Carousel>
            )
            : (null)
          }
        </Col>
      </Row>
    );
  }
}

export default VegetableCarousel;