| 10 | } |
| 11 | |
| 12 | export function DropTarget() { |
| 13 | let [dropped, setDropped] = React.useState<DroppedItem[] | null>(null); |
| 14 | let ref = React.useRef(null); |
| 15 | let {dropProps, isDropTarget} = useDrop({ |
| 16 | ref, |
| 17 | async onDrop(e) { |
| 18 | let items = await Promise.all( |
| 19 | (e.items as TextDropItem[]) |
| 20 | .filter( |
| 21 | item => |
| 22 | item.kind === 'text' && |
| 23 | (item.types.has('text/plain') || item.types.has('my-app-custom-type')) |
| 24 | ) |
| 25 | .map(async (item: TextDropItem) => { |
| 26 | if (item.types.has('my-app-custom-type')) { |
| 27 | return JSON.parse(await item.getText('my-app-custom-type')); |
| 28 | } else { |
| 29 | return {message: await item.getText('text/plain')}; |
| 30 | } |
| 31 | }) |
| 32 | ); |
| 33 | setDropped(items); |
| 34 | } |
| 35 | }); |
| 36 | |
| 37 | let message: ReactNode = <div key="drop here">'Drop here'</div>; |
| 38 | if (dropped) { |
| 39 | message = dropped.map((d, index) => { |
| 40 | let m: ReactNode = d.message; |
| 41 | if (d.style === 'bold') { |
| 42 | m = <strong key={index}>{m}</strong>; |
| 43 | } else if (d.style === 'italic') { |
| 44 | m = <em key={index}>{m}</em>; |
| 45 | } |
| 46 | return <div key={index}>{m}</div>; |
| 47 | }); |
| 48 | } |
| 49 | |
| 50 | return ( |
| 51 | <div |
| 52 | {...dropProps} |
| 53 | role="button" |
| 54 | tabIndex={0} |
| 55 | ref={ref} |
| 56 | className={`droppable ${isDropTarget ? 'target' : ''}`}> |
| 57 | {message} |
| 58 | </div> |
| 59 | ); |
| 60 | } |