diff --git a/packages/react-core/src/components/DragDrop/examples/DragDrop.md b/packages/react-core/src/components/DragDrop/examples/DragDrop.md
index c22c0b47c33..b3a379223ee 100644
--- a/packages/react-core/src/components/DragDrop/examples/DragDrop.md
+++ b/packages/react-core/src/components/DragDrop/examples/DragDrop.md
@@ -1,175 +1,43 @@
---
id: Drag and drop
section: components
-propComponents: [
- DragDrop,
- Draggable,
- Droppable,
- DraggableItemPosition
-]
+propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
beta: true
---
-You can use `DragDrop` to move items in or between lists. `DragDrop`s should contain `Droppable`s which contain `Draggable`s.
+You can use the `DragDrop` component to move items in or between lists. The `DragDrop` component should contain `Droppable` components which contain `Draggable` components.
-```js noLive
+```ts noLive
import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
- {/* DragDrop houses the context for dragging and dropping */}
-
-
- You can put anything here! It will be wrapped in a styled div.
-
-
- You can have as many Draggables as you like.
-
-
- {/* You can also have many droppables! */}
-
-
-
+const DragDropCodeSample: React.FunctionComponent = () => (
+
+ {' '}
+ {/* DragDrop houses the context for dragging and dropping */}
+
+ You can put anything here! It will be wrapped in a styled div.
+ You can have as many Draggables as you like.
+
+
+ {' '}
+ {/* You can also have many droppables! */}
+
+
+
+);
```
+
Note: Keyboard accessibility and screen reader accessibility are still in development.
## Examples
-### Basic
-
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
-
-const getItems = count =>
- Array.from({ length: count }, (v, k) => k).map(k => ({
- id: `item-${k}`,
- content: `item ${k} `.repeat(k === 4 ? 20 : 1)
- }));
-
-const reorder = (list, startIndex, endIndex) => {
- const result = Array.from(list);
- const [removed] = result.splice(startIndex, 1);
- result.splice(endIndex, 0, removed);
- return result;
-};
-
-Basic = () => {
- const [items, setItems] = React.useState(getItems(10));
-
- function onDrop(source, dest) {
- if (dest) {
- const newItems = reorder(
- items,
- source.index,
- dest.index
- );
- setItems(newItems);
- return true;
- }
- return false;
- }
+### Basic
- return (
-
-
- {items.map(({ id, content }, i) =>
-
- {content}
-
- )}
-
-
- );
-}
+```ts file="./DragDropBasic.tsx"
```
### Multiple lists
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
-
-const getItems = (count, start) =>
- Array.from({ length: count }, (v, k) => k).map(k => ({
- id: `item-${k + start}`,
- content: `item ${k + start} `.repeat(k === 4 ? 20 : 1)
- }));
-
-const reorder = (list, startIndex, endIndex) => {
- const result = Array.from(list);
- const [removed] = result.splice(startIndex, 1);
- result.splice(endIndex, 0, removed);
- return result;
-};
-
-const move = (source, destination, sourceIndex, destIndex) => {
- const sourceClone = Array.from(source);
- const destClone = Array.from(destination);
- const [removed] = sourceClone.splice(sourceIndex, 1);
- destClone.splice(destIndex, 0, removed);
- return [sourceClone, destClone];
-};
-
-MultiList = () => {
- const [items, setItems] = React.useState({
- items1: getItems(10, 0),
- items2: getItems(5, 10)
- });
-
- function onDrop(source, dest) {
- console.log(source, dest);
- if (dest) {
- if (source.droppableId === dest.droppableId) {
- const newItems = reorder(
- source.droppableId === 'items1' ? items.items1 : items.items2,
- source.index,
- dest.index
- );
- if (source.droppableId === 'items1') {
- setItems({
- items1: newItems,
- items2: items.items2
- });
- } else {
- setItems({
- items1: items.items1,
- items2: newItems
- });
- }
- } else {
- const [newItems1, newItems2] = move(
- source.droppableId === 'items1' ? items.items1 : items.items2,
- dest.droppableId === 'items1' ? items.items1 : items.items2,
- source.index,
- dest.index
- );
- setItems({
- items1: source.droppableId === 'items1' ? newItems1 : newItems2,
- items2: dest.droppableId === 'items1' ? newItems1 : newItems2
- });
- }
- return true;
- }
- return false;
- }
-
- return (
-
-
- {Object.entries(items).map(([key, subitems]) =>
-
-
- {subitems.map(({ id, content }, i) =>
-
- {content}
-
- )}
-
-
- )}
-
-
- );
-}
+```ts file="./DragDropMultipleLists.tsx"
```
-
diff --git a/packages/react-core/src/components/DragDrop/examples/DragDropBasic.tsx b/packages/react-core/src/components/DragDrop/examples/DragDropBasic.tsx
new file mode 100644
index 00000000000..fd2acf5d47d
--- /dev/null
+++ b/packages/react-core/src/components/DragDrop/examples/DragDropBasic.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
+
+interface ItemType {
+ id: string;
+ content: string;
+}
+
+interface SourceType {
+ droppableId: string;
+ index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number) =>
+ Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+ id: `item-${idx}`,
+ content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+ }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+ const result = list;
+ const [removed] = result.splice(startIndex, 1);
+ result.splice(endIndex, 0, removed);
+ return result;
+};
+
+export const DragDropBasic: React.FunctionComponent = () => {
+ const [items, setItems] = React.useState(getItems(10));
+
+ function onDrop(source: SourceType, dest: DestinationType) {
+ if (dest) {
+ const newItems = reorder(items, source.index, dest.index);
+ setItems(newItems);
+
+ return true;
+ }
+ return false;
+ }
+
+ return (
+
+
+ {items.map(({ content }, i) => (
+
+ {content}
+
+ ))}
+
+
+ );
+};
diff --git a/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx b/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
new file mode 100644
index 00000000000..07bfb9cbd66
--- /dev/null
+++ b/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+
+interface ItemType {
+ id: string;
+ content: string;
+}
+
+interface SourceType {
+ droppableId: string;
+ index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number, startIndex: number) =>
+ Array.from({ length: count }, (_, idx) => idx + startIndex).map(idx => ({
+ id: `item-${idx}`,
+ content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+ }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+ const result = list;
+ const [removed] = result.splice(startIndex, 1);
+ result.splice(endIndex, 0, removed);
+ return result;
+};
+
+const move = (source: ItemType[], destination: ItemType[], sourceIndex: number, destIndex: number) => {
+ const sourceClone = source;
+ const destClone = destination;
+ const [removed] = sourceClone.splice(sourceIndex, 1);
+ destClone.splice(destIndex, 0, removed);
+ return [sourceClone, destClone];
+};
+
+export const DragDropMultipleLists: React.FunctionComponent = () => {
+ const [items, setItems] = React.useState({
+ items1: getItems(10, 0),
+ items2: getItems(5, 10)
+ });
+
+ function onDrop(source: SourceType, dest: DestinationType) {
+ // eslint-disable-next-line no-console
+ console.log(source, dest);
+ if (dest) {
+ if (source.droppableId === dest.droppableId) {
+ const newItems = reorder(
+ source.droppableId === 'items1' ? items.items1 : items.items2,
+ source.index,
+ dest.index
+ );
+ if (source.droppableId === 'items1') {
+ setItems({
+ items1: newItems,
+ items2: items.items2
+ });
+ } else {
+ setItems({
+ items1: items.items1,
+ items2: newItems
+ });
+ }
+ } else {
+ const [newItems1, newItems2] = move(
+ source.droppableId === 'items1' ? items.items1 : items.items2,
+ dest.droppableId === 'items1' ? items.items1 : items.items2,
+ source.index,
+ dest.index
+ );
+ setItems({
+ items1: source.droppableId === 'items1' ? newItems1 : newItems2,
+ items2: dest.droppableId === 'items1' ? newItems1 : newItems2
+ });
+ }
+ return true;
+ }
+ return false;
+ }
+
+ return (
+
+
+ {Object.entries(items).map(([key, subitems]) => (
+
+
+ {subitems.map(({ id, content }) => (
+
+ {content}
+
+ ))}
+
+
+ ))}
+
+
+ );
+};