feat: add onSlideTransitionEnd prop, fix keepPrecedingViewsMounted

Author: jedwards1211

README.md

@@ -113,6 +113,10 @@ The duration of the transition between views.
 
 The timing function for the transition between views.
 
+##### `onSlideTransitionEnd: () => any`
+
+If given, will be called when the slide transition ends.
+
 ##### `prefixer: Prefixer`
 
 If given, overrides the `inline-style-prefixer` used to autoprefix inline styles.

src/index.js

@@ -33,6 +33,7 @@ export type Props = {
   animateHeight?: ?boolean,
   transitionDuration?: ?number,
   transitionTimingFunction?: ?string,
+  onSlideTransitionEnd?: ?() => mixed,
   prefixer?: ?Prefixer,
   fillParent?: ?boolean,
   className?: ?string,
@@ -73,6 +74,7 @@ export type State = {
   height: ?number,
   transitioning: boolean,
   activeView: number,
+  numViews: number,
   prevActiveView: ?number,
 }
 
@@ -118,6 +120,7 @@ export default class ViewSlider extends React.Component<Props, State> {
     height: undefined,
     transitioning: false,
     activeView: this.props.activeView,
+    numViews: this.props.numViews,
     // this is used to determine the correct transitionState for the previous active view.
     prevActiveView: null,
   }
@@ -176,6 +179,7 @@ export default class ViewSlider extends React.Component<Props, State> {
       // phase 3: change height/activeView
       newState = {
         activeView,
+        numViews: Math.max(this.state.numViews, activeView + 1),
         prevActiveView: this.state.activeView,
         height: this.measureHeight(this.views[activeView]),
       }
@@ -199,11 +203,18 @@ export default class ViewSlider extends React.Component<Props, State> {
     // ignore transitionend events from deeper components
     if (event && event.target !== this.viewport) return
     // phase 0: unset height and disable transitions
-    this.setState({
-      height: undefined,
-      prevActiveView: null,
-      transitioning: false,
-    })
+    this.setState(
+      {
+        height: undefined,
+        numViews: this.props.numViews,
+        prevActiveView: null,
+        transitioning: false,
+      },
+      () => {
+        const { onSlideTransitionEnd } = this.props
+        if (onSlideTransitionEnd) onSlideTransitionEnd()
+      }
+    )
   }
 
   componentWillUnmount() {
@@ -295,7 +306,6 @@ export default class ViewSlider extends React.Component<Props, State> {
       className,
       viewportClassName,
       viewportStyle,
-      numViews,
       prefixer,
       fillParent,
       transitionDuration,
@@ -305,7 +315,7 @@ export default class ViewSlider extends React.Component<Props, State> {
       spacing,
     } = this.getDefaultedProps()
     const animateHeight = this.animateHeight()
-    const { activeView, height, transitioning } = this.state
+    const { activeView, numViews, height, transitioning } = this.state
 
     const finalOuterStyle = {
       transitionProperty: 'height',

src/simple.js

@@ -13,6 +13,7 @@ export type Props = {
   animateHeight?: ?boolean,
   transitionDuration?: ?number,
   transitionTimingFunction?: ?string,
+  onSlideTransitionEnd?: ?() => mixed,
   prefixer?: ?Prefixer,
   fillParent?: ?boolean,
   className?: ?string,
@@ -58,19 +59,29 @@ export function createSimpleViewSlider(
         const activeView = parseInt(child.key)
         const views = [...this.state.views]
         views[activeView] = child
-        if (!this.props.keepViewsMounted) {
-          views.length = Math.min(views.length, activeView + 1)
-        }
         this.setState({ views, activeView })
-      } else if (prevProps.keepViewsMounted && !this.props.keepViewsMounted) {
-        const views = [...this.state.views]
-        views.length = Math.min(views.length, this.state.activeView + 1)
-        this.setState({ views })
       }
     }
 
     renderView = renderView.bind(this)
 
+    handleSlideTransitionEnd = () => {
+      if (!this.props.keepViewsMounted) {
+        const { views, activeView } = this.state
+        if (activeView < views.length - 1) {
+          this.setState(
+            {
+              views: views.slice(0, activeView + 1),
+            },
+            () => {
+              const { onSlideTransitionEnd } = this.props
+              if (onSlideTransitionEnd) onSlideTransitionEnd()
+            }
+          )
+        }
+      }
+    }
+
     render(): React.Node {
       const {
         children, // eslint-disable-line no-unused-vars
@@ -91,6 +102,7 @@ export function createSimpleViewSlider(
           renderView={this.renderView}
           numViews={views.length}
           activeView={activeView}
+          onSlideTransitionEnd={this.handleSlideTransitionEnd}
         />
       )
     }

test/index.js

@@ -217,6 +217,7 @@ describe('SimpleViewSlider', () => {
     comp.setProps({
       children: <div key={1}>Child a</div>,
     })
+    expect(comp.update().text()).to.equal('Child 0Child aChild 2')
 
     clock.tick(1000)
     expect(comp.update().text()).to.equal('Child 0Child a')