146 lines
3.5 KiB
JavaScript
146 lines
3.5 KiB
JavaScript
import React, {
|
|
Component,
|
|
} from 'react';
|
|
import {
|
|
Row,
|
|
Col,
|
|
FormGroup,
|
|
Label,
|
|
Input,
|
|
Carousel,
|
|
CarouselItem,
|
|
CarouselControl,
|
|
CarouselIndicators,
|
|
} from 'reactstrap';
|
|
import {
|
|
FaFileImage,
|
|
} from 'react-icons/fa';
|
|
|
|
class VegetableCarousel extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
imagesPreviewUrls: this.props.imagesPreviewUrls,
|
|
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
|
|
});
|
|
}
|
|
}
|
|
|
|
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)}
|
|
/>
|
|
</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;
|