Sha256: a4a4b54eff8a68cfc3eae26db03c75494df99c0950df47fca0757a629b96c8bf

Contents?: true

Size: 1.07 KB

Versions: 948

Compression:

Stored size: 1.07 KB

Contents

import React, { useState } from "react";
import { SelectableList, DraggableProvider } from "playbook-ui";

// Initial items to be dragged
const data = [
  {
    id: "41",
    text: "Task 1",
  },
  {
    id: "42",
    text: "Task 2",
  },
  {
    id: "43",
    text: "Task 3",
  },
  {
    id: "44",
    text: "Task 4",
  },
];

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

  return (
    <>
    <DraggableProvider initialItems={data}
        onReorder={(items) => setInitialState(items)}
    >
          <SelectableList enableDrag
              variant="radio"
              {...props}
              >
            {initialState.map(({ id, text }) => (
                <SelectableList.Item 
                    dragId={id}
                    key={id}
                    label={text} 
                    name="radio-test" 
                    value={id}
                    {...props}
                />
            ))}
          </SelectableList>
    </DraggableProvider>
    </>

  );
};

export default DraggableWithSelectableList

Version data entries

948 entries across 948 versions & 2 rubygems

Version Path
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5437 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5437 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.12.0.pre.rc.6 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.12.0.pre.rc.6 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5415 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5415 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5413 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5413 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.12.0.pre.rc.5 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.12.0.pre.rc.5 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5409 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5409 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392 app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx