Es6!
This commit is contained in:
parent
58448190c8
commit
cb94144ab1
4 changed files with 37 additions and 41 deletions
|
@ -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
|
||||
|
|
|
@ -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 (
|
||||
<Col sm={4} className="project-image">
|
||||
|
@ -23,6 +23,4 @@ var projectImage = React.createClass({
|
|||
</Col>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = projectImage;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<ProjectImage isHovered={this.state.hover === key}
|
||||
|
@ -76,6 +76,4 @@ var projectImagesMain = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = projectImagesMain;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<ProjectImage isHovered={this.state.hover === key}
|
||||
|
@ -54,6 +56,4 @@ var projectImagesTypes = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = projectImagesTypes;
|
||||
}
|
||||
|
|
Reference in a new issue