skyquake/plugins/launchpad/src/carousel/carousel-react.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 var React = require('react');
  20 var Slider = require('react-slick');
  21 //import SkyquakeCarousel from './skyquakeCarousel.jsx';
  22 //This componenet should not be coupled with launchpad
  23
  24 import button from 'widgets/button/rw.button.js'
  25 var LaunchpadFleetStore = require('../launchpadFleetStore.js');
  26 var LaunchpadFleetActions = require('../launchpadFleetActions.js');
  27
  28 require('./carousel.css');
  29 var SimpleSlider = React.createClass({
  30   propTypes: {
  31     component_list:           React.PropTypes.array.isRequired,
  32     slideno:                  React.PropTypes.number,
  33     externalChangeSlide:      React.PropTypes.bool
  34   },
  35   handleClick: function() {
  36     this.setState({});
  37   },
  38   getDefaultProps: function() {
  39     this.externalChangeSlide = false;
  40     return {
  41       externalChangeSlide: false
  42     }
  43   },
  44   getInitialState: function() {
  45     return {
  46       }
  47
  48   },
  49   changeSlide: function(data) {
  50     if (data.slideChange > 0) {
  51       var setSlide = -1;
  52       for (var i = 0; i < this.props.component_list.length; i++) {
  53         var component = this.props.component_list[i].component;
  54         if (Object.prototype.toString.call(component) === "[object Array]") {
  55           for (var j = 0; j < component.length; j++) {
  56             var subcomponent = component[j];
  57             if (subcomponent.props.mp === data.dropdownSlide[0]) {
  58               setSlide = i;
  59             }
  60           }
  61         } else {
  62             if (component.props.mp === data.dropdownSlide[0]) {
  63               setSlide = i;
  64             }
  65           }
  66       }
  67       if (setSlide < 0) {
  68         return;
  69       }
  70       this.externalChangeSlide = true;
  71       this.setState({slideno: parseFloat(setSlide)});
  72     }
  73   },
  74   componentDidMount: function() {
  75     // LaunchpadFleetStore.listen(this.changeSlide);
  76   },
  77   componentWillUnmount: function() {
  78   },
  79   shouldComponentUpdate: function(nextProps) {
  80
  81     return true;
  82     // This prevents things in the carousel from updating which makes no sense because we're displaying metrics that need to update
  83     // if (nextProps.slideno != this.props.slideno) {
  84     //   return true;
  85     // }
  86     // return false;
  87   },
  88   componentDidUpdate: function(prevProps, prevState) {
  89     if (this.externalChangeSlide > 0) {
  90       this.externalChangeSlide = false;
  91       // LaunchpadFleetActions.slideNoStateChangeSuccess();
  92     }
  93   },
  94   handleResize: function(e) {
  95
  96   },
  97   render: function () {
  98     // var settings = {
  99     //   dots: true,
 100     //   infinite: false,
 101     //   speed: 500,
 102     //   slidesToShow: 1,
 103     //   slidesToScroll: 1,
 104     //   centerMode: true,
 105     //   initialSlide: this.props.slideno || 2
 106     // };
 107     var settings = {
 108         dots: true,
 109         infinite: false,
 110         speed: 500,
 111         slidesToShow: 1,
 112         slidesToScroll: 1,
 113         centerMode: true,
 114         changeSlide: this.externalChangeSlide,
 115         initialSlide: this.state.slideno || 0
 116     }
 117     if (this.externalChangeSlide) {
 118       settings.initialSlide = this.state.slideno;
 119     }
 120     setTimeout(function() {
 121       window.dispatchEvent(new Event('resize'));
 122     }, 0)
 123     var list = [];
 124     if (this.props.component_list !== undefined) {
 125       for (var i = 0; i < this.props.component_list.length; i++) {
 126         let title = this.props.component_list[i].title;
 127         let displayTitle = title ? 'inherit' : 'none';
 128         list.push(<div key={i}  className={"component"}><h2 style={{flex: '0 1 auto', justifyContent: 'center', alignSelf: 'center', display: displayTitle, padding: '0.5rem'}}>{title}</h2><div className="componentWrapper">{this.props.component_list[i].component}</div></div>);
 129       }
 130     }
 131     return (
 132       <div className={list.length > 1 ? '' : 'hideButtons'}>
 133         <Slider {...settings}>
 134           {list}
 135         </Slider>
 136       </div>
 137     );
 138   }
 139 });
 140 module.exports = SimpleSlider;