lucid-ui/lib/components/InfiniteSlidePanel/examples/1.dynamic-content.js

A UI component library from AppNexus.

import React from 'react';
import createClass from 'create-react-class';
import { Button } from '../../../index';
import InfiniteSlidePanel from '../InfiniteSlidePanel';

var generateRGB = function generateRGB(n) {
  var R = Math.floor((Math.sin(n / Math.PI) + 1) * 128);
  var G = Math.floor((Math.sin(2 * n / Math.PI) + 1) * 128);
  var B = Math.floor((Math.sin(3 * n / Math.PI) + 1) * 128);
  return "rgb(".concat(R, ",").concat(G, ",").concat(B, ")");
};

export default createClass({
  getInitialState: function getInitialState() {
    return {
      offset: 0
    };
  },
  handlePrev: function handlePrev() {
    this.setState({
      offset: this.state.offset - 1
    });
  },
  handleNext: function handleNext() {
    this.setState({
      offset: this.state.offset + 1
    });
  },
  handleSwipe: function handleSwipe(slidesSwiped) {
    this.setState({
      offset: this.state.offset + slidesSwiped
    });
  },
  render: function render() {
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Button, {
      onClick: this.handlePrev
    }, "Backward"), /*#__PURE__*/React.createElement(Button, {
      onClick: this.handleNext
    }, "Forward"), "Current offset: ", this.state.offset, /*#__PURE__*/React.createElement(InfiniteSlidePanel, {
      totalSlides: 12,
      slidesToShow: 3,
      offset: this.state.offset,
      onSwipe: this.handleSwipe
    }, function (slideOffset) {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          width: '100%',
          height: '30vh',
          background: generateRGB(slideOffset),
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }
      }, slideOffset);
    }));
  }
});