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"}];
4 import React from 'react';
5 import ReactDOM from 'react-dom';
7 require('./skyquakeCarousel.scss');
9 export default class SkyquakeCarousel extends React.Component {
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) {
21 componentWillReceiveProps(props) {
23 let slides = this.constructSlides(props.slides);
24 console.log('refs', this.refs);
30 constructSlides(data){
32 let len = data.length;
33 let classItems = 'slide';
34 return data.map(function(v, i) {
35 let slideOrder = i + 2;
38 if (slideOrder > len) {
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>);
47 reorderSlides(activeSlideNo) {
49 let newSlideRefs = [];
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');
62 element.style.order = 1;
63 //class handles. currently no purpose
64 element.classList.add('is-ref');
68 function reorder(data, index) {
69 return data.slice(index).concat(data.slice(0, index))
74 let containerNode = ReactDOM.findDOMNode(self.refs['container']);
75 let total_len = this.props.slides.length;
77 case 'previous': prev.call(this); break;
78 case 'next': next.call(this); break;
80 containerNode.classList.remove('is-set');
81 setTimeout(function() {
82 containerNode.classList.add('is-set');
86 let currentSlide = self.state.currentSlide;
87 containerNode.classList.add('is-reversing');
88 if(currentSlide == 1) {
91 nextSlide = currentSlide - 1;
93 updateSlide(nextSlide);
97 let currentSlide = self.state.currentSlide;
98 containerNode.classList.remove('is-reversing');
99 if(currentSlide == total_len) {
102 nextSlide = currentSlide + 1;
104 updateSlide(nextSlide);
107 function updateSlide(slide) {
108 self.reorderSlides(slide)
115 // console.log('this', this);
116 // console.log('refs', this.refs);
117 // console.log('props',this.props);
118 // console.log('state',this.state);
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">
132 SkyquakeCarousel.defaultProps = {
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>)],
138 SkyquakeCarousel.displayName = 'SkyquakeCarousel';
142 <div className="carousel-container is-set" ref="container">
148 // Uncomment properties you need
149 // CarouselComponent.propTypes = {};
150 // CarouselComponent.defaultProps = {};