142 lines
3.3 KiB
JavaScript
142 lines
3.3 KiB
JavaScript
import React, {
|
|
Component,
|
|
} from 'react';
|
|
import {
|
|
Row,
|
|
Col,
|
|
FormGroup,
|
|
Label,
|
|
Input,
|
|
} from 'reactstrap';
|
|
import {
|
|
FaFileImage,
|
|
} from 'react-icons/fa';
|
|
|
|
class VegetableMain extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
Vegetable: {
|
|
name: '',
|
|
lat: 0,
|
|
lng: 0,
|
|
description: '',
|
|
Pictures: [],
|
|
},
|
|
imagePreviewUrl: '',
|
|
};
|
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
console.log(nextProps)
|
|
if (nextProps.Vegetable) {
|
|
this.setState({
|
|
Vegetable: nextProps.Vegetable
|
|
});
|
|
}
|
|
if (nextProps.imagePreviewUrl) {
|
|
this.setState({
|
|
imagePreviewUrl: nextProps.imagePreviewUrl
|
|
});
|
|
}
|
|
}
|
|
|
|
handleChange(event) {
|
|
const target = event.target;
|
|
const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
const name = target.name;
|
|
|
|
this.setState(prevState => ({
|
|
Vegetable: {
|
|
...prevState.Vegetable,
|
|
[name]: value,
|
|
},
|
|
}));
|
|
|
|
this.props.updateValue(name, value)
|
|
}
|
|
|
|
onImageChange(e) {
|
|
e.preventDefault();
|
|
|
|
const reader = new FileReader();
|
|
const file = e.target.files[0];
|
|
|
|
reader.onloadend = () => {
|
|
this.props.changeMainPicture(file, reader);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
imagePreviewUrl,
|
|
} = this.state;
|
|
|
|
let $imagePreview = null;
|
|
if (imagePreviewUrl) {
|
|
$imagePreview = (<img src={imagePreviewUrl} alt="Preview" />);
|
|
} else if (this.state.Vegetable.mainPicture) {
|
|
$imagePreview = (<img src={this.state.Vegetable.mainPicture} alt="Preview" />);
|
|
} else {
|
|
$imagePreview = (<div className="previewText" />);
|
|
}
|
|
|
|
return (
|
|
<Row>
|
|
<Col xs={12} sm={4}>
|
|
<FormGroup row>
|
|
<Label for="name" sm={4}>Nom</Label>
|
|
<Col sm={8}>
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
value={this.state.Vegetable.name}
|
|
placeholder="Nom"
|
|
onChange={this.handleChange}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
<FormGroup row>
|
|
<Label for="description" sm={4}>Description</Label>
|
|
<Col sm={8}>
|
|
<Input
|
|
type="textarea"
|
|
name="description"
|
|
id="description"
|
|
value={this.state.Vegetable.description}
|
|
placeholder="Description"
|
|
onChange={this.handleChange}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
<FormGroup row>
|
|
<Label for="mainPicture" sm={4}>Photo principale</Label>
|
|
<Col sm={8}>
|
|
<Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
|
|
<FaFileImage />
|
|
</Label>
|
|
<Input
|
|
type="file"
|
|
id="mainPicture"
|
|
onChange={e => this.onImageChange(e)}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
</Col>
|
|
<Col xs={12} sm={8}>
|
|
<div className="imgPreview">
|
|
{$imagePreview}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default VegetableMain;
|