adding examples for mixed sizes (#1618)

adding examples for mixed sizes

stories/55-mixed-sizes.stories.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import MixedSizedItems from './src/mixed-sizes/mixed-size-items';
+import MixedSizedLists from './src/mixed-sizes/mixed-size-lists';
+
+storiesOf('mixed sizes', module)
+  .add('with a super large draggable', () => <MixedSizedItems />)
+  .add('with a super large droppable', () => <MixedSizedLists />);

stories/src/mixed-sizes/mixed-size-items.jsx

@@ -0,0 +1,35 @@
+// @flow
+import React, { useState } from 'react';
+import { quotes as initial } from '../data';
+import type { Quote } from '../types';
+import QuoteList from '../primatives/quote-list';
+import { DragDropContext, type DropResult } from '../../../src';
+import reorder from '../reorder';
+
+function getQuotes() {
+  const large: Quote = {
+    ...initial[0],
+    content: Array.from({ length: 20 })
+      .map(() => 'some really long text')
+      .join(' '),
+  };
+
+  const quotes: Quote[] = [large, ...initial.slice(1)];
+  return quotes;
+}
+
+export default function App() {
+  const [quotes, setQuotes] = useState(() => getQuotes());
+  function onDragEnd(result: DropResult) {
+    if (!result.destination) {
+      return;
+    }
+    setQuotes(reorder(quotes, result.source.index, result.destination.index));
+  }
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <p>This is a bit lame right now</p>
+      <QuoteList quotes={quotes} />
+    </DragDropContext>
+  );
+}

stories/src/mixed-sizes/mixed-size-lists.jsx

@@ -0,0 +1,25 @@
+// @flow
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { getQuotes } from '../data';
+import QuoteList from '../primatives/quote-list';
+import { DragDropContext } from '../../../src';
+import { noop } from '../../../src/empty';
+
+const Parent = styled.div`
+  display: flex;
+`;
+
+export default function App() {
+  const [first] = useState(() => getQuotes(3));
+  const [second] = useState(() => getQuotes(3));
+  return (
+    <DragDropContext onDragEnd={noop}>
+      <p>This is a bit lame right now</p>
+      <Parent>
+        <QuoteList listId="first" quotes={first} />
+        <QuoteList listId="second" quotes={second} style={{ width: 800 }} />
+      </Parent>
+    </DragDropContext>
+  );
+}