Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-20 16:49:52 +00:00
Code Issues Projects Releases Wiki Activity

Use hooks for DropTarget

Browse source
This commit is contained in:
Jordan Eldredge 2018-10-28 21:20:56 -07:00
parent 3dc8dc5af6
commit f0db3adf7e
1 changed files with 42 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

80
js/components/DropTarget.tsx
View file

@ -1,4 +1,5 @@
import React from "react";
// @ts-ignore #hook-types
import React, { useCallback } from "react";
interface Coord {
x: number;
@ -9,41 +10,44 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
handleDrop(e: React.DragEvent<HTMLDivElement>, coord: Coord): void;
}
export default class DropTarget extends React.Component<Props> {
supress(e: React.DragEvent<HTMLDivElement>) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = "link";
e.dataTransfer.effectAllowed = "link";
}
handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
this.supress(e);
// TODO: We could probably move this coordinate logic into the playlist.
// I think that's the only place it gets used.
const { currentTarget } = e;
if (!(currentTarget instanceof Element)) {
return;
}
const { left: x, top: y } = currentTarget.getBoundingClientRect();
this.props.handleDrop(e, { x, y });
};
render() {
const {
// eslint-disable-next-line no-shadow, no-unused-vars
handleDrop,
...passThroughProps
} = this.props;
return (
<div
{...passThroughProps}
onDragStart={this.supress}
onDragEnter={this.supress}
onDragOver={this.supress}
onDrop={this.handleDrop}
/>
);
}
function supress(e: React.DragEvent<HTMLDivElement>) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = "link";
e.dataTransfer.effectAllowed = "link";
}
const DropTarget = (props: Props) => {
const onDrop = useCallback(
(e: React.DragEvent<HTMLDivElement>) => {
supress(e);
// TODO: We could probably move this coordinate logic into the playlist.
// I think that's the only place it gets used.
const { currentTarget } = e;
if (!(currentTarget instanceof Element)) {
return;
}
const { left: x, top: y } = currentTarget.getBoundingClientRect();
props.handleDrop(e, { x, y });
},
[props.handleDrop]
);
const {
// eslint-disable-next-line no-shadow, no-unused-vars
handleDrop,
...passThroughProps
} = props;
return (
<div
{...passThroughProps}
onDragStart={supress}
onDragEnter={supress}
onDragOver={supress}
onDrop={onDrop}
/>
);
};
export default DropTarget;