Skip to content

Commit c8c0da4

Browse files
StephenGriderStephenGrider
committed
exploring state and events - part 2
1 parent 50d6b89 commit c8c0da4

File tree

8 files changed

+161
-0
lines changed

8 files changed

+161
-0
lines changed

‎dropdown/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
main.js

‎dropdown/application.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
var options = {
2+
thumbnailData: [{
3+
title: 'Show Courses',
4+
number: 12,
5+
header: 'Learn React',
6+
description: 'React is a fantastic new front end library for rendering web pages. React is a fantastic new front end library for rendering web pages.',
7+
imageUrl: 'https://raw.githubusercontent.com/wiki/facebook/react/react-logo-1000-transparent.png'
8+
},{
9+
title: 'Show Courses',
10+
number: 25,
11+
header: 'Learn Gulp',
12+
description: 'Gulp will speed up your development workflow. Gulp will speed up your development workflow. Gulp will speed up your development workflow.',
13+
imageUrl: 'http://brunch.io/images/others/gulp.png'
14+
}]
15+
};
16+
17+
var element = React.createElement(ThumbnailList, options);
18+
React.render(element, document.querySelector('.container'));
19+
20+
var Badge = React.createClass({displayName: "Badge",
21+
render: function() {
22+
return React.createElement("button", {className: "btn btn-primary", type: "button"},
23+
this.props.title, " ", React.createElement("span", {className: "badge"}, this.props.number)
24+
)
25+
}
26+
});
27+
28+
var ThumbnailList = React.createClass({displayName: "ThumbnailList",
29+
render: function() {
30+
var list = this.props.thumbnailData.map(function(thumbnailProps){
31+
return React.createElement(Thumbnail, React.__spread({}, thumbnailProps))
32+
});
33+
34+
return React.createElement("div", null,
35+
list
36+
)
37+
}
38+
});
39+
40+
var Thumbnail = React.createClass({displayName: "Thumbnail",
41+
render: function() {
42+
return React.createElement("div", {className: "col-sm-6 col-md-4"},
43+
React.createElement("div", {className: "thumbnail"},
44+
React.createElement("img", {src: this.props.imageUrl, alt: "..."}),
45+
React.createElement("div", {className: "caption"},
46+
React.createElement("h3", null, this.props.header),
47+
React.createElement("p", null, this.props.description),
48+
React.createElement("p", null,
49+
React.createElement(Badge, {title: this.props.title, number: this.props.number})
50+
)
51+
)
52+
)
53+
)
54+
}
55+
});

‎dropdown/gulpfile.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var gulp = require('gulp');
2+
var gutil = require('gulp-util');
3+
var source = require('vinyl-source-stream');
4+
var browserify = require('browserify');
5+
var watchify = require('watchify');
6+
var reactify = require('reactify');
7+
8+
gulp.task('default', function() {
9+
var bundler = watchify(browserify({
10+
entries: ['./src/app.jsx'],
11+
transform: [reactify],
12+
extensions: ['.jsx'],
13+
debug: true,
14+
cache: {},
15+
packageCache: {},
16+
fullPaths: true
17+
}));
18+
19+
function build(file) {
20+
if (file) gutil.log('Recompiling ' + file);
21+
return bundler
22+
.bundle()
23+
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
24+
.pipe(source('main.js'))
25+
.pipe(gulp.dest('./'));
26+
};
27+
build();
28+
bundler.on('update', build);
29+
});

‎dropdown/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<head>
2+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
3+
<style>
4+
.btn .caret {
5+
margin-left: 5px;
6+
}
7+
</style>
8+
</head>
9+
<body>
10+
<div class="container">
11+
</div>
12+
</body>
13+
<script src="main.js"></script>

‎dropdown/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "thumbnail-gulp",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"test": "echo \"Error: no test specified\" && exit 1"
7+
},
8+
"author": "",
9+
"license": "ISC",
10+
"dependencies": {
11+
"browserify": "^9.0.3",
12+
"gulp": "^3.8.11",
13+
"gulp-concat": "^2.5.2",
14+
"gulp-react": "^3.0.1",
15+
"gulp-util": "^3.0.4",
16+
"react": "^0.13.1",
17+
"reactify": "^1.1.0",
18+
"vinyl-source-stream": "^1.1.0",
19+
"watchify": "^2.4.0"
20+
},
21+
"devDependencies": {}
22+
}

‎dropdown/src/app.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var React = require('react');
2+
var Dropdown = require('./dropdown');
3+
4+
var options = {
5+
title: 'Choose a dessert', // What should show up on the button to open/close the dropdown
6+
items: [ // List of items to show in the dropdown
7+
'Apple Pie',
8+
'Peach Cobbler',
9+
'Coconut Cream Pie'
10+
]
11+
};
12+
13+
var element = React.createElement(Dropdown, options);
14+
React.render(element, document.querySelector('.container'));

‎dropdown/src/button.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var React = require('react');
2+
3+
module.exports = React.createClass({
4+
render: function() {
5+
return <button className={"btn " + this.props.className} type="button">
6+
{this.props.title}
7+
<span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
8+
</button>
9+
}
10+
});

‎dropdown/src/dropdown.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// We need to show a button and a list
2+
// This component should know when to show the list
3+
// based on when the user clicks on a button
4+
5+
var React = require('react');
6+
var Button = require('./button');
7+
// var List = require('./list');
8+
9+
module.exports = React.createClass({
10+
render: function() {
11+
12+
return <div className="dropdown">
13+
<Button className="btn-default" title={this.props.title} subTitleClassName="caret" />
14+
</div>
15+
}
16+
});

0 commit comments

Comments
 (0)