Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / launchpad / src / carousel / carousel-react.jsx

diff --git a/skyquake/plugins/launchpad/src/carousel/carousel-react.jsx b/skyquake/plugins/launchpad/src/carousel/carousel-react.jsx
new file mode 100644 (file)
index 0000000..e3fd003
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/carousel/carousel-react.jsx
@@ -0,0 +1,141 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+var React = require('react');
+var Slider = require('react-slick');
+//import SkyquakeCarousel from './skyquakeCarousel.jsx';
+//This componenet should not be coupled with launchpad
+
+import button from 'widgets/button/rw.button.js'
+var LaunchpadFleetStore = require('../launchpadFleetStore.js');
+var LaunchpadFleetActions = require('../launchpadFleetActions.js');
+
+require('./carousel.css');
+var SimpleSlider = React.createClass({
+  propTypes: {
+    component_list:           React.PropTypes.array.isRequired,
+    slideno:                  React.PropTypes.number,
+    externalChangeSlide:      React.PropTypes.bool
+  },
+  handleClick: function() {
+    this.setState({});
+  },
+  getDefaultProps: function() {
+    this.externalChangeSlide = false;
+    return {
+      externalChangeSlide: false
+    }
+  },
+  getInitialState: function() {
+    return {
+      }
+
+  },
+  changeSlide: function(data) {
+    if (data.slideChange > 0) {
+      var setSlide = -1;
+      for (var i = 0; i < this.props.component_list.length; i++) {
+        var component = this.props.component_list[i].component;
+        if (Object.prototype.toString.call(component) === "[object Array]") {
+          for (var j = 0; j < component.length; j++) {
+            var subcomponent = component[j];
+            if (subcomponent.props.mp === data.dropdownSlide[0]) {
+              setSlide = i;
+            }
+          }
+        } else {
+            if (component.props.mp === data.dropdownSlide[0]) {
+              setSlide = i;
+            }
+          }
+      }
+      if (setSlide < 0) {
+        return;
+      }
+      this.externalChangeSlide = true;
+      this.setState({slideno: parseFloat(setSlide)});
+    }
+  },
+  componentDidMount: function() {
+    // LaunchpadFleetStore.listen(this.changeSlide);
+  },
+  componentWillUnmount: function() {
+  },
+  shouldComponentUpdate: function(nextProps) {
+
+    return true;
+    // This prevents things in the carousel from updating which makes no sense because we're displaying metrics that need to update
+    // if (nextProps.slideno != this.props.slideno) {
+    //   return true;
+    // }
+    // return false;
+  },
+  componentDidUpdate: function(prevProps, prevState) {
+    if (this.externalChangeSlide > 0) {
+      this.externalChangeSlide = false;
+      // LaunchpadFleetActions.slideNoStateChangeSuccess();
+    }
+  },
+  handleResize: function(e) {
+
+  },
+  render: function () {
+    // var settings = {
+    //   dots: true,
+    //   infinite: false,
+    //   speed: 500,
+    //   slidesToShow: 1,
+    //   slidesToScroll: 1,
+    //   centerMode: true,
+    //   initialSlide: this.props.slideno || 2
+    // };
+    var settings = {
+        dots: true,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        centerMode: true,
+        changeSlide: this.externalChangeSlide,
+        initialSlide: this.state.slideno || 0
+    }
+    if (this.externalChangeSlide) {
+      settings.initialSlide = this.state.slideno;
+    }
+    setTimeout(function() {
+      window.dispatchEvent(new Event('resize'));
+    }, 0)
+    var list = [];
+    if (this.props.component_list !== undefined) {
+      for (var i = 0; i < this.props.component_list.length; i++) {
+        let title = this.props.component_list[i].title;
+        let displayTitle = title ? 'inherit' : 'none';
+        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>);
+      }
+    }
+
+    return (
+      <div className={list.length > 1 ? '' : 'hideButtons'}>
+        <Slider {...settings}>
+          {list}
+        </Slider>
+      </div>
+    );
+  }
+});
+module.exports = SimpleSlider;