Conversation
|
| function Sortable({ id, index, children }: SortableProps) { | ||
| const { ref } = useSortable({ id, index }); | ||
|
|
||
| return ( | ||
| <li ref={ref} className={c.item}> | ||
| <CaretSort /> | ||
| {children} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // function SortableList() { | ||
| // const items = [1, 2, 3, 4]; | ||
|
|
||
| // return ( | ||
| // <ul className={c.list}> | ||
| // {items.map((id, index) => ( | ||
| // <Sortable key={id} id={id} index={index} /> | ||
| // ))} | ||
| // </ul> | ||
| // ); | ||
| // } |
There was a problem hiding this comment.
TODO: pull sortable out into a reusable component
There was a problem hiding this comment.
TODO: adjust behavior of sorting so that items don't move until dropped. This is probably deferrable since it's a UX issue. There are other higher priority concerns.
Here's a demo of the desirable behavior though: https://shadcn-drag-and-drop.vercel.app/
| </DragDropProvider> | ||
| <div> | ||
| <Button type='button' onClick={addFontFamily} size='s'> | ||
| + Add Font Family |
There was a problem hiding this comment.
TODO: add plus icon
|
|
||
| return ( | ||
| <li ref={ref} className={c.item}> | ||
| <CaretSort /> |
There was a problem hiding this comment.
TODO: add drag handle icon
| import { move } from '@dnd-kit/helpers'; | ||
| import { DragDropProvider } from '@dnd-kit/react'; | ||
| import { useSortable } from '@dnd-kit/react/sortable'; |
There was a problem hiding this comment.
@drwpow I have this as a draft PR because I'd like to get your thoughts on using this package before going further. Are there alternatives we should explore instead?
There was a problem hiding this comment.
Nah go for it. For the token lab we can add anything here. DND is a great library (used it a little, liked it)
2 participants
Changes
Adds sortable font family input
tz-font-family.mov
How to Review
How can a reviewer review your changes? What should be kept in mind for this review?