skyquake/plugins/launchpad/src/carousel/skyquakeCarousel.jsx

   1
   2 var defaultSlideData = [{"id":1,"group-tag":"Group1-0","units":"packets","name":"ping-request-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"1-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":2,"group-tag":"Group1-0","units":"packets","name":"ping-response-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"2-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":1,"group-tag":"Group1-1","units":"packets","name":"ping-request-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538460,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"1-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"},{"id":2,"group-tag":"Group1-1","units":"packets","name":"ping-response-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538455,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"2-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"}];
   3
   4 import React from 'react';
   5 import ReactDOM from 'react-dom';
   6
   7 require('./skyquakeCarousel.scss');
   8
   9 export default class SkyquakeCarousel extends React.Component {
  10     constructor(props) {
  11         super(props);
  12         this.state = {};
  13         this.state.slides = this.constructSlides(props.slides);
  14         //current slide number. can eventually be used with initial construct slides function to specify initial slide. construct slides currently defaults to slide 1 as initial.
  15         this.state.currentSlide = props.currentSlide;
  16         //Ref handles. Index coresponds to slide position. Last slide is overflowed left in dom with an order of 1;
  17         this.state.refsArray = this.state.slides.map(function(v, i) {
  18             return v.ref
  19         });
  20     }
  21     componentWillReceiveProps(props) {
  22         console.log(props);
  23         let slides = this.constructSlides(props.slides);
  24         console.log('refs', this.refs);
  25         this.setState({
  26             slides: slides
  27         });
  28
  29     }
  30     constructSlides(data){
  31         let slides = [];
  32         let len = data.length;
  33         let classItems = 'slide';
  34         return data.map(function(v, i) {
  35             let slideOrder = i + 2;
  36             let isRef = '';
  37             let ref;
  38             if (slideOrder > len) {
  39                 isRef = ' is-ref';
  40                 slideOrder = 1;
  41             }
  42             ref = 'slide-' + (i+1);
  43             // return (<div key={i} ref={ref} className={classItems + isRef} style={{order: slideOrder}}>{v}</div>);
  44             return (<div key={i} className={classItems + isRef} style={{order: slideOrder}}>{v}</div>);
  45         });
  46     }
  47     reorderSlides(activeSlideNo) {
  48         let self = this;
  49         let newSlideRefs = [];
  50         let newSlideRefsLen;
  51         let containerNode = ReactDOM.findDOMNode(self.refs['container']);
  52         newSlideRefs = reorder(this.state.refsArray, activeSlideNo - 1);
  53         newSlideRefsLen = newSlideRefs.length;
  54         //updates Dom via ref hanldes to the individual slides.
  55         newSlideRefs.map(function(v, i) {
  56             let element = ReactDOM.findDOMNode(containerNode.refs[v]);
  57             if (newSlideRefsLen > (i + 1)) {
  58                 element.style.order = i + 2;
  59                 //class handles. currently no purpose
  60                 element.classList.remove('is-ref');
  61             } else {
  62                 element.style.order = 1;
  63                 //class handles. currently no purpose
  64                 element.classList.add('is-ref');
  65             }
  66         })
  67
  68         function reorder(data, index) {
  69           return data.slice(index).concat(data.slice(0, index))
  70         };
  71     }
  72     changeSlide(dir, e) {
  73         let self = this;
  74         let containerNode = ReactDOM.findDOMNode(self.refs['container']);
  75         let total_len = this.props.slides.length;
  76         switch(dir) {
  77             case 'previous': prev.call(this); break;
  78             case 'next': next.call(this); break;
  79         }
  80          containerNode.classList.remove('is-set');
  81             setTimeout(function() {
  82                 containerNode.classList.add('is-set');
  83         }, 100)
  84         function prev() {
  85             let nextSlide;
  86             let currentSlide = self.state.currentSlide;
  87             containerNode.classList.add('is-reversing');
  88             if(currentSlide == 1) {
  89                nextSlide = total_len
  90             } else {
  91                 nextSlide = currentSlide - 1;
  92             }
  93             updateSlide(nextSlide);
  94         }
  95         function next() {
  96             let nextSlide;
  97             let currentSlide = self.state.currentSlide;
  98             containerNode.classList.remove('is-reversing');
  99             if(currentSlide == total_len) {
 100                nextSlide = 1
 101             } else {
 102                 nextSlide = currentSlide + 1;
 103             }
 104             updateSlide(nextSlide);
 105
 106         }
 107         function updateSlide(slide) {
 108             self.reorderSlides(slide)
 109             self.setState({
 110                     currentSlide: slide
 111             });
 112         }
 113     }
 114   render() {
 115     // console.log('this', this);
 116     // console.log('refs', this.refs);
 117     // console.log('props',this.props);
 118     // console.log('state',this.state);
 119     return (
 120       <div className="carousel-component">
 121         <div>{this.state.currentSlide}</div>
 122         <button onClick={this.changeSlide.bind(this, 'previous')}>Prev</button>
 123         <button onClick={this.changeSlide.bind(this, 'next')}>Next</button>
 124         <div className="carousel-container is-set">
 125             {this.state.slides}
 126         </div>
 127       </div>
 128     );
 129   }
 130 }
 131
 132 SkyquakeCarousel.defaultProps = {
 133     slides: [],
 134     // slides: [(<div className="slide">slide 1</div>),(<div className="slide">slide 2</div>),(<div className="slide">slide 3</div>),(<div className="slide is-ref" ref="last">slide 4</div>)],
 135     currentSlide: 1
 136 }
 137
 138 SkyquakeCarousel.displayName = 'SkyquakeCarousel';
 139
 140 /*
 141
 142 <div className="carousel-container is-set" ref="container">
 143             {this.state.slides}
 144         </div>
 145
 146  */
 147
 148 // Uncomment properties you need
 149 // CarouselComponent.propTypes = {};
 150 // CarouselComponent.defaultProps = {};
 151