How to use the react-swipeable-views-utils.virtualize function in react-swipeable-views-utils

// @flow
import type { EventElement } from './types';

import React, { Component } from 'react';

import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';
const VirtualizeSwipeableViews = virtualize(SwipeableViews);

import DayView from './DayView';
import MultipleDaysView from './MultipleDaysView';
import { addDays, diffDays, startOfDay } from './dateUtils';

function getEventsFromChildren(children?: EventElement | EventElement[]) {
	if(children == null) {
		return [];
	} else if (!Array.isArray(children)) {
		return [children];
	} else {
		return children;
	}
}

const referenceDate = new Date(2017,1,1);

import * as React from 'react';
import { View } from 'react-native';
import SwipeableViews from '../../packages/react-swipeable-views-native/src';
import { virtualize, autoPlay } from 'react-swipeable-views-utils';
import { mod } from 'react-swipeable-views-core';
import { Title } from 'react-native-paper';
import styles from '../styles';

const EnhancedSwipeableViews = autoPlay(virtualize(SwipeableViews));

function slideRenderer(params) {
  const { index, key } = params;
  let style;

  switch (mod(index, 3)) {
    case 0:
      style = styles.slide1;
      break;

    case 1:
      style = styles.slide2;
      break;

    case 2:
      style = styles.slide3;

import * as React from 'react';
import { View } from 'react-native';
import SwipeableViews from '../../packages/react-swipeable-views-native/src';
import { virtualize } from 'react-swipeable-views-utils';
import { mod } from 'react-swipeable-views-core';
import { Headline } from 'react-native-paper';
import styles from '../styles';

const VirtualizeSwipeableViews = virtualize(SwipeableViews);

function slideRenderer(params) {
  const { index, key } = params;
  let style;

  switch (mod(index, 3)) {
    case 0:
      style = styles.slide1;
      break;

    case 1:
      style = styles.slide2;
      break;

    case 2:
      style = styles.slide3;

import cx from 'classnames'
import * as R from 'ramda'
import * as React from 'react'
import SwipeableViews from 'react-swipeable-views'
import { mod } from 'react-swipeable-views-core'
import { virtualize } from 'react-swipeable-views-utils'
import * as M from '@material-ui/core'
import { fade } from '@material-ui/core/styles'

import Bar from 'website/components/Bar'
import scrollIntoView from 'utils/scrollIntoView'

import adornment from './adornment.png'

const Swipeable = virtualize(SwipeableViews)

const SLIDE_COUNT_FACTOR = 1000000

const videos = [
  {
    title: 'Overview',
    src:
      'https://www.youtube.com/embed/videoseries?list=PLmXfD6KoA_vArp85tMod7apo2UTeC3khq',
  },
]

const maxSlides = videos.length * SLIDE_COUNT_FACTOR

const getVideo = (i) => videos[mod(i, videos.length)]

const useStyles = M.makeStyles((t) => ({

import * as React from 'react'
import * as ReactDom from 'react-dom'
import SwipeableViews from 'react-swipeable-views'
import {virtualize} from 'react-swipeable-views-utils'
import classnames from 'classnames'
import {withStyles, Theme, StyledComponentProps, StyleRules} from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import ChevronRight from '@material-ui/icons/ChevronRight'

import * as DateUtil from './date'
const VirtualizedSwipeableViews = virtualize(SwipeableViews)

const styles = (theme:Theme):StyleRules => ({
  calendarContainer: {
    position: 'relative',
    maxWidth: '100%',
    width: (48 * 7) + 'px',
    overflow: 'hidden'
  },
  calendarControl: {
    position: 'absolute',
    width: '100%',
    pointerEvents: 'none',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    zIndex: 100

import React, { PropTypes } from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-elements';
import SwipeableViews from 'react-swipeable-views-native';
import { virtualize } from 'react-swipeable-views-utils';
import colors from '../../styles/colors';
import styles from './SlidesWithTabsStyles';

SwipeableViews.propTypes = {
  ...SwipeableViews.propTypes,
  children: PropTypes.any.isRequired,
};

const Slides = virtualize(SwipeableViews);

const SlidesWithTabs = (props) => {
  const {
    index,
    slideRenderer,
    prevSlideTitle,
    currentSlideTitle,
    nextSlideTitle,
    setPrevSlide,
    setNextSlide,
    onChangeSlide,
  } = props;

  return (

import * as React from 'react'
import SwipeableViews from 'react-swipeable-views'
import { mod } from 'react-swipeable-views-core'
import { autoPlay, virtualize } from 'react-swipeable-views-utils'
import * as M from '@material-ui/core'

import DotPagination from 'website/components/DotPagination'

import slide1 from './chloropleth.png'
import slide2 from './overview.png'
import slide3 from './genomes-images.png'
import slide4 from './terrain-tiles.png'
import slide5 from './versions.png'
import slide6 from './packages.png'

const Swipeable = autoPlay(virtualize(SwipeableViews))

const slides = [
  {
    src: slide1,
    caption: 'Choose from more than 25 visualizations',
  },
  {
    src: slide2,
    caption: 'Summarize S3 buckets',
  },
  {
    src: slide5,
    caption: 'Version every file',
  },
  {
    src: slide6,

import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';

import DayView from './DayView';
import MultipleDaysView from './MultipleDaysView';
import { addDays } from './dateUtils';
import { arrayEquals } from 'utils/arrays';

const MODE_DAY = 'day';
const MODE_WEEK = 'week';
const MODE_MOVE = 'move';
const DAYS_IN_WEEK = 7;
const DAYS_IN_THREE_DAYS = 3;

const VirtualizeSwipeableViews = virtualize(SwipeableViews);

const styles = {
  container: {
    height: '100%',
    willChange: 'transform',
  },
  slide: {
    height: '100%'
  },
  slideContainer: {
    position: 'relative',
    height: '100%',
    width: '100%',
  }

};