WIP

Author: jedwards1211

.gitignore

@@ -2,5 +2,4 @@
 coverage
 node_modules
 lib
-storybook-static
 .eslintcache

.npmignore

@@ -1,18 +1,14 @@
 .babelrc
 .eslintrc
 .nyc_output
-.storybook
 .travis.yml
 coverage
 node_modules
 test
-stories
 scripts
-storybook-static
 .eslintcache
 .idea
 solano.yml
 renovate.json
 commitlint.config.js
 flow-typed
-

.storybook/config.js

@@ -64,11 +64,11 @@
     "@jedwards1211/eslint-config": "^2.0.0",
     "@jedwards1211/eslint-config-flow": "^1.0.0",
     "@jedwards1211/eslint-config-react": "^4.0.0",
-    "@storybook/react": "^3.3.8",
     "@storybook/storybook-deployer": "^2.2.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
+    "babel-loader": "^8.0.5",
     "babel-plugin-flow-react-proptypes": "^13.0.2",
     "babel-plugin-istanbul": "^4.1.5",
     "babel-plugin-lodash": "^3.3.4",
@@ -100,21 +100,23 @@
     "jsdom-global": "^3.0.2",
     "mocha": "^5.0.0",
     "nyc": "^11.4.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-hot-loader": "^3.1.3",
-    "react-transition-context": "^2.0.0",
+    "react-transition-context": "^5.0.0",
     "rimraf": "^2.6.0",
-    "semantic-release": "^15.1.4",
+    "semantic-release": "^15.13.3",
     "sinon": "^4.1.4",
-    "travis-deploy-once": "^4.3.1"
+    "travis-deploy-once": "^4.3.1",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.0"
   },
   "dependencies": {
     "inline-style-prefixer": "^4.0.0",
-    "lodash": "^4.17.10",
     "prop-types": "^15.6.0"
   }
 }

package.json

@@ -4,16 +4,14 @@
 import * as React from 'react'
 import Prefixer from 'inline-style-prefixer'
 import { range } from "lodash"
+import {TransitionContext} from 'react-transition-context'
 
 type TransitionState = 'in' | 'out' | 'entering' | 'leaving'
 
 export type ViewProps = {
   index: number,
-  key: number,
   active: boolean,
   transitionState: TransitionState,
-  style: Object,
-  ref: (element: ?React.ElementRef<string>) => mixed,
 }
 
 export type DefaultProps = {
@@ -24,7 +22,6 @@ export type DefaultProps = {
   prefixer: Prefixer,
   style: Object,
   viewportStyle: Object,
-  measureHeight: (node: HTMLElement) => number,
 }
 
 export type Props = {
@@ -41,7 +38,6 @@ export type Props = {
   style: Object,
   viewportClassName?: string,
   viewportStyle: Object,
-  measureHeight: (node: HTMLElement) => number,
   rootRef?: (node: ?React.ElementRef<'div'>) => mixed,
   viewportRef?: (node: ?React.ElementRef<'div'>) => mixed,
 }
@@ -78,7 +74,6 @@ export default class ViewSlider extends React.Component<Props, State> {
     prefixer: new Prefixer(),
     style: {},
     viewportStyle: {},
-    measureHeight: (node: HTMLElement): number => node.offsetHeight,
   }
   state: State = {
     height: undefined,
@@ -94,7 +89,7 @@ export default class ViewSlider extends React.Component<Props, State> {
 
   measureHeight = (node: ?HTMLElement): ?number => {
     if (!node) return null
-    return this.props.measureHeight(node)
+    return node.clientHeight
   }
 
   setTimeout(name: string, callback: () => any, delay: number) {
@@ -165,7 +160,7 @@ export default class ViewSlider extends React.Component<Props, State> {
     const {fillParent, prefixer, keepViewsMounted} = this.props
     const {activeView, transitioning} = this.state
 
-    const style: Object = {...viewStyle}
+    const style: Object = {display: 'flex', ...viewStyle}
     if (fillParent) {
       Object.assign(style, fillStyle)
       style.overflow = 'auto'
@@ -177,14 +172,19 @@ export default class ViewSlider extends React.Component<Props, State> {
     if (!transitioning && activeView !== index && !keepViewsMounted) {
       return <div key={index} style={prefixer.prefix(style)}></div>
     }
-    return this.props.renderView({
-      index,
-      key: index,
-      active: index === activeView,
-      transitionState: this.getTransitionState(index),
-      style: prefixer.prefix(style),
-      ref: c => this.views[index] = c,
-    })
+    return (
+      <div key={index} style={prefixer.prefix(style)} ref={c => this.views[index] = c}>
+        <div style={{width: '100%'}}>
+          <TransitionContext state={this.getTransitionState(index)}>
+            {this.props.renderView({
+              index,
+              active: index === activeView,
+              transitionState: this.getTransitionState(index),
+            })}
+          </TransitionContext>
+        </div>
+      </div>
+    )
   }
 
   animateHeight = (): boolean => {
@@ -254,5 +254,3 @@ export default class ViewSlider extends React.Component<Props, State> {
     )
   }
 }
-
-

src/index.js

@@ -19,7 +19,6 @@ export type Props = {
   style?: Object,
   viewportClassName?: string,
   viewportStyle?: Object,
-  measureHeight?: (node: HTMLElement) => number,
   rootRef?: (node: ?React.ElementRef<'div'>) => mixed,
   viewportRef?: (node: ?React.ElementRef<'div'>) => mixed,
 }
@@ -29,12 +28,8 @@ export type State = {
   activeView: number,
 }
 
-function defaultRenderView({index, key, style, ref}: ViewProps): React.Element<'div'> {
-  return (
-    <div key={key} style={style} ref={ref}>
-      {this.state.views[index]}
-    </div>
-  )
+function defaultRenderView({index}: ViewProps): React.Element<'div'> {
+  return this.state.views[index]
 }
 
 export function createSimpleViewSlider(