-
Notifications
You must be signed in to change notification settings - Fork 2
/
dropTable.jsx
89 lines (66 loc) · 2.68 KB
/
dropTable.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
import ReactDropzone from "react-dropzone";
import { withPreviews, clearPreviews } from './with-previews'
export class TextureDropZone extends React.Component {
constructor(props) {
super(props);
this.state = { file: null };
}
handleDrop = (accepted, rejected) =>{
this.setState({ file: accepted[0] });
this.props.onFileUpdate(this.state.file,this.props.tag);
}
render() {
return (
<ReactDropzone accept="image/*" onDrop={withPreviews(this.handleDrop)}>
{({ getRootProps, getInputProps }) => (
<div
{...getRootProps()}
>
<input {...getInputProps()} />
<div style={{ position: "relative", width: "100px", height: "100px", backgroundColor: "#87ceeb" }}>
<p style={{ margin: "10px" }}>{this.props.text}</p>
{this.state.file ? (<img
key={this.state.file.name}
src={this.state.file.preview}
style={{ position:"absolute",left:"10px",top:"10px",maxWidth: 80, display: 'block' }}
alt=""
/>): <div /> }
</div>
</div>
)}
</ReactDropzone>
);
}
}
export default class dropTable extends React.Component {
state = {
xpos:null,
xneg:null,
ypos:null,
yneg:null,
zpos:null,
zneg:null,
}
onFileUpdate(file,tag){
let newState={}
newState[tag]=file;
this.setState(newState);
this.props.onTextureUpdate(this.state,tag);
}
render() {
return (
<table>
<tbody>
<tr><td><TextureDropZone text="+X" onFileUpdate={this.onFileUpdate.bind(this)} tag="xpos" /></td></tr>
<tr><td><TextureDropZone text="-X" onFileUpdate={this.onFileUpdate.bind(this)} tag="xneg"/></td></tr>
<tr><td><TextureDropZone text="+Y" onFileUpdate={this.onFileUpdate.bind(this)} tag="ypos"/></td></tr>
<tr><td><TextureDropZone text="-Y" onFileUpdate={this.onFileUpdate.bind(this)} tag="yneg"/></td></tr>
<tr><td><TextureDropZone text="+Z" onFileUpdate={this.onFileUpdate.bind(this)} tag="zpos"/></td></tr>
<tr><td><TextureDropZone text="-Z" onFileUpdate={this.onFileUpdate.bind(this)} tag="zneg"/></td></tr>
</tbody>
</table>
)
}
}
//