components using react & react-dnd
npm install --save react-dnd-component
import React, { Component } from 'react';
import { List, DragDropContext, HTML5Backend } from 'react-dnd-component';
class App extends Component {
render() {
const style = {
display: 'flex',
justifyContent: 'space-around',
paddingTop: '20px',
flexWrap: 'wrap'
};
const itemStyle = {
width: 200,
height: 200,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
color: 'white',
fontSize: 20
};
const item = length => {
return Array.from({ length }, (x, i) => {
return (
<div key={i} style={{ ...itemStyle, background: 'green' }}>
{i}
</div>
);
});
};
return (
<div style={{ ...style }}>
<List
name={'test1'}
id={1}
width={200}
height={200}
rows={3}
style={{
background: 'yellow',
margin: 10
}}
activeStyle={{
background: 'red'
}}
onChange={state => {
console.log(state);
}}
>
{item(5)}
</List>
<List
name={'test1'}
id={2}
width={200}
height={200}
rows={3}
style={{
background: 'orange',
margin: 10
}}
activeStyle={{
background: 'blue'
}}
>
{item(5)}
</List>
</div>
);
}
}
export default DragDropContext(HTML5Backend)(App);
import React, { Component } from 'react';
import {
NativeFiles,
DragDropContext,
HTML5Backend
} from 'react-dnd-component';
class App extends Component {
render() {
return (
<NativeFiles>
{({ canDrop, isOver, files, removeFiles }) => {
return (
<FileList
canDrop={canDrop}
isOver={isOver}
files={files}
removeFiles={removeFiles}
/>
);
}}
</NativeFiles>
);
}
}
const style = {
width: 200,
height: 200,
border: '1px solid'
};
class FileList extends React.Component {
render() {
const { files, canDrop, isOver, removeFiles } = this.props;
const isActive = canDrop && isOver;
if (files.length === 0) {
return (
<div style={style}>
<div>{isActive ? 'Release to drop' : 'Drag file here'}</div>
</div>
);
}
return (
<div style={style}>
{this.list(files)}
<button onClick={removeFiles}>remove files</button>
</div>
);
}
list = files => {
return files.map(file => <div key={file.name}>name: {file.name}</div>);
};
}
export default DragDropContext(HTML5Backend)(App);
MIT © pjb0811