fixed selected icons, base 64, icons di fil
This commit is contained in:
parent
c6c62c51f2
commit
d147701129
4 changed files with 31 additions and 7 deletions
Binary file not shown.
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 23 KiB |
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Grid } from 'semantic-ui-react'
|
import { Button, Grid, Responsive } from 'semantic-ui-react'
|
||||||
|
|
||||||
export default class SelectIcons extends Component {
|
export default class SelectIcons extends Component {
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ export default class SelectIcons extends Component {
|
||||||
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
|
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid centered>
|
<Grid centered relaxed>
|
||||||
{
|
{
|
||||||
myicons.map((e, i) => {
|
myicons.map((e, i) => {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Header, Modal, Form, Input, Icon, Responsive } from 'semantic-ui-react'
|
import { Button, Header, Modal, Form, Input, Icon, Responsive, Image } from 'semantic-ui-react';
|
||||||
import SelectIcons from "./SelectIcons";
|
import SelectIcons from "./SelectIcons";
|
||||||
|
|
||||||
|
const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png";
|
||||||
|
|
||||||
export default class ModalWindow extends Component {
|
export default class ModalWindow extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
console.table(this.props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
id : "",
|
id : "",
|
||||||
selectedIcon: "",
|
selectedIcon: "",
|
||||||
name: "",
|
name: "",
|
||||||
img: "",
|
img: this.props.type === "new" ? null : this.props.idRoom.image,
|
||||||
openModal: false
|
openModal: false
|
||||||
}
|
};
|
||||||
|
|
||||||
|
this.fileInputRef = React.createRef();
|
||||||
|
|
||||||
this.addRoomModal = this.addRoomModal.bind(this);
|
this.addRoomModal = this.addRoomModal.bind(this);
|
||||||
this.updateIcon = this.updateIcon.bind(this);
|
this.updateIcon = this.updateIcon.bind(this);
|
||||||
|
@ -63,6 +70,16 @@ export default class ModalWindow extends Component {
|
||||||
this.setState({selectedIcon : e})
|
this.setState({selectedIcon : e})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getBase64(file, callback) {
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file.target.files[0]);
|
||||||
|
reader.onload = () => {
|
||||||
|
this.state.img = reader.result;
|
||||||
|
this.setState(this.state);
|
||||||
|
};
|
||||||
|
reader.onerror = console.error;
|
||||||
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
|
|
||||||
const spaceDiv = {
|
const spaceDiv = {
|
||||||
|
@ -112,8 +129,15 @@ export default class ModalWindow extends Component {
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<p>Insert an image of the room:</p>
|
<p>Insert an image of the room:</p>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}
|
|
||||||
value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
|
<Image src={this.state.img == null ? NO_IMAGE : this.state.img}
|
||||||
|
size='small'
|
||||||
|
onClick={() => this.fileInputRef.current.click()}/>
|
||||||
|
|
||||||
|
<input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg"
|
||||||
|
onChange={this.getBase64.bind(this)}
|
||||||
|
value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
|
||||||
|
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue