/// import { Cell, computed, Default, handler, ifElse, NAME, pattern, UI, } from "commontools"; import Counter from "../counter.tsx"; interface Item { title: string; [UI]?: JSX.Element; } interface DragDropDemoInput { availableItems: Default; droppedItems: Cell; } interface DragDropDemoOutput { availableItems: Default; droppedItems: Cell; } // Handler to remove an item from the dropped list const removeItem = handler< unknown, { droppedItems: Cell; item: Cell } >( (_, { droppedItems, item }) => { const current = droppedItems.get(); const index = current.findIndex((el) => Cell.equals(item, el)); if (index >= 0) { droppedItems.set(current.toSpliced(index, 1)); } }, ); export default pattern( ({ availableItems, droppedItems }) => { const counter = Counter({ value: 5 }); // Compute the items list const items = computed(() => { const defaultItems: Item[] = [ { title: "Item A", [UI]:
Hello World!!!
}, counter as unknown as Item, { title: "Item C" }, ]; return availableItems.length > 0 ? availableItems : defaultItems; }); // Check if dropped items is empty const isEmpty = computed(() => droppedItems.get().length === 0); return { [NAME]: "Drag Drop Demo", [UI]: (

Available Items

{items.map((item) => (
{item.title}
))}
{ const sourceItem = e.detail.sourceCell.get() as Item; // Append the dropped item to the list droppedItems.push(sourceItem); }} >

Drop Zone

{ifElse( isEmpty,

Drop items here

,
{droppedItems.map((item) => (
{item.title} ×
))}
, )}
), availableItems, droppedItems, }; }, );