[docs] Add a Coverflow demo

docs/src/pages/demos/DemoCoverflow.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import SwipeableViews from 'react-swipeable-views';
+import Animated from 'animated/lib/targets/react-dom';
+
+const styles = {
+  root: {
+    background: '#000',
+    padding: '0 50px',
+  },
+  slide: {
+    padding: '24px 16px',
+    color: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    display: 'flex',
+  },
+  img: {
+    width: 180,
+    height: 180,
+    display: 'block',
+    marginBottom: 16,
+  },
+};
+
+const albums = [
+  {
+    name: 'Abbey Road',
+    src: '/static/album-art-1.jpg',
+  },
+  {
+    name: 'Bat Out of Hell',
+    src: '/static/album-art-2.jpg',
+  },
+  {
+    name: 'Homogenic',
+    src: '/static/album-art-3.jpg',
+  },
+  {
+    name: 'Number of the Beast',
+    src: '/static/album-art-4.jpg',
+  },
+  {
+    name: "It's Blitz",
+    src: '/static/album-art-5.jpg',
+  },
+  {
+    name: 'The Man-Machine',
+    src: '/static/album-art-6.jpg',
+  },
+  {
+    name: 'The Score',
+    src: '/static/album-art-7.jpg',
+  },
+  {
+    name: 'Lost Horizons',
+    src: '/static/album-art-8.jpg',
+  },
+];
+
+class DemoCoverflow extends React.Component {
+  state = {
+    index: 0,
+    position: new Animated.Value(0),
+  };
+
+  handleChangeIndex = index => {
+    this.setState({
+      index,
+    });
+  };
+
+  handleSwitch = (index, type) => {
+    if (type === 'end') {
+      Animated.timing(this.state.position, { toValue: index, duration: 150 }).start();
+      return;
+    }
+
+    this.state.position.setValue(index);
+  };
+
+  render() {
+    const { index, position } = this.state;
+
+    return (
+      <SwipeableViews
+        index={index}
+        style={styles.root}
+        onChangeIndex={this.handleChangeIndex}
+        onSwitching={this.handleSwitch}
+      >
+        {albums.map((album, currentIndex) => {
+          const inputRange = albums.map((_, i) => i);
+          const scaleOutputRange = inputRange.map(i => {
+            if (currentIndex === i) {
+              return 1;
+            }
+
+            return 0.7;
+          });
+          const scale = position.interpolate({
+            inputRange,
+            outputRange: scaleOutputRange,
+          });
+          const opacityOutputRange = inputRange.map(i => {
+            if (currentIndex === i) {
+              return 1;
+            }
+
+            return 0.3;
+          });
+          const opacity = position.interpolate({
+            inputRange,
+            outputRange: opacityOutputRange,
+          });
+          const translateOutputRange = inputRange.map(i => {
+            return 100 / 2 * (i - currentIndex);
+          });
+          const translateX = position.interpolate({
+            inputRange,
+            outputRange: translateOutputRange,
+          });
+
+          return (
+            <Animated.div
+              key={String(currentIndex)}
+              style={Object.assign(
+                {
+                  opacity,
+                  transform: [{ scale }, { translateX }],
+                },
+                styles.slide,
+              )}
+            >
+              <img style={styles.img} src={album.src} alt="cover" />
+              {album.name}
+            </Animated.div>
+          );
+        })}
+      </SwipeableViews>
+    );
+  }
+}
+
+export default DemoCoverflow;

docs/src/pages/demos/demos.md

@@ -83,3 +83,9 @@ Right-to-left direction
 The 3 slides are repeated indefinitely.
 
 {{demo='pages/demos/DemoCircular.js'}}
+
+## Coverflow
+
+Custom display with a coverflow effect.
+
+{{demo='pages/demos/DemoCoverflow.js'}}

package.json

@@ -28,6 +28,7 @@
     "url": "https://github.com/oliviertassinari/react-swipeable-views.git"
   },
   "devDependencies": {
+    "animated": "^0.2.1",
     "autoprefixer-loader": "^3.1.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",

pages/demos/demos.js

@@ -104,6 +104,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/DemoCircular'), 'utf8')
+`,
+        },
+        'pages/demos/DemoCoverflow.js': {
+          js: require('docs/src/pages/demos/DemoCoverflow').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/DemoCoverflow'), 'utf8')
 `,
         },
       }}

yarn.lock

@@ -234,6 +234,13 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+animated@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/animated/-/animated-0.2.1.tgz#c3e19c60207597493e0b93f9f009b1b7bc603c41"
+  dependencies:
+    invariant "^2.2.0"
+    normalize-css-color "^1.0.1"
+
 ansi-escapes@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
@@ -5462,6 +5469,10 @@ nopt@~3.0.1:
   dependencies:
     abbrev "1"
 
+normalize-css-color@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, "normalize-package-data@~1.0.1 || ^2.0.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"