Cacher is the code snippet organizer for pro developers

import React from "react";

import SwipeableViews from "react-swipeable-views";

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: "#fff",
    WebkitOverflowScrolling: "touch" // iOS momentum scrolling
  },
  slide1: {
    backgroundColor: "#FEA900",
    width: "20px",
    float: "left"
  },
  slide2: {
    overflowY: "auto",
    backgroundColor: "#B3DC4A"
  },
  slide3: {
    backgroundColor: "#6AC0FF"
  },
  slide4: {
    backgroundColor: "#FEA900"
  },
  button: {
    marginTop: 14
  }
};

const list = [];

for (let i = 0; i < 30; i += 1) {
  list.push(<div key={i}>{`item n°${i + 1}`}</div>);
}

const LastRunReports = () => (
  <SwipeableViews animateHeight enableMouseEvents>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      {list.slice(0, 1)}
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      {"This slide has a max-height limit:"}
      <br />
      <br />
      {list.slice(0, 30)}
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      {list.slice(0, 7)}
    </div>
  </SwipeableViews>
);

export default LastRunReports;