import React from 'react'; import PropTypes from 'prop-types'; import { Container, Row, Col, ListGroup, ListGroupItem, Carousel, CarouselItem, CarouselControl, CarouselIndicators, Breadcrumb, BreadcrumbItem, } from 'reactstrap'; import { NotificationContainer, NotificationManager, } from 'react-notifications'; import Api from '../Components/Api'; import MapItem from '../Components/Map'; import strToSlug from '../StrToSlug'; class RouterVegetable extends React.Component { static formatValue(value) { if (!value) { return (null); } if (value[0] === '*') { return (
- ') }} />); } return value; } constructor(props) { super(props); const { match, changeBackground, } = props; this.state = { typeId: match.params.typeId, vegetableId: match.params.vegetableId, selectedType: { name: '', Vegetables: [], }, item: { name: null, Type: { id: null, name: null, }, }, activeIndex: 0, carouselHeight: 0, }; this.getItem = this.getItem.bind(this); this.next = this.next.bind(this); this.previous = this.previous.bind(this); this.goToIndex = this.goToIndex.bind(this); this.onExiting = this.onExiting.bind(this); this.onExited = this.onExited.bind(this); this.setHeight = this.setHeight.bind(this); this.getItem(); changeBackground('vegetables'); } onExiting() { this.animating = true; } onExited() { this.animating = false; } getItem() { const { typeId, vegetableId, } = this.state; Api.get(`/types/${typeId}/vegetables/${vegetableId}`) .then((res) => { this.setState({ selectedType: { id: res.data.Type.id, name: res.data.Type.name, Vegetables: [ res.data, ], }, item: res.data, }); }) .catch(() => { NotificationManager.error('Erreur lors de la récupération du végétal'); }); } setHeight(height) { this.setState({ carouselHeight: height, }); } goToIndex(newIndex) { if (this.animating) return; this.setState({ activeIndex: newIndex }); } next() { const { activeIndex, item, } = this.state; if (this.animating) return; const nextIndex = activeIndex === item.Pictures.length - 1 ? 0 : activeIndex + 1; this.setState({ activeIndex: nextIndex }); } previous() { const { activeIndex, item, } = this.state; if (this.animating) return; const nextIndex = activeIndex === 0 ? item.Pictures.length - 1 : activeIndex - 1; this.setState({ activeIndex: nextIndex }); } renderCarousel() { const { activeIndex, item, carouselHeight, } = this.state; if (!item || !item.Pictures || item.Pictures.length === 0) { return (null); } return (