Sha256: c20d53a5c92796e97f426e134844a69cb19c7e3b04dc986522fb948efeace9a1
Contents?: true
Size: 1.11 KB
Versions: 12
Compression:
Stored size: 1.11 KB
Contents
import React, { useState } from "react";
import { SelectableList, Draggable, DraggableProvider } from "../../";
// Initial items to be dragged
const data = [
{
id: "1",
text: "Task 1",
},
{
id: "2",
text: "Task 2",
},
{
id: "3",
text: "Task 3",
},
{
id: "4",
text: "Task 4",
},
];
const DraggableDefault = (props) => {
const [initialState, setInitialState] = useState(data);
return (
<>
<DraggableProvider initialItems={data}
onReorder={(items) => setInitialState(items)}
>
<Draggable.Container {...props}>
<SelectableList variant="checkbox">
{initialState.map(({ id, text }) => (
<Draggable.Item dragId={id}
key={id}
>
<SelectableList.Item
label={text}
name={id}
value={id}
{...props}
/>
</Draggable.Item>
))}
</SelectableList>
</Draggable.Container>
</DraggableProvider>
</>
);
};
export default DraggableDefault;
Version data entries
12 entries across 12 versions & 2 rubygems