@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
203 lines (185 loc) • 4.71 kB
Markdown
#### A Dropzone is an area for a drag and drop of files.
Working example
```js
class MyDropZone extends React.Component {
constructor() {
super()
this.state = { files: null, result: null }
this.handleFile = this.handleFile.bind(this)
}
handleFile(files) {
this.setState({ result: files })
}
handleReset(files) {
if (files) {
console.log(files)
}
}
render() {
return (
<div>
<Dropzone
onDropAccepted={this.handleFile}
onFileReset={this.handleReset}>
<div className="pt7">
<div>
<span className="f4">Drop here your XLS or </span>
<span className="f4 c-link" style={{ cursor: 'pointer' }}>
choose a file
</span>
</div>
</div>
</Dropzone>
{this.state.result && (
<div className="mt4">
<p className="ttu f6">Result:</p>
<pre className="bg-black-025 pa4 f7">
{JSON.stringify(this.state.result, null, 2)}
</pre>
</div>
)}
</div>
)
}
}
;<MyDropZone />
```
Size and file type restriction
```js
class MyDropZone extends React.Component {
constructor() {
super()
this.state = { files: null, result: null }
this.handleFile = this.handleFile.bind(this)
}
handleFile(files) {
this.setState({ result: files })
}
handleReset(files) {
if (files) {
console.log(files)
}
}
render() {
return (
<div>
<Dropzone
accept=".xml"
minSize={2000}
maxSize={10000}
onDropAccepted={this.handleFile}
onFileReset={this.handleReset}>
<div className="pt7">
<div>
<span className="f4">Drop here your XML or </span>
<span className="f4 c-link" style={{ cursor: 'pointer' }}>
choose a file
</span>
<p className="f6 c-muted-2 tc">Maximum file size of 10 KB.</p>
</div>
</div>
</Dropzone>
{this.state.result && (
<div className="mt4">
<p className="ttu f6">Result:</p>
<pre className="bg-black-025 pa4 f7">
{JSON.stringify(this.state.result, null, 2)}
</pre>
</div>
)}
</div>
)
}
}
;<MyDropZone />
```
Custom icon
```js
const TableIcon = (
<svg width="44" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24h44v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V24z" fill="#E3E4E6" />
<rect x="4" y="29" width="8" height="2" rx="1" fill="#727273" />
<rect x="18" y="29" width="8" height="2" rx="1" fill="#727273" />
<rect x="36" y="29" width="4" height="2" rx="1" fill="#727273" />
<path d="M44 12H0V1a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1v11z" fill="#F71963" />
<rect
x="40"
y="7"
width="4"
height="2"
rx="1"
transform="rotate(180 40 7)"
fill="#fff"
/>
<rect
x="26"
y="7"
width="8"
height="2"
rx="1"
transform="rotate(180 26 7)"
fill="#fff"
/>
<rect
x="12"
y="7"
width="8"
height="2"
rx="1"
transform="rotate(180 12 7)"
fill="#fff"
/>
<path d="M0 12h44v12H0V12z" fill="#CACBCC" />
<rect x="4" y="17" width="8" height="2" rx="1" fill="#727273" />
<rect x="18" y="17" width="8" height="2" rx="1" fill="#727273" />
<rect x="36" y="17" width="4" height="2" rx="1" fill="#727273" />
</svg>
)
class MyDropZone extends React.Component {
constructor() {
super()
this.state = { files: null, result: null }
this.handleFile = this.handleFile.bind(this)
}
handleFile(files) {
this.setState({ result: files })
}
handleReset(files) {
if (files) {
console.log(files)
}
}
render() {
return (
<div>
<Dropzone
icon={TableIcon}
onDropAccepted={this.handleFile}
onFileReset={this.handleReset}>
<div className="pt7">
<div>
<span className="f4">Drop here your XLS or </span>
<span className="f4 c-link" style={{ cursor: 'pointer' }}>
choose a file
</span>
</div>
</div>
</Dropzone>
{this.state.result && (
<div className="mt4">
<p className="ttu f6">Result:</p>
<pre className="bg-black-025 pa4 f7">
{JSON.stringify(this.state.result, null, 2)}
</pre>
</div>
)}
</div>
)
}
}
;<MyDropZone />
```
Loading state
```js
<Dropzone isLoading />
```