import { ReactElement, useRef } from "react" import Draggable from "react-draggable" export interface RackProps { id: string objects: E[] onChange: (objects: E[]) => void canDetach: (ref: HTMLDivElement) => boolean onElementDetached: (ref: HTMLDivElement, el: E) => void render: (e: E) => ReactElement } interface RackItemProps { item: E onTryDetach: (ref: HTMLDivElement, el: E) => void render: (e: E) => ReactElement } /** * A container of draggable objects * */ export function Rack({ id, objects, onChange, canDetach, onElementDetached, render, }: RackProps) { return (
{objects.map((element) => ( { if (!canDetach(ref)) return const index = objects.findIndex( (o) => o.key === element.key, ) onChange(objects.toSpliced(index, 1)) onElementDetached(ref, element) }} /> ))}
) } function RackItem({ item, onTryDetach, render, }: RackItemProps) { const divRef = useRef(null) return ( onTryDetach(divRef.current!, item)}>
{render(item)}
) }