From cb94144ab15b4341c2175198e92ab3e93088b608 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sun, 3 Jan 2016 13:03:07 +0000 Subject: [PATCH] Es6! --- static/src/js/app.js | 8 ++--- .../src/js/components/index/project-image.js | 10 +++---- .../components/index/project-images-main.js | 30 +++++++++---------- .../components/index/project-images-types.js | 30 +++++++++---------- 4 files changed, 37 insertions(+), 41 deletions(-) diff --git a/static/src/js/app.js b/static/src/js/app.js index 0968405..a552595 100644 --- a/static/src/js/app.js +++ b/static/src/js/app.js @@ -1,10 +1,10 @@ /* global $ */ -require('./events.js'); +import './events.js'; -var React = require('react'); -var ProjectImagesTypes = require('./components/index/project-images-types'); -var ProjectImagesMain = require('./components/index/project-images-main'); +import React from 'react'; +import ProjectImagesTypes from './components/index/project-images-types'; +import ProjectImagesMain from './components/index/project-images-main'; if ($('body').hasClass('index')) { // Render components on index diff --git a/static/src/js/components/index/project-image.js b/static/src/js/components/index/project-image.js index 2a18467..f7bc92e 100644 --- a/static/src/js/components/index/project-image.js +++ b/static/src/js/components/index/project-image.js @@ -1,9 +1,9 @@ -var React = require('react'); +import React from 'react'; var ReactBootstrap = require('react-bootstrap'); var Col = ReactBootstrap.Col; -var projectImage = React.createClass({ - render: function () { +export default class ProjectImage extends React.Component { + render() { var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut'; return ( @@ -23,6 +23,4 @@ var projectImage = React.createClass({ ); } -}); - -module.exports = projectImage; +} diff --git a/static/src/js/components/index/project-images-main.js b/static/src/js/components/index/project-images-main.js index dd55e9a..52ee695 100644 --- a/static/src/js/components/index/project-images-main.js +++ b/static/src/js/components/index/project-images-main.js @@ -1,7 +1,7 @@ -var React = require('react'); +import React from 'react'; var ReactBootstrap = require('react-bootstrap'); +import ProjectImage from './project-image'; var Row = ReactBootstrap.Row; -var ProjectImage = require('./project-image'); const DATA = [ { @@ -42,19 +42,19 @@ const DATA = [ } ]; - -var projectImagesMain = React.createClass({ - keys: [[1, 2, 3], [4, 5, 6]], - getInitialState: function () { - return { - hover: 0, +export default class ProjectImagesMain extends React.Component { + constructor() { + super(); + this.keys = [[1, 2, 3], [4, 5, 6]]; + this.state = { + hover: 0 }; - }, - - setHovering: function (key) { + this.setHovering = this.setHovering.bind(this); + } + setHovering(key) { this.setState({hover: key}); - }, - render: function () { + } + render() { var generate_image = function (key) { return ( ); } -}); - -module.exports = projectImagesMain; +} diff --git a/static/src/js/components/index/project-images-types.js b/static/src/js/components/index/project-images-types.js index d4adef6..0861d05 100644 --- a/static/src/js/components/index/project-images-types.js +++ b/static/src/js/components/index/project-images-types.js @@ -1,7 +1,7 @@ -var React = require('react'); +import React from 'react'; var ReactBootstrap = require('react-bootstrap'); +import ProjectImage from './project-image'; var Row = ReactBootstrap.Row; -var ProjectImage = require('./project-image'); const DATA = [ { @@ -24,19 +24,21 @@ const DATA = [ } ]; - -var projectImagesTypes = React.createClass({ - keys: [1, 2, 3], - getInitialState: function () { - return { - hover: 0, +export default class ProjectImagesTypes extends React.Component { + constructor() { + super(); + this.keys = [1, 2, 3]; + this.state = { + hover: 0 }; - }, + this.setHovering = this.setHovering.bind(this); + } - setHovering: function (key) { + setHovering(key) { this.setState({hover: key}); - }, - render: function () { + } + + render() { var images = this.keys.map(function (key) { return ( ); } -}); - -module.exports = projectImagesTypes; +}