Sha256: 5472d939eed6f11990705cee3b8d4fc9f5bd5836c7cc6313ae29ae1657ded182

Contents?: true

Size: 908 Bytes

Versions: 5

Compression:

Stored size: 908 Bytes

Contents

import React, { useState } from "react";
import { DraggableProvider, List, ListItem } from "../../";

// Initial items to be dragged
const data = [
  {
    id: "1",
    text: "Philadelphia",
  },
  {
    id: "2",
    text: "New Jersey",
  },
  {
    id: "3",
    text: "Maryland",
  },
  {
    id: "4",
    text: "Connecticut",
  },
];

const DraggableWithList = (props) => {
  const [initialState, setInitialState] = useState(data);


  return (
    <>
    <DraggableProvider initialItems={data}
        onChange={(items) => setInitialState(items)}
    >
        <List draggable
            {...props}
        >
            {initialState.map(({ id, text }) => (
                <ListItem id={id}
                    key={id}
                >
                    {text}
                </ListItem>
            ))}
        </List>
    </DraggableProvider>
    </>

  );
};

export default DraggableWithList;

Version data entries

5 entries across 5 versions & 2 rubygems

Version Path
playbook_ui_docs-13.29.0.pre.alpha.removeduplicatekitexampleclass3063 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
playbook_ui-13.29.0.pre.alpha.removeduplicatekitexampleclass3063 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
playbook_ui_docs-13.29.0.pre.alpha.testingcollapsibleissue3052 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
playbook_ui-13.29.0.pre.alpha.testingcollapsibleissue3052 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
playbook_ui-13.29.0 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx