docs: add stress test story for interactive elements

Author: Clauderic Demers

src/.stories/index.js

@@ -15,6 +15,7 @@ import random from 'lodash/random';
 import classNames from 'classnames';
 
 import GroupedItems from './grouping-items';
+import InteractiveElements from './interactive-elements-stress-test';
 
 function getItems(count, height) {
   var heights = [65, 110, 140, 65, 90, 65];
@@ -753,3 +754,12 @@ storiesOf('Advanced examples | Re-rendering before sorting', module)
       </div>
     );
   });
+
+storiesOf('Stress Testing | Nested elements', module).add(
+  'Interactive elements',
+  () => (
+    <div className={style.root}>
+      <InteractiveElements />
+    </div>
+  ),
+);

src/.stories/interactive-elements-stress-test/Item/Item.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {sortableElement} from '../../../../src';
+
+import styles from './Item.scss';
+
+function Item(props) {
+  const {children} = props;
+
+  return <div className={styles.root}>{children}</div>;
+}
+
+export default sortableElement(Item);

src/.stories/interactive-elements-stress-test/Item/Item.scss

@@ -0,0 +1,45 @@
+$color: #333;
+$white: #fff;
+$backgroundColor: $white;
+
+$boxShadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2);
+
+$fontWeight-regular: 400;
+$fontWeight-bold: 600;
+
+$borderRadius: 3px;
+$borderWidth: 1px;
+$borderColor: #efefef;
+
+.root {
+  display: block;
+  width: 250px;
+  padding: 20px;
+  background-color: $backgroundColor;
+  border-bottom: $borderWidth solid #efefef;
+  box-sizing: border-box;
+  user-select: none;
+
+  color: $color;
+  font-family: sans-serif;
+  font-weight: $fontWeight-regular;
+
+  > * {
+    display: block;
+    width: 100%;
+    font-size: 14px;
+  }
+
+  > input,
+  > textarea {
+    padding: 5px;
+    border: 1px solid #e0e0e0;
+    box-sizing: border-box;
+  }
+
+  label {
+    input {
+      margin-right: 0.5em;
+    }
+  }
+}

src/.stories/interactive-elements-stress-test/Item/index.js

@@ -0,0 +1,3 @@
+import Item from './Item';
+
+export default Item;

src/.stories/interactive-elements-stress-test/List.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {sortableContainer} from '../../../src';
+
+import Item from './Item';
+
+function List({items}) {
+  return (
+    <div>
+      {items.map(([key, children], index) => {
+        return (
+          <Item key={key} index={index}>
+            {children}
+          </Item>
+        );
+      })}
+    </div>
+  );
+}
+
+export default sortableContainer(List);

src/.stories/interactive-elements-stress-test/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import arrayMove from 'array-move';
+
+import SortableList from './List';
+
+const items = {
+  input: <input placeholder="Regular text input" />,
+  textarea: <textarea placeholder="Textarea input" />,
+  select: (
+    <select>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+  ),
+  checkbox: (
+    <>
+      <label>
+        <input type="checkbox" name="checkbox" />
+        Checkbox 1
+      </label>
+      <label>
+        <input type="checkbox" name="checkbox" />
+        Checkbox 2
+      </label>
+    </>
+  ),
+  radio: (
+    <>
+      <label>
+        <input type="radio" name="option" />
+        Option 1
+      </label>
+      <label>
+        <input type="radio" name="option" />
+        Option 2
+      </label>
+    </>
+  ),
+  range: <input type="range" min="1" max="100" />,
+  contentEditable: (
+    <div
+      contentEditable
+      dangerouslySetInnerHTML={{
+        __html: 'Lorem ipsum <strong>dolor sit</strong> amet',
+      }}
+    />
+  ),
+};
+
+export default class InteractiveElements extends React.Component {
+  state = {
+    items: Object.entries(items),
+  };
+
+  render() {
+    return (
+      <SortableList
+        // The distance prop isn't strictly required for this example, but it is recommended
+        // to set it to a low value for sortable items with nested interactive elements
+        // such as clickable labels for checkbox / radio inputs
+        distance={2}
+        items={this.state.items}
+        onSortEnd={this.onSortEnd}
+      />
+    );
+  }
+
+  onSortEnd = ({oldIndex, newIndex}) => {
+    if (oldIndex === newIndex) {
+      return;
+    }
+
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex),
+    }));
+  };
+}