fix: height animation when there are margins, other changes

BREAKING CHANGE: now uses `react-transition-context` v5 by default, requiring
React ^16.8.0.  `withTransitionContext` and `simpleWithTransitionContext` have
been removed.  Also, `renderView` no longer receives `style`, `ref`, `key`,
etc. to pass along to the `div` it returns; rendering that wrapper `div` is
now managed internally.

.npmignore

@@ -5,7 +5,8 @@
 !yarn.lock
 /lib
 /src
-/stories
+/demo
+/webpack.config.js
 /test
 /coverage
 /flow-typed

README.md

@@ -6,14 +6,13 @@
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![npm version](https://badge.fury.io/js/react-view-slider.svg)](https://badge.fury.io/js/react-view-slider)
 
-Not another carousel; a simpler component that animates horizontal slide transitions between steps of a wizard or levels
-of a drilldown.
+Not another carousel; animates horizontal slide transitions between steps of
+a form or levels of a drilldown.
 
 # Table of Contents
 
 - [Usage](#usage)
 - [Props](#props)
-- [`withTransitionContext`](#withtransitioncontext)
 - [`SimpleViewSlider`](#simpleviewslider)
 
 ## Usage
@@ -28,17 +27,8 @@ import ReactDOM from 'react-dom'
 import ViewSlider from 'react-view-slider'
 
 // This function renders the view at the given index.
-// At minimum you should pass the key, ref, style, and className props to the returned element.
-const renderView = ({
-  index,
-  key,
-  ref,
-  style,
-  className,
-  active,
-  transitionState,
-}) => (
-  <div key={key} ref={ref} style={style} className={className}>
+const renderView = ({ index, active, transitionState }) => (
+  <div>
     <h3>View {index}</h3>
     <p>I am {active ? 'active' : 'inactive'}</p>
     <p>transitionState: {transitionState}</p>
@@ -61,19 +51,14 @@ ReactDOM.render(
 
 ## Props
 
-##### `renderView: (props: ViewProps) => React.Element<any>` **(required)**
+##### `renderView: (props: ViewProps) => React.Node` **(required)**
 
 This function renders each view. `ViewSlider` will call it with the following `props`:
 
 - `index: number` - the index of the view (starting at 0)
-- `key: number` - the key you should pass to the returned element
-- `ref: (c: HTMLElement) => any` - the ref you should pass to the returned element
-- `style: Object` - the style you should pass to the returned element
 - `active: boolean` - whether the view should currently be showing
 - `transitionState: 'in' | 'out' | 'entering' | 'leaving'` - the view's transition state
 
-At minimum you should pass the `key`, `ref`, `style`, and `className` props to the returned element.
-
 ##### `numViews: number` **(required)**
 
 The number of views present. `ViewSlider` will only render all views when transitioning; when idle, it will
@@ -135,16 +120,6 @@ The `ref` to pass to the root `<div>` element rendered by `ViewSlider`.
 
 The `ref` to pass to the viewport `<div>` element rendered inside the root `<div>` by `ViewSlider`.
 
-## `withTransitionContext`
-
-```js
-import ViewSlider from 'react-view-slider/lib/withTransitionContext'
-```
-
-This works exactly like `ViewSlider` except that it renders its views within a `TransitionContext` component from
-`react-transition-context` with the given `transitionState`. This is useful for doing things like focusing an `<input>`
-element after one of the views has transitioned in.
-
 ## `SimpleViewSlider`
 
 This is a wrapper for `ViewSlider` that takes a single child element. It renders the `ViewSlider` with the child's key
@@ -170,6 +145,3 @@ ReactDOM.render(
   document.getElementById('root')
 )
 ```
-
-If you want to use `SimpleViewSlider` with `react-transition-context`,
-use `react-view-slider/lib/simpleWithTransitionContext`.

demo/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true
+  }
+}

demo/Demo.js

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import withStyles from '@material-ui/core/styles/withStyles'
+import Code from '@material-ui/icons/Code'
+import Collapse from '@material-ui/core/Collapse'
+import Button from '@material-ui/core/Button'
+import IconButton from '@material-ui/core/IconButton'
+import Typography from '@material-ui/core/Typography'
+import Tooltip from '@material-ui/core/Tooltip'
+
+const { useState, useCallback } = React
+
+const styles = {
+  title: {
+    marginTop: 40,
+    marginBottom: 0,
+  },
+  root: {
+    margin: '20px auto',
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  toolbarSpacer: {
+    flex: '1 1 auto',
+  },
+  code: {
+    margin: 0,
+    padding: 20,
+    backgroundColor: 'white',
+    borderRadius: 4,
+  },
+  example: {
+    backgroundColor: '#eee',
+    borderRadius: 4,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+  },
+  titleAnchor: {
+    color: '#aaa',
+    marginLeft: 10,
+    textDecoration: 'none',
+    visibility: 'hidden',
+    '$title:hover > &': {
+      visibility: 'visible',
+    },
+  },
+}
+
+const Demo = ({
+  headerId,
+  classes,
+  title,
+  code,
+  example,
+  hooksCode,
+  hooksExample,
+}) => {
+  const [showSource, setShowSource] = useState(false)
+  const [api, setApi] = useState('hooks')
+  const setRenderProps = useCallback(() => setApi('render-props'), [])
+  const setHooks = useCallback(() => setApi('hooks'), [])
+  return (
+    <div className={classes.root}>
+      <Typography variant="h4" className={classes.title} id={headerId}>
+        {title}
+        {headerId && (
+          <a href={`#${headerId}`} className={classes.titleAnchor}>
+            #
+          </a>
+        )}
+      </Typography>
+      <div className={classes.toolbar}>
+        {code != null && hooksCode != null && (
+          <React.Fragment>
+            <Button
+              variant={api === 'render-props' ? 'outlined' : 'text'}
+              onClick={setRenderProps}
+            >
+              Render Props
+            </Button>
+            <Button
+              variant={api === 'hooks' ? 'outlined' : 'text'}
+              onClick={setHooks}
+            >
+              Hooks
+            </Button>
+          </React.Fragment>
+        )}
+        <div className={classes.toolbarSpacer} />
+        <Tooltip title="Show Source" placement="top">
+          <IconButton onClick={() => setShowSource(!showSource)}>
+            <Code />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <Collapse in={showSource}>
+        <pre className={classes.code}>
+          {api === 'hooks' ? hooksCode || code : code || hooksCode}
+        </pre>
+      </Collapse>
+      <div className={classes.example}>
+        {api === 'hooks' ? hooksExample || example : example || hooksExample}
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Demo)

demo/Root.js

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import withStyles from '@material-ui/core/styles/withStyles'
+import SignupDemo from './examples/SignupDemo'
+import Typography from '@material-ui/core/Typography'
+
+const styles = {
+  root: {
+    margin: '0 auto',
+    maxWidth: 600,
+  },
+}
+
+const Root = ({ classes }) => (
+  <div className={classes.root}>
+    <Typography variant="h4">react-view-slider demo</Typography>
+    <SignupDemo />
+  </div>
+)
+
+export default withStyles(styles)(Root)