File size: 3,067 Bytes
8a37e0a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box } from '@invoke-ai/ui-library';
import { getStore } from 'app/store/nanostores/store';
import { useAppDispatch } from 'app/store/storeHooks';
import type { AnyDndTarget } from 'features/dnd/dnd';
import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
import type { DndTargetState } from 'features/dnd/types';
import { memo, useEffect, useRef, useState } from 'react';
const sx = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
w: 'full',
h: 'full',
pointerEvents: 'auto',
// We must disable pointer events when idle to prevent the overlay from blocking clicks
'&[data-dnd-state="idle"]': {
pointerEvents: 'none',
},
} satisfies SystemStyleObject;
type Props<T extends AnyDndTarget> = {
dndTarget: T;
dndTargetData: ReturnType<T['getData']>;
label: string;
isDisabled?: boolean;
};
export const DndDropTarget = memo(<T extends AnyDndTarget>(props: Props<T>) => {
const { dndTarget, dndTargetData, label, isDisabled } = props;
const [dndState, setDndState] = useState<DndTargetState>('idle');
const ref = useRef<HTMLDivElement>(null);
const dispatch = useAppDispatch();
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
if (isDisabled) {
return;
}
const { dispatch, getState } = getStore();
return combine(
dropTargetForElements({
element,
canDrop: ({ source }) => {
// TS cannot infer `dndTargetData` but we've just checked it.
// TODO(psyche): Figure out how to satisfy TS.
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
const arg = { sourceData: source.data, targetData: dndTargetData, dispatch, getState } as any;
return dndTarget.isValid(arg);
},
onDragEnter: () => {
setDndState('over');
},
onDragLeave: () => {
setDndState('potential');
},
getData: () => dndTargetData,
}),
monitorForElements({
canMonitor: ({ source }) => {
// TS cannot infer `dndTargetData` but we've just checked it.
// TODO(psyche): Figure out how to satisfy TS.
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
const arg = { sourceData: source.data, targetData: dndTargetData, dispatch, getState } as any;
return dndTarget.isValid(arg);
},
onDragStart: () => {
setDndState('potential');
},
onDrop: () => {
setDndState('idle');
},
})
);
}, [dispatch, isDisabled, dndTarget, dndTargetData]);
return (
<Box ref={ref} sx={sx} data-dnd-state={dndState}>
<DndDropOverlay dndState={dndState} label={label} />
</Box>
);
});
DndDropTarget.displayName = 'DndDropTarget';
|