8000 Update react dnd for upload files dnd · corner4world/rclone-webui-react@c346743 · GitHub
[go: up one dir, main page]
Skip to content

Commit c346743

Browse files
negative0negative0
committed
Update react dnd for upload files dnd
1 parent e85aba1 commit c346743

18 files changed

+558
-323
lines changed

‎package-lock.json

Lines changed: 53 additions & 38 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"react-autosuggest": "^10.0.0",
3535
"react-awesome-player": "^1.0.11",
3636
"react-chartjs-2": "^2.9.0",
37-
"react-dnd": "^7.7.0",
38-
"react-dnd-html5-backend": "^7.7.0",
37+
"react-dnd": "^11.1.3",
38+
"react-dnd-html5-backend": "^11.1.3",
3939
"react-dom": "^16.12.0",
4040
"react-in-viewport": "0.0.38",
4141
"react-redux": "^7.1.3",

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ ReactDOM.render(
1717
// If you want your app to work offline and load faster, you can change
1818
// unregister() to register() below. Note this comes with some pitfalls.
1919
// Learn more about service workers: http://bit.ly/CRA-PWA
20-
serviceWorker.unregister();
20+
serviceWorker.unregister();

‎src/views/Base/DropOverlay/DropOverlay.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
3+
const DropOverlay = (props) => (<div data-test="dropOverlay"
4+
style={{
5+
position: 'absolute',
6+
top: 0,
7+
left: 0,
8+
height: '100%',
9+
width: '100%',
10+
zIndex: 1,
11+
opacity: 0.5,
12+
backgroundColor: 'gray',
13+
}}
14+
/>);
15+
16+
export default DropOverlay;

‎src/views/Base/DropOverlay/DropOverlay.test.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import {shallow} from "enzyme";
3+
import toJson from "enzyme-to-json";
4+
import DropOverlay from "./DropOverlay";
5+
import {findByTestAttr, testStore} from "../../../../Utils";
6+
7+
8+
const setUp = (intialState = {}, props = {}) => {
9+
const store = testStore(intialState);
10+
11+
const component = shallow(<DropOverlay {...props} store={store}/>);
12+
return component;
13+
};
14+
15+
16+
describe('Drop Overlay', function () {
17+
describe('renders', function () {
18+
let wrapper;
19+
beforeEach(() => {
20+
const initialState = {};
21+
22+
const props = {};
23+
wrapper = setUp(initialState, props)
24+
});
25+
26+
it('should render without crashing', function () {
27+
const component = findByTestAttr(wrapper, "dropOverlay");
28+
expect(component).toHaveLength(1);
29+
});
30+
31+
it('should match snapshot', function () {
32+
expect(toJson(wrapper)).toMatchSnapshot();
33+
});
34+
35+
});
36+
});

‎src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Drop Overlay renders should match snapshot 1`] = `
4+
<div
5+
data-test="dropOverlay"
6+
style={
7+
Object {
8+
"backgroundColor": "gray",
9+
"height": "100%",
10+
"left": 0,
11+
"opacity": 0.5,
12+
"position": "absolute",
13+
"top": 0,
14+
"width": "100%",
15 F438 +
"zIndex": 1,
16+
}
17+
}
18+
/>
19+
`;

‎src/views/Base/FileOperations/FileUploadBox.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {NativeTypes} from 'react-dnd-html5-backend'
2+
import {useDrop} from 'react-dnd'
3+
import React from "react";
4+
import DropOverlay from "../DropOverlay/DropOverlay";
5+
import * as PropTypes from 'prop-types';
6+
7+
8+
export const FileUploadBox = (props) => {
9+
const {onDrop} = props
10+
const [{canDrop, isOver}, drop] = useDrop({
11+
accept: [NativeTypes.FILE],
12+
drop(item, monitor) {
13+
if (onDrop) {
14+
onDrop(props, monitor)
15+
}
16+
},
17+
collect: (monitor) => ({
18+
isOver: monitor.isOver(),
19+
canDrop: monitor.canDrop(),
20+
}),
21+
})
22+
const isActive = canDrop && isOver
23+
return (
24+
<div ref={drop}>
25+
{/*Display overlay if file is about to be dropped*/}
26+
{isActive && <DropOverlay/>}
27+
{props.children}
28+
</div>
29+
)
30+
}
31+
32+
FileUploadBox.propTypes = {
33+
onDrop: PropTypes.func
34+
}
35+
36+
export default FileUploadBox;

0 commit comments

Comments
 (0)
0