How to use the react-dnd-html5-backend.NativeTypes.URL function in react-dnd-html5-backend
To help you get started, we’ve selected a few react-dnd-html5-backend examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
edtr-io / edtr-io / packages / plugins / rows / src / editor / render.tsx View on Github 
}) {
const container = React.useRef(null)
const dispatch = useScopedDispatch()
const store = useScopedStore()
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
const [collectedDragProps, drag, dragPreview] = useDrag({
item: { id: row.id, index, type: 'row' },
collect(monitor) {
return {
isDragging: !!monitor.isDragging()
}
}
})
const drop = useDrop({
accept: ['row', NativeTypes.FILE, NativeTypes.URL],
hover(item: RowDragObject, monitor) {
if (!container.current) return
monitor.getItem().boundingRect = container.current.getBoundingClientRect()
if (item.type !== 'row') return
const dragIndex = item.index
const hoverIndex = index
// Don't replace items with themselves
if (dragIndex === hoverIndex) return
const draggingAbove = isDraggingAbove(monitor)
if (dragIndex < hoverIndex && draggingAbove) return
if (dragIndex > hoverIndex && !draggingAbove) return
moveRow(dragIndex, hoverIndex)
// Note: we're mutating the monitor item here!drop(item: RowDragObject, monitor) {
const type = monitor.getItemType()
if (type !== NativeTypes.FILE && type !== NativeTypes.URL) return
// handled in nested drop zone
if (monitor.didDrop()) return
const dropIndex = index
let transfer: DataTransfer
if (type === NativeTypes.FILE) {
const files: File[] = monitor.getItem().files
transfer = createFakeDataTransfer(files)
} else {
// NativeTypes.URL
const urls: string[] = monitor.getItem().urls
transfer = createFakeDataTransfer([], urls[0])
}
for (const key in plugins) {
const { onPaste } = plugins[key]const Container = () => {
const [dustbins, setDustbins] = useState([
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null,
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
])
const [boxes, setBoxes] = useState([
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER },
])
const [droppedBoxNames, setDroppedBoxNames] = useState([])
useEffect(() => {
const interval = setInterval(() => {
setBoxes(shuffle(boxes))
setDustbins(shuffle(dustbins))
}, 1000)
return () => clearInterval(interval)const Container: React.FC = () => {
const [dustbins, setDustbins] = useState([
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null,
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
])
const [boxes, setBoxes] = useState([
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER },
])
const [droppedBoxNames, setDroppedBoxNames] = useState([])
useEffect(() => {
const interval = setInterval(() => {
setBoxes(shuffle(boxes))
setDustbins(shuffle(dustbins))
}, 1000)const Container: React.FC = () => {
const [dustbins, setDustbins] = useState([
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null,
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
])
const [boxes, setBoxes] = useState([
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER },
])
const [droppedBoxNames, setDroppedBoxNames] = useState([])
useEffect(() => {
const interval = setInterval(() => {
setBoxes(shuffle(boxes))
setDustbins(shuffle(dustbins))
}, 1000)constructor(props: {}) {
super(props)
this.state = {
dustbins: [
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null,
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
],
boxes: [
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER },
],
droppedBoxNames: [],
}
}export const EditorView = ({ spacing }: EditorViewProps) => {
const dispatch = useDispatch();
const selectedDiagramId = useStore(s => getDiagramId(s));
const editor = useStore(s => getEditor(s));
const editorSize = editor.size;
const zoom = useStore(s => s.ui.zoom);
const zoomedWidth = editorSize.x * zoom;
const zoomedHeight = editorSize.y * zoom;
const renderer = React.useContext(RendererContext);
const ref = React.useRef();
const [, drop] = useDrop({
accept: [
NativeTypes.URL,
NativeTypes.FILE,
NativeTypes.TEXT,
'DND_ASSET',
'DND_ICON'
],
drop: (item: any, monitor: DropTargetMonitor) => {
if (!monitor || !ref.current) {
return;
}
const offset = monitor.getSourceClientOffset() || monitor.getClientOffset()!;
const componentRect = (findDOMNode(ref.current) as HTMLElement)!.getBoundingClientRect();
let x = (offset.x - spacing - componentRect.left) / zoom;
let y = (offset.y - spacing - componentRect.top) / zoom;data () {
return {
dustbins: [
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null }
],
boxes: [
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER }
],
droppedBoxNames: []
}
},
methods: {const Container: React.FC = () => {
const [dustbins, setDustbins] = useState([
{ accepts: [ItemTypes.GLASS], lastDroppedItem: null },
{ accepts: [ItemTypes.FOOD], lastDroppedItem: null },
{
accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
lastDroppedItem: null,
},
{ accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
])
const [boxes] = useState([
{ name: 'Bottle', type: ItemTypes.GLASS },
{ name: 'Banana', type: ItemTypes.FOOD },
{ name: 'Magazine', type: ItemTypes.PAPER },
])
const [droppedBoxNames, setDroppedBoxNames] = useState([])
function isDropped(boxName: string) {
return droppedBoxNames.indexOf(boxName) > -1
}react-dnd-html5-backend
HTML5 backend for React DnD
