Merge pull request #111 from joshwcomeau/fix/106

Fix/106
joshwcomeau · Dec 4, 2016 · fd380b0 · fd380b0
2 parents 7b37766 + de22269
commit fd380b0
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 2 deletions.
diff --git a/src/FlipMove.js b/src/FlipMove.js
@@ -196,7 +196,9 @@ class FlipMove extends Component {
 
         // We need to take the items out of the "flow" of the document, so that
         // its siblings can move to take its place.
-        removeNodeFromDOMFlow(childData);
+        if (childData.boundingBox) {
+          removeNodeFromDOMFlow(childData);
+        }
       });
 
       if (maintainContainerHeight) {
@@ -397,7 +399,7 @@ class FlipMove extends Component {
       this.parentData.domNode
     );
 
-    this.props.children.forEach((child) => {
+    this.state.children.forEach((child) => {
       // It is possible that a child does not have a `key` property;
       // Ignore these children, they don't need to be moved.
       if (!child.key) {

diff --git a/stories/helpers/Controls.js b/stories/helpers/Controls.js
@@ -15,8 +15,10 @@ const Controls = ({
   onRestore,
   onRotate,
   onShuffle,
+  onRestartSequence,
   numOfCurrentItems,
   numOfTotalItems,
+  numOfStepsInSequence,
 }) => (
   <div className="controls">
     <button
@@ -58,6 +60,14 @@ const Controls = ({
     >
       Rotate Items
     </button>
+
+    <button
+      onClick={() => onRestartSequence()}
+      style={styles.button}
+      disabled={numOfStepsInSequence === 0}
+    >
+      Restart Sequence
+    </button>
   </div>
 );
 
@@ -67,8 +77,14 @@ Controls.propTypes = {
   onRestore: PropTypes.func.isRequired,
   onRotate: PropTypes.func.isRequired,
   onShuffle: PropTypes.func.isRequired,
+  onRestartSequence: PropTypes.func.isRequired,
   numOfCurrentItems: PropTypes.number.isRequired,
   numOfTotalItems: PropTypes.number.isRequired,
+  numOfStepsInSequence: PropTypes.number.isRequired,
+};
+
+Controls.defaultProps = {
+  numOfStepsInSequence: 0,
 };
 
 export default Controls;
diff --git a/stories/helpers/FlipMoveWrapper.js b/stories/helpers/FlipMoveWrapper.js
@@ -33,6 +33,38 @@ class FlipMoveWrapper extends Component {
     this.restoreItems = this.restoreItems.bind(this);
     this.rotateItems = this.rotateItems.bind(this);
     this.shuffleItems = this.shuffleItems.bind(this);
+    this.runSequence = this.runSequence.bind(this);
+    this.restartSequence = this.restartSequence.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.sequence) {
+      this.runSequence();
+    }
+  }
+
+  restartSequence() {
+    this.restoreItems();
+
+    window.setTimeout(() => {
+      this.runSequence(0);
+    }, this.props.flipMoveProps.duration || 500);
+  }
+
+  runSequence(index = 0) {
+    const { eventName, delay, args = [] } = this.props.sequence[index];
+
+    window.setTimeout(() => {
+      this[eventName](...args);
+
+      // If it's not the last item in the sequence, queue the next step.
+      const nextIndex = index + 1;
+      const nextItem = this.props.sequence[nextIndex];
+
+      if (nextItem) {
+        this.runSequence(nextIndex);
+      }
+    }, delay);
   }
 
   removeItem(itemId) {
@@ -108,14 +140,17 @@ class FlipMoveWrapper extends Component {
           onRestore={this.restoreItems}
           onRotate={this.rotateItems}
           onShuffle={this.shuffleItems}
+          onRestartSequence={this.restartSequence}
           numOfCurrentItems={this.state.items ? this.state.items.length : 0}
           numOfTotalItems={this.props.items ? this.props.items.length : 0}
+          numOfStepsInSequence={this.props.sequence ? this.props.sequence.length : 0}
         />
         <FlipMove
           style={{
             ...baseStyles.flipMoveContainerStyles,
             ...this.props.flipMoveContainerStyles,
           }}
+          duration={500}
           {...this.props.flipMoveProps}
         >
           {this.renderItems()}
@@ -139,6 +174,10 @@ FlipMoveWrapper.propTypes = {
   bodyContainerStyles: PropTypes.object,
   flipMoveContainerStyles: PropTypes.object,
   listItemStyles: PropTypes.object,
+  sequence: PropTypes.arrayOf(PropTypes.shape({
+    eventName: PropTypes.string,
+    delay: PropTypes.number,
+  })),
 };
 
 FlipMoveWrapper.defaultProps = {

diff --git a/stories/sequencing.stories.js b/stories/sequencing.stories.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+import FlipMove from '../src';
+import FlipMoveWrapper from './helpers/FlipMoveWrapper';
+import FlipMoveListItem from './helpers/FlipMoveListItem';
+
+['div', FlipMoveListItem].forEach((type) => {
+  const typeLabel = type === 'div' ? 'native' : 'composite';
+
+  storiesOf(`Sequencing - ${typeLabel}`, module)
+    .add('uninterrupted shuffles', () => (
+      <FlipMoveWrapper
+        itemType={type}
+        flipMoveProps={{ duration: 500 }}
+        sequence={[
+          { eventName: 'shuffleItems', delay: 20 },
+          { eventName: 'shuffleItems', delay: 600 },
+          { eventName: 'shuffleItems', delay: 800 },
+          { eventName: 'shuffleItems', delay: 500 },
+          { eventName: 'shuffleItems', delay: 500 },
+          { eventName: 'shuffleItems', delay: 1000 },
+        ]}
+      />
+    ))
+    .add('interrupted shuffles', () => (
+      <FlipMoveWrapper
+        itemType={type}
+        flipMoveProps={{ duration: 500 }}
+        sequence={[
+          { eventName: 'shuffleItems', delay: 20 },
+          { eventName: 'shuffleItems', delay: 600 },
+          { eventName: 'shuffleItems', delay: 200 },
+          { eventName: 'shuffleItems', delay: 700 },
+          { eventName: 'shuffleItems', delay: 50 },
+          { eventName: 'shuffleItems', delay: 150 },
+          { eventName: 'shuffleItems', delay: 250 },
+          { eventName: 'shuffleItems', delay: 350 },
+          { eventName: 'shuffleItems', delay: 450 },
+          { eventName: 'shuffleItems', delay: 350 },
+          { eventName: 'shuffleItems', delay: 500 },
+        ]}
+      />
+    ))
+    .add('leave during shuffle', () => (
+      <FlipMoveWrapper
+        itemType={type}
+        flipMoveProps={{ duration: 500 }}
+        sequence={[
+          { eventName: 'shuffleItems', delay: 20 },
+          { eventName: 'removeItem', delay: 300 },
+          { eventName: 'shuffleItems', delay: 400 },
+        ]}
+      />
+    ))
+    .add('remove items with interrupt, in order', () => (
+      <FlipMoveWrapper
+        itemType={type}
+        flipMoveProps={{ duration: 1000 }}
+        sequence={[
+          { eventName: 'removeItem', delay: 500, args: ['a'] },
+          { eventName: 'removeItem', delay: 200, args: ['b'] },
+          { eventName: 'removeItem', delay: 200, args: ['c'] },
+          { eventName: 'removeItem', delay: 200, args: ['d'] },
+        ]}
+      />
+    ))
+    .add('remove items with interrupt, random order', () => (
+      <FlipMoveWrapper
+        itemType={type}
+        flipMoveProps={{ duration: 1000 }}
+        sequence={[
+          { eventName: 'removeItem', delay: 500 },
+          { eventName: 'removeItem', delay: 200 },
+          { eventName: 'removeItem', delay: 200 },
+          { eventName: 'removeItem', delay: 200 },
+        ]}
+      />
+    ))
+});